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个内容:微信头像、微信昵称、和“点击获取头像和昵称”按钮。

使用的组件如下：

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

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 来获取头像和用户名

心得体会

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

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

微信小程序开发与应用第一章微信小程序的基本知识1
1-1 第一章第一节微信小程序的基本知识1 文章目录前言一.注册一个小程序账号二.第一个微信小程序"Hello Wechat!" (一)准备工作 (二)页面介绍 (三)代 ...
ouc2022移动软件开发实验二：天气查询小程序
一.实验目标 1.掌握服务器域名配置和临时服务器部署:2.掌握 wx.request 接口的用法. 二.实验步骤 1."和风天气"密钥申请 "和风天气"有着可以 ...
《移动软件开发》实验1：第一个微信小程序实验报告
2022年夏季<移动软件开发>实验报告本实验报告所参考实验文档为:Docs (feishu.cn) 如想获得详细的制作过程,请点击上面链接.该博客仅为个人使用实验报告姓名和学号? / ...
微信小程序开发学习笔记001--认识微信小程序,第一个微信小程序
第一天,认识微信小程序,第一个微信小程序 1.什么是微信小程序? 是h5网页嘛?不是微信张小龙说: 小程序是一种不需要下载安装即可使用的应用, 它实现了应用"触手可及"的梦想,用 ...
微信小程序开发笔记（二）第一个微信小程序
参考教材:<微信小程序开发入门与实践> 雷磊前置知识:JavaScript,CSS 新建项目安装好微信开发者工具后,我们就可以开始新建我们第一个微信小程序了. 选择新建项目,填入一个项 ...
普本在校生是如何零基础在一个月内开发出第一款微信小程序的
先自我介绍一下,我是一个普通本科的大三在读生,在2020年春节前后,自己一个人开发并上线了第一款微信小程序,后续陆续开发了N款小程序,并且自己通过毕设.课设的开发在2020年上半年的疫情期间挣了一万多 ...
微信小程序开发教程（二）创建第一个微信小程序
在安装完"微信Web开发者工具"之后,通过开发者的微信扫码进入后,如图. 点击"添加项目",填入之前获得的AppID(无AppID可忽略),输入项目名称&quo ...
如何部署我们的第一个微信小程序EGO商城
一.部署步骤二.工具准备 1.自主将百度网盘链接软件安装下载并且安装相关软件链接:https://pan.baidu.com/s/1o7Rwp0IqCO2QIxRm5WSIdw?pwd=1024 ...
多平台多渠道账号体系绑定第一篇-微信小程序篇
先奉上本篇实现效果多平台多渠道账号体系绑定第一篇-微信小程序篇近来,在对接三方平台时,欲将多方开放平台统一整合入笔者的框架内. 如下为大致思路设计图由于需对接多方平台关联账号体系,思来之后,将设 ...

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