2022年夏季《移动软件开发》实验报告
一、实验目标
1、学习使用快速启动模板创建小程序的方法;2、学习不使用模板手动创建小程序的方法。
二、实验步骤
1.快速启动模板创建小程序
只需要在微信开发者工具中选择创建小程序,填写项目名称,目录和AppID就可以新建一个小程序了
可以生成小程序的预览效果
2.手动创建小程序
开始依旧是和快速启动创建一样生成模板,然后我们只需要手动修改页面配置就可以了
(1)首先按照快速启动模板创建小程序的步骤,我们得到了一个小程序模板
(2)创建页面文件并删除和修改其他文件
将app. json文件内 pages属性中的“pages/logs/logs”删除,并删除上一行末尾的逗号。 按快捷键Ctrl+S保存当前修改。
删除 utils文件夹及其内部所有内容。 删除 pages文件夹下的 logs目录及其内部所有内容。 删除 index. wxml和 index. wxss中的全部代码。 删除 index. js中的全部代码,并且输入关键词“page”找到第二个选项按回车键让其自动补全函数
删除 app. wxss中的全部代码。 删除 app. js中的全部代码,并且输入关键词“app”找到第一个选项按回车键让其自动补全函数
(3)视图设计
在app.json中对window属性重新配置,自定义导航栏效果,在这里我将导航栏背景改为了粉色,字体为黑色,文字为“贩卖日落”
设计包含微信头像,微信昵称和“点击获取头像和昵称”按钮的页面,分别使用<image><text><button>组件
<image></image> <text>Hello World</text> <button>点击获取头像和昵称</button>
设置布局
.container{ height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:space-around; }
原始头像是放入images文件夹下的图片user.jpg,代码中的src属性用于指定图片来源,mode属性表示图片随着指定的宽度自动拉伸高度以显示原图的正确比例
设置组件样式
image{ width:300rpx; border-radius:50%; } text{ font-size:50rpx; }
原始界面效果图如下
(3)逻辑实现
给<button>组件加上获取用户信息的功能
将图片来源和文本内容使用双花括号做成动态数据
在data属性中追加这两个动态数据的值,使其仍然可以显示原来的内容
data: { src:'/images/user.jpg', name:'Hello World' },
使用getMyInfo函数使获取到的信息更新到动态数据上
getMyInfo:function(e){ wx.getUserProfile({ desc:'展示用户信息', success:(res)=>{ console.log(res) this.setData({ src:res.userInfo.avatarUrl, name:res.userInfo.nickName, }) } }) },
三、程序运行结果
四、问题总结与体会
老师给的参考资料比较详细,在实验过程中没有出现什么问题,只有在最后把获取到的信息更新到动态数据的过程中出现了一点小小的问题,通过使用了老师建议的wx.getUserProfile函数解决了问题,通过本次实验,对微信小程序的创建有了认识,学习到了很多