实验报告——第一个微信小程序
一、实验目标
1、学习使用快速启动模板创建小程序的方法;
2、学习不使用模板手动创建小程序的方法。
二、实验步骤
1. 自动生成小程序
在微信开发者工具中选择模板创建项目,如图所示;
依次填写项目名称、目录和 AppID 就可以新建一个小程序项目。其中项目名称为开发者自定义,仅供开发者工具管理使用;目录即为项目文件存放的路径地址;AppID为管理员在微信公众平台上注册的小程序ID(以登录微信公众平台https://mp.weixin.qq.com查看)。
编译预览小程序。
2. 手动创建小程序
不选取模板创建空白项目
进行页面配置
创建页面文件
page文件内存储页面文件,一般来说,首页默认命名为index,表示小程序运行的第一个页面。
删除
index.wxml
、index.wxss
和app.wxss
中的所有代码;删除
index.js
中的所有代码并输入"page"
使其自动补全函数;删除
app.js
中的所有代码并输入"app"
使其自动补全函数。
视图设计
导航栏设计
在
app.json
文件中对windows属性进行重新配置来自定义导航栏效果,将小程序导航栏更改为紫色背景及白色字体。663399使用rgb格式,代表紫色;
对应效果如下:
页面设计
首先,在小程序中添加微信头像、昵称及“点击获取头像和昵称”按钮三个组件,并将其设置为列项居中排列。
使用组件格式:
微信头像:
<image>
组件;微信昵称:
<text>
(文本)组件;按钮:
<button>
(按钮)组件。
由于尚未获得头像图片,临时使用本地图片代替微信头像,之后再通过点击按钮获取微信头像后进行更改。
在项目中新建自定义文件夹images用于存放图片并将本地图片移入等待使用,之后修改
<image>
组件读取该图片。
逻辑实现
获取微信用户信息
在
WXML
页面修改<button>
组件的代码,其中open-type= get User Info'
表示激活获取微信用户信息功能,然后使用bindgetuserinfo
属 性表示获得的数据将传递给自定义函数getMyInfo
, 名称可自定义。在
JS
页面的Page()
内部追加getMyInfo
函数保存后预览项目,如果点击按钮后 Console 控制台能够成功输出一段数据,就说明获取成功。
使用动态数据显示头像和昵称
在WXML页面修改
<image>
和<text>
组建的代码;修改JS文件,在现有的data 属性中追加这两个动态数据的值,使其仍然可以显示原先的内容;
更新后预览图不变,如图所示:
更新头像和昵称
修改
JS
文件中getMyInfo
函数的代码,使获取到的信息更新到动态数据上。点击按钮后,头像和昵称成功更新:
三、程序运行结果
四、问题总结与体会
- 学会了微信开发者工具的基础操作,能按步骤新建项目,用快速启动模板快速看到可运行的小程序效果,初步了解了小程序开发的基本流程。
- 通过手动创建小程序,我大致了解了不同文件的作用,也掌握了修改配置(如导航栏样式)和删减多余文件的方法,对小程序的配置逻辑有了简单的认识。
- 尝试用基础组件搭建页面,用 WXSS 调 用户信息、更新页面数据,理解了一些简单原理。