《微信小程序:开发入门及案例详解》—— 1.3 第一个小程序-阿里云开发者社区

开发者社区> 华章出版社> 正文
登录阅读全文

《微信小程序:开发入门及案例详解》—— 1.3 第一个小程序

简介: 完成开发准备后我们便可以开始编写小程序,微信小程序的开发十分简单,大家可以快速上手。下面我们利用官方提供的dmeo让大家对小程序开发有初步认识。

本节书摘来自华章出版社《微信小程序:开发入门及案例详解》一 书中的第1章,第1.3节,作者李骏 边思,更多章节内容可以访问云栖社区“华章计算机”公众号查看,

1.3 第一个小程序

完成开发准备后我们便可以开始编写小程序,微信小程序的开发十分简单,大家可以快速上手。下面我们利用官方提供的dmeo让大家对小程序开发有初步认识。
1)打开微信开发者工具。第一次启动需要扫描二维码登录,如图1-9所示,开发权限配置参照上一小节。

c1530cb88e1f2e43fd198d8984e9e9ab9d58cc82

2)登录后选择“添加项目”。
3)在填写项目信息之前,先创建一个空目录作为项目资源目录,这里我们以E:\weixin\demo为例。
4)填写项目信息。如果没有AppID可以选择“无AppID”;填写项目名称,项目名称在微信开发者工具中是唯一的;项目目录选择刚才创建的空目录,这里一定要保证刚才创建的目录为空目录,这样下面会出现“在当前目录中创建quick start项目”选项,勾选这个选项,如图1-10所示,然后点击“添加项目”按钮。
5ab89d64a13097279a6f5ca183e953ac4a966b68

创建好后的界面如图1-11所示。
3351644d59440bdcef6af969bb806fc7029d3790

这样我们便成功创建了第一个小程序,这个demo是官方提供的示例,第一个页面展示了当前登录的用户信息,点击头像会跳转到一个记录当前小程序启动时间的日志页面。为了让大家进一步体验小程序开发,我们利用Sublime或其他编辑工具打开E:\weixin\demo文件夹,修改index.wxml,将“{{motto}}”替换为“我的第一个小程序”,index.wxml修改后代码如下:
<!--index.wxml-->
<view class="container">
  <view  bindtap="bindViewTap" class="userinfo">
    <image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size= "cover"></image>
    <text class="userinfo-nickname">{{userInfo.nickName}}</text>
  </view>
  <view class="usermotto">
    <!--  修改这句代码  -->
    <text class="user-motto">我的第一个小程序</text>
  </view>
</view>

修改后点击“重启”,如图1-12所示。

06c1f923a5f17bd37bbdc1e00acfdc4bf670e341

重启后,登录界面提示语由原来的“Hello World”变成了“我的第一个小程序”,如图1-13所示。
b1cf43d87b17d7568642dc6e22e8dfb6778b2e25

填写了AppID的项目可以选择“项目→预览”(如图1-14所示),扫描二维码在微信中体验项目。
e151ab6d11a767f14c2b8c9f3408e2a10bc79b8f

至此我们简单体验了一个小程序的创建过程,但对于一个喜欢“刨根问底”的学习者来说,这个案例远远不够,可能会有很多问题,例如:
小程序启动入口在哪里?
index.wxmlindex.wxss、index.js等文件是否可以重新命名?它们之间的关系是什么?目录结构有怎样的规范?
WXML、WXSS文件是什么?怎么感觉很像HTML和CSS?
小程序开发中有哪些限制?
大家可以先按自己理解尝试修改项目中相关的文件,看看能产生什么效果,把过程中遇到的问题记录下来,带着问题阅读后面的章节。

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享: