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 来获取头像和用户名文章来源：https://www.toymoban.com/news/detail-498570.html
心得体会
通过此实验，我初步学习了编写第一个微信小程序的方法，学习和初步掌握了点击按钮微信用户的头像和昵称的方法，是我学习移动软件开发这门课程的第一个实验，也是我学习移动软件开发的第一步，对于我将来的计算机课程的学习也有重要作用。文章来源地址https://www.toymoban.com/news/detail-498570.html
到了这里，关于《移动软件开发》实验一：第一个微信小程序的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
