2022年夏季《移动软件开发》实验报告
一、实验目标
1、学习使用快速启动模板创建小程序的方法;2、学习不使用模板手动创建小程序的方法。
二、实验步骤
1. 手动创建小程序
2. 页面配置
删除原有的wxml和和wxss中的html和css文件。删除原page的js文件,修改后的项目结构如下
3.视图设计
3.1导航栏设计
3.2页面设计
4.逻辑设计
给Button绑定方法并使用该方法修改html文件中命名为src和name的资源
<button open-type='getUserInfo' bindtap='getUserProfile'>点击获取头像和昵称</button>
<image src='{{src}}' mode='widthFix'></image>
<text>{{name}}</text>
getUserProfile(e) {
// 推荐使用wx.getUserProfile获取用户信息,开发者每次通过该接口获取用户个人信息均需用户确认,开发者妥善保管用户快速填写的头像昵称,避免重复弹窗
wx.getUserProfile({
desc: '展示用户信息', // 声明获取用户个人信息后的用途,后续会展示在弹窗中,请谨慎填写
success: (res) => {
console.log(res)
this.setData({
name: res.userInfo.nickName,
hasUserInfo: true,
src:res.userInfo.avatarUrl,
})
}
})
}
在控制台收到用户信息
修改成功
三、程序运行结果
四、问题总结与体会
实验中遇到了不理解项目文件之间联系的问题,通过类比之前学过的安卓开发的xml和activity文件了解了page的生命周期和前端界面wxml和app:json配置文件等信息,通过锻炼使得我进一步了解了html,css,js文件之间的关系和操作