《移动软件开发》实验一：第一个微信小程序

2022年夏季《移动软件开发》实验一：第一个微信小程序

一、实验目标

1、学习使用快速启动模板创建小程序的方法；2、学习不使用模板手动创建小程序的方法。

二、实验步骤

1.自动生成小程序

1.1 项目创建

​ 双击微信开发者工具图标，使用管理员微信扫码二维码后进入菜单画面，选择菜单中的“小程序”选项进入小程序项目管理页面。依次填写项目名称（开发者自定义的名称，小程序用户用户不可见) 、目录（用于存放小程序项目）、AppID(管理员在微信公众平台上注册的小程序ID)，AppID可通过微信公众平台左侧菜单中的“开发”选项，切换至“开发设置”面板，查看“开发者 ID ”下方的 AppID （小程序 ID )进行查看，我的AppID如下图所示。

后端服务选择不适用云服务，语言选择JavaScript，然后单击创建按钮，进入页面，如下图所示。

2. 手动创建小程序

2.1 项目创建

同步骤1

2.2 页面配置

2.2.1 创建页面文件

项目创建完毕后，在根目录中会生成文件夹pages用于存放页面文件。一般来说首页默认命名为index，表示小程序运行的第一个页面，本项目只需要保留首页（index）即可。

​ 具体操作如下：

​ (1）将 app.json 文件内 pages 属性中的“ pages / logs / logs ”删除，并删除上一行末尾的

逗号。
(2）按快捷键 Cirl + S 保存当前修改。

2.2.2 删除和修改文件

具体操作如下：

(1) 删除utils文件夹及其内部所有内容。

(2）删除 pages 文件夹下的 logs 目录及其内部所有内容。

(3）删除 index.Wxml 和 index.Wxss 中的全部代码。

(4）删除 index.js 中的全部代码，并且输人关键词“ page ”找到第二个选项按回车键让其自动补全函数。
(5）删除 app.wxss中的全部代码。
(6）删除app.js中的全部代码，并且输人关健间＂ pp ＂找到第一个选项按回车键让其日动补全函数。

至此，模板代码修改完毕。

2.3 视图设计

2.3.1 导航栏设置

小程序默认导航栏是黑底白字的效果，可通过在app.json中对window属性进行重新配置来自定义导航栏效果。更改后的app.json文件代码及效果图如下所示：

2.3.2 页面设计

页面设计包括3个内容:微信头像、微信昵称、和“点击获取头像和昵称”按钮。

​ 使用的组件如下：

​ 微信头像：组件 微信头像： 组件 按钮 : 组件

​ 相关WXML代码片段如下：

​

​ 相关WXSS代码片段如下：

在项目中新建自定义文件夹images用于存放图片，将图片复制进来，然后修改wxml页面的<image>组件。

​ 在wxss页面追加组件的相关代码如下：

2.4 逻辑实现

2.4.1 获取微信用户信息

在 WXML 页面修改＜ button ＞组件的代码，为其追加获取用户信息事件，代码片段如下

其中 open - type = getUserlnfo 表示激活获取微信用户信息功能，然后使用 bindgetuserinfo 吴性表示获得的数据将传递给自定义函数 getMyInfo ，开发者也可以使用其他名称。
在 JS 页面的 Page（) 内部追加 getMyInfo 函数．代码片段如下：

保存，获取用户信息完成。

2.4.2 使用动态数据显示头像和昵称
在 WXML 页面修改＜ image ＞和＜ text >组件的代码，将图片来源和文本内容使用双花括号（{{}}）做成动态数据，代码片段如下：

​ 同时修改 JS 文件，在现有的 data 属性中追加这两个动态数据的值，使其仍然可以显示原先的内容。代码片段如下：

2.4.3 更新头像和昵称

​ 更改 JS 文件中 getMyInfo 函数的代码．使获取到的信息更新到动态数据上。代码片段如下：

已全部完成。

三、程序运行结果

实验结果截图

四、问题总结与体会

问题：使用getUserInfo获取用户信息和头像失败

问题原因：微信更新，旧方法不合适

解决办法：采用 wx.getUserProfile 来获取头像和用户名

心得体会

​ 通过此实验，我初步学习了编写第一个微信小程序的方法，学习和初步掌握了点击按钮微信用户的头像和昵称的方法，是我学习移动软件开发这门课程的第一个实验，也是我学习移动软件开发的第一步，对于我将来的计算机课程的学习也有重要作用。