2024年夏季《移动软件开发》实验报告

2024年夏季《移动软件开发》实验报告

一、实验目标

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

二、实验步骤

1. 自动生成小程序

1.1 项目创建

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

后端服务选择“不适用云服务”，语言选择JavaScript，然后单击创建按钮，进入页面。

2. 手动创建小程序

2.1 项目创建

步骤与自动生成小程序相同。

2.2 页面配置

2.2.1 创建页面文件

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

具体操作如下：

1. 将 app.json 文件内 pages 属性中的 "pages/logs/logs" 删除，并删除上一行末尾的逗号。
2. 按快捷键 Ctrl + S 保存当前修改。

2.2.2 删除和修改文件

具体操作如下：

1. 删除 utils 文件夹及其内部所有内容。
2. 删除 pages 文件夹下的 logs 目录及其内部所有内容。
3. 删除 index.wxml 和 index.wxss 中的全部代码。
4. 删除 index.js 中的全部代码，并输入关键词 page，找到第二个选项，按回车键让其自动补全函数。
5. 删除 app.wxss 中的全部代码。
6. 删除 app.js 中的全部代码，并输入关键词 app，找到第一个选项，按回车键让其自动补全函数。

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

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> 组件的代码，为其追加获取用户信息事件，代码片段如下：

<button open-type="getUserInfo" bindgetuserinfo="getMyInfo">点击获取头像和昵称</button>

其中 open-type="getUserInfo" 表示激活获取微信用户信息功能，然后使用 bindgetuserinfo 属性表示获得的数据将传递给自定义函数 getMyInfo，开发者也可以使用其他名称。

在 JS 页面的 Page() 内部追加 getMyInfo 函数，代码片段如下：

Page({
  data: {},
  getMyInfo(e) {
    console.log(e.detail.userInfo);
  }
});

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

2.4.2 使用动态数据显示头像和昵称

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

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

2.4.3 更新头像和昵称

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

三、程序运行结果

实验结果截图如下：

四、问题总结与体会

问题：使用 getUserInfo 获取用户信息和头像失败
问题原因：微信更新，旧方法不合适
解决办法：采用 wx.getUserProfile 来获取头像和用户名

心得体会
在本次实验中，我学习并掌握了如何使用微信开发者工具快速生成小程序以及手动创建小程序的流程，并初步掌握了点击按钮微信用户的头像和昵称的方法。这一过程让我深入理解了小程序开发的基本结构，包括WXML、WXSS、JavaScript代码的编写，以及如何在前端页面中进行交互设计。