一、实验目标
- 学习使用快速启动模板创建小程序的方法；
- 学习不使用模板手动创建小程序的方法。
二、实验步骤
自动生成小程序
-
首先到微信公众平台官网首页注册账号，进行信息填写登记，使用邮箱激活账号。
-
然后到微信开发者工具官网，根据自己的电脑版本下载微信开发者工具，并进行安装。
-
打开微信开发者工具，点击左侧的小程序，进行小程序创建。需要填写：
- 项目名称
- 项目在本地的目录
- AppID可以使用已经注册的AppID或者使用测试号
- 开发模式选“小程序”
- 后端服务选择“不使用云服务”
-
根据实验文档，第一个小程序使用模板，我选了JS-基础模板，鼠标放到模板上还可以通过手机扫描二维码查看模板的效果，非常方便。选择好模板后点击“确定”创建小程序。
-
创建完成后进入编辑界面，左边是小程序的效果，中间可以看到清晰的文件目录，右边是代码编辑的界面，下面是控制台。
手动创建小程序
-
首先点击项目中的“新建项目”，重新创建一个小程序项目，模板选择选“不使用模板”。
-
进入编辑界面，根据实验文档，首先需要在总目录的
app.json文件中修改导航栏背景颜色为紫色、字体为白色、导航栏可以自定义文字内容。
快捷键
Ctrl+S保存后可以看到左边的导航栏发生了变化。
-
然后是页面设计，包括：
- 微信头像：
<image>图像组件； - 微信按钮：
<text>文本组件； - 按钮：
<button>按钮组件。
在
pages/index/index.wxml中编写代码：
在
pages/index/index.wxss中编写代码，修改样式：
上述代码效果如下：
- 微信头像：
-
逻辑实现部分需要在
pages/index/index.js中编写代码，因为微信小程序在不断更新，这里的代码和实验文档不同。
-
对代码进行编译，然后可以使用手机或者电脑对效果进行预览。
三、程序运行结果
未点击按钮的界面如下：
点击按钮后的界面如下：
因为微信小程序更新导致获取的头像为灰色并且名称为微信用户，详细说明可以参考小程序用户头像昵称获取规则调整公告 | 微信开放社区 (qq.com)
四、问题总结与体会
- 实验中因为微信公众平台更新导致一些接口的使用方法和实现功能和原来不同，查询官方文档可以解决这个问题。
- 通过这次实验，学习了使用模板和不使用模板两种创建小程序的方法，对微信小程序有了一定的了解。