2024年夏季《移动软件开发》实验报告
一、实验目标
1、学习使用快速启动模板创建小程序的方法;2、学习不使用模板手动创建小程序的方法。
二、实验步骤
列出实验的关键步骤、代码解析、截图。
1.自动生成小程序
1.1项目创建
双击微信开发者工具图标,使用管理员微信扫码二维码后进入菜单画面,选择菜单中的“小程序”选项进入小程序项目管理页面。依次填写项目名称(开发者自定义的名称,小程序用户用户不可见) 、目录(用于存放小程序项目)、AppID(管理员在微信公众平台上注册的小程序ID)。
效果如图
2.手动创建小程序
2.1项目创建
2.2页面配置
2.2.1创建页面文件
(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中的全部代码,并且输入关键词"app"找到第一个选项按回车键让其自动补全函数。
2.3视图设计
2.3.1导航栏设置
小程序默认导航栏是黑底白字的效果,可通过在app.json中对window属性进行重新配置来自定义导航栏效果。更改后的app.json文件代码及效果图如下所示:
2.3.2页面设计
页面设计包括3个内容:微信头像、微信昵称、和“点击获取头像和昵称”按钮。
相关WXML代码片段如下:
<view class='container'>
<image></image>
<text>Hello World</text>
<button>点击获取头像和昵称</button>
</view>
相关WXSS代码片段如下:
.container{
height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-around;
}
在wxss页面追加组件的相关代码如下:
image{
width: 300rpx;
border-radius: 50%;
}
text{
font-size: 50rpx;
}
2.4逻辑实现
2.4.1获取微信用户信息
在 WXML 页面修改< button >组件的代码,为其追加获取用户信息事件,代码片段如下
<button open-type='getUserInfo'bindgetuserinfo='getMyInfo'>
点击获取头像和昵称
</button>
在 JS页面的 Page( )内部追加 getMyInfo函数,代码片段如下:
getMyInfo:function(e){
console.log(e.detail.userInfo)
}
2.4.2使用动态数据显示头像和昵称
在 WXML 页面修改< image >和< text >组件的代码,将图片来源和文本内容使用双花括号({{}})做成动态数据,代码片段如下:
<image src='{{src}}'mode='widthFix'></image>
<text>{{name}}</text>
同时修改 JS 文件,在现有的 data 属性中追加这两个动态数据的值,使其仍然可以显示原先的内容。代码片段如下:
data: {
src:'/images/logo.png',
name:'Hello World'
},
2.4.3更新头像和昵称
更改 JS 文件中 getMyInfo 函数的代码.使获取到的信息更新到动态数据上。代码片段如下:
getMyInfo:function(e){
let info=e.detail.userInfo;
this.setData({
src:info.avatarUrl,
name:info.nickName
})
}
三、程序运行结果
列出程序的最终运行结果及截图。
四、问题总结与体会
描述实验过程中所遇到的问题,以及是如何解决的。有哪些收获和体会,对于课程的安排有哪些建议。
获取微信用户信息时出现了报错,通过询问同学和上网查找资料得以解决。之前从没接触过微信小程序的开发,通过第一次实验有了初步的了解。