第3章〓第一个微信小程序

微课视频


本
章的主要任务是初步介绍微信开发者工具的使用方法，包括创建项目、编译项目及预览小程序
，然后使用微信开发者工具开发第一个微信小程序，在小程序页面输出Hello WeChat。


 3.1Hello WeChat微信小程序


3.1.1创建项目


双击微信开发者工具图标启动程序，初次打开时需要使用微信扫码登录，进入如图31
所示的页面，可以选择新建项目。若不是初次打开，一般会直接进入编辑器页面，这时若想要回到
项目管理页面只需要关掉编辑器，则项目管理页面会自动出现。




图31微信开发者工具项目管理页


在新建项目时需要填写项目名称（尽量使用英文）； 然后选择项目存放目录； 
项目的AppID可以在小程序管理后台中获取，在开发管理中的开发设置中复制ID（AppID是开发者唯一的身份认证，支付、获取手机信息等高级功能需要AppID授权，后期调用微信小程序的接口等功能也需要AppID）。如果只想做一些简单的
功能测试，则可以不填写AppID，单击使用测试号即可，后期项目要发布上线
只需重新把AppID改回正式的开发者ID即可； 开发模式默认
情况下会直接选中小程序； 后端服务若选择云开发小程序，则可以使用云数据库、云函数等高级功能，若选择测试号则没有权限选择后端服务。具体如图32所示。



图32创建小程序


3.1.2编译项目

单击工具栏中的“编译”按钮即可编译项目，如图33所示。



图33编译项目


3.1.3浏览项目


在开发者工具左边的手机模拟器中可以浏览当前页面的布局情况，如图34所示。




图34模拟器预览


3.1.4使用手机浏览项目

单击“预览”按钮，如图35所示，用手机扫描生成的二维码，即可在手机上预览页面。




图35小程序预览


注意，该功能只为手机提供了预览页面，开发者并不能真正地操作页面内的网页元素。


要在手机上调试并查看代码执行情况，需要单击“真机调试”按钮，如图36所示，用手机扫描生成的二维码，即可进入真机调试状态，与预览功能不同，真机调试会出现调试窗口，方便开发者检查小程序运行情况，如图37和图38所示。




图36真机调试入口




图37真机调试手机端




图38真机调试PC端


预览小程序的三种方式如图39所示。



图39预览小程序的三种方式


3.1.5项目详情

微信小程序的代码主要存放在四个文件中，如图310所示。



图310存放代码的文件


 3.2简单修改完成“Hello WeChat”项目


要想在小程序中输出Hello WeChat，需要在index.wxml中加入“
<view>Hello WeChat</view>”代码段，保存修改，Hello WeChat就显示在了左端的屏幕上，如图311所示。




图311Hello WeChat

 3.3小结

本章小结如图312所示。



图312小结


 3.4习题

1. 微信小程序的开发和调试中，()可以让开发者在手机上体验对应的开发版本。



A. 微信调试B. 真机调试C. Chrome调试D. 远程调试

2. 下面关于创建微信小程序项目的说法中正确的是()。

A. 通过微信开发者工具创建微信小程序

B. 微信小程序项目通过AppID和测试创建

C. 创建空白微信小程序项目时会自动创建app.json文件

D. 创建空白微信小程序项目时会自动创建project.config.json文件

3. 在创建好的微信小程序项目中编写并展示Hello WeChat。