第一个微信小程序

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

## **一、实验目标**

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

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

## 二、实验步骤

列出实验的关键步骤、代码解析、截图。

1.1 自动生成小程序

​ 1.下载微信开发者工具并安装

​ 登陆官方下载平台https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

​ 我下载的是稳定版macOS x64，如下图：


​ 2.项目创建

​ 打开微信开发者工具进行项目的创建，可以使用AppID或者直接使用测试号


​ 使用AppID时需要进行小程序注册


​ 项目创建包括：项目名称、项目保存目录、AppID、开发模式（小程序）、后端服务（是否使用云开发）、模版选择等。

​ 创建完成后进入开发界面：


​ 我使用微信登录的，开发效果可以通过真机预览，点击上方的预览，生成二维码用手机进行扫描，即可在手机上打开预览。

<img src="/Users/songziang/Desktop/截屏2022-08-17 10.14.14.png" alt="截屏2022-08-17 10.14.14" style="zoom:50%;" />

1.2 手动创建小程序

​ 和自动创建一样，先进入项目创建界面进行项目创建。

​ 1.2.1 创建页面文件

​ 项目创建完成后会生成文件夹pages用于存放页面文件，首页默认命名为index，可以通过app.json文件的pages属性更改，删除“pages/logs/logs”。


​ 1.2.2 删除和修改文件

​ 修改模版代码，便于进行项目创建

<img src="/Users/songziang/Desktop/截屏2022-08-17 10.43.29.png" alt="截屏2022-08-17 10.43.29" style="zoom: 50%;" />

1.2.3 视图设计

​ 导航栏颜色和文本编辑


​ 页面设计（按钮、头像、昵称等）


1.2.4 逻辑实现

​ 获取微信用户信息：


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

​ 修改WXML中的image和text组建代码，并修改JS文件中的data数据。

<img src="/Users/songziang/Library/Application Support/typora-user-images/截屏2022-08-17 11.23.42.png" alt="截屏2022-08-17 11.23.42" style="zoom:67%;" />

​ 更新头像和昵称：

​ 修改Js中的getMyInfo函数代码，使得能够获得动态数据。

​

## 三、程序运行结果

列出程序的最终运行结果及截图。


## 四、问题总结与体会

通过本次实验的完成，我初步认识了微信小程序开发的详细过程，在实验过程中，通过学习文档中代码和操作一步步实现，使得我的开发能力有了浅显的提高，我觉得开发小程序也不是一件非常难的事情，只要掌握了语言的使用以及合理的界面布局就可以做出一个简单的、基础的小程序，当然要想做好一个小程序还需要日后继续的学习以及代码的不断优化，界面的不断调教。一次实验的完成我学习到了很多，包括项目的创建、页面配置、视图设计、逻辑实现等。为日后小程序的开发奠定了基础。