2022年夏季《移动软件开发》实验报告
姓名和学号? | 张俊博,20020007100 |
---|---|
本实验属于哪门课程? | 中国海洋大学22夏《移动软件开发》 |
实验名称? | 实验1:第一个微信小程序 |
博客地址? | (https://blog.csdn.net/Texas_old_ox?type=download) |
Github仓库地址? | small-routine/report_template.pdf at main · CBCYDDSWSW/small-routine (github.com) |
一、实验目标
1、学习使用快速启动模板创建小程序的方法;2、学习不使用模板手动创建小程序的方法。
二、实验步骤
列出实验的关键步骤、代码解析、截图。
①.创建项目(创建一个新文件夹,查询开发者个人AppID,选择JavaScript模板)
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QBNihRoN-1661300599631)(C:\Users\dell\Desktop\屏幕截图 2022-08-17 101120.png)]
②.真机预览(进入项目后,点击真机调试,弹出二维码,开发者手机扫描后即可在手机上预览、调试)
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gyajGB4Z-1661300599634)(C:\Users\dell\Desktop\屏幕截图 2022-08-17 101637.png)]
2.不使用模板手动创建小程序
①.创建项目(与上面类似,选择JavaScript语言,仍会自动生成模板代码,接下来手动进行修改)
②.页面配置
(1).创建页面文件:保留index,将app.json文件内"pages/logs/logs"删除。
(2).保存修改
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VPcL9ESu-1661300599634)(C:\Users\dell\Desktop\屏幕截图 2022-08-17 102431.png)]
(3).删除和修改文件:删除utils文件夹、删除pages文件夹下的logs目录及其内部内容、删除index.wxml和index.wxss中的全部代码、删除index.js中的全部代码,并输入"page"关键词自动补全函数、删除app.js中的全部代码,并输入"app"补全函数。
③.视图设计
(1).导航栏设计
代码如下:
{
“pages”:[
“pages/index/index”
],
“window”:{
“navigationBarBackgroundColor”: “#2CC2C3”,
“navigationBarTitleText”: “第一个小程序”
}
}
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dJ14cQuf-1661300599635)(C:\Users\dell\Desktop\屏幕截图 2022-08-17 104549.png)]
(2).页面设计
WXML代码:
WXSS代码:
.container{
height: 100vh; /视窗/
display:flex; /布局模式/
flex-direction: column; /垂直布局/
align-items: center; /水平方向居中/
justify-content: space-around; /垂直方向分散布局/
}
效果如图:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0BHesgaX-1661300599635)(C:\Users\dell\Desktop\屏幕截图 2022-08-17 105902.png)]
<image src='/images/ 2022-05-08 162334.png’mode=‘widthFix’>
image{
width: 250rpx;
border-radius: 50%;
}
text{
font-size: 50rpx;
}
效果如图:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CmjZqjbO-1661300599635)(C:\Users\dell\Desktop\屏幕截图 2022-08-17 111354.png)]
④.逻辑实现
<button open-type="getUserInfo"bindgetuserinfo = 'getMyInfo'>
点击获取头像和昵称
</button>
在JS的Page( )内部追加getMyInfo函数:
getMyInfo: function(e){
console.log(e.detail.userInfo)
},
效果如图:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tOKwV5Jp-1661300599636)(C:\Users\dell\Desktop\屏幕截图 2022-08-17 112620.png)]
(2).使用动态数据显示头像和昵称
<image src='{{src}}'mode='widthFix'></image>
<text>{{name}}</text>
data: {
src:‘/image/2020126.png’,
name:‘Zhang Junbo’
},
(3).更新头像和昵称
getMyInfo: function(e){
let info = e.detail.userInfo;
this.setData({
src: info.avatarUrl,
name: info.nickName
})
}
⑤.完整代码展示:
app.json文件:
{
“pages”:[
“pages/index/index”
],
“window”:{
“navigationBarBackgroundColor”: “#2CC2C3”,
“navigationBarTitleText”: “第一个小程序”,
“navigationBarTextStyle”: “white”
}
}
WXML文件:
WXSS文件:
.container{
height: 90vh; /视窗/
display:flex; /布局模式/
flex-direction: column; /垂直布局/
align-items: center; /水平方向居中/
justify-content: space-around; /垂直方向分散布局/
}
image{
width: 400rpx;
height: 400rpx;
border-radius: 50%;
}
text{
font-size: 50rpx;
}
JS文件:
const app = getApp()
Page({
data: {
src : ‘…/…/images/logo.png’,
name : ‘Hello world’
},
onLoad() {
if (wx.getUserProfile) {
this.setData({
canIUseGetUserProfile: true
})
}
},
getMyInfo: function(e) {
wx.getUserProfile({
desc: ‘展示用户信息’,
success: (res) => {
console.log(res)
this.setData({
src: res.userInfo.avatarUrl,
name: res.userInfo.nickName
})
}
})
},
})
三、程序运行结果
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-F570ZEdI-1661300599636)(C:\Users\dell\Desktop\屏幕截图 2022-08-17 131931.png)]
四、问题总结与体会
问题:在保存图片至image文件夹时未保存其地址,解决方式:将图片复制到小程序项目中的image文件夹中去。
收获与体会:在学习的过程中不要只是依葫芦画瓢,更要自己多多尝试了解其中的步骤到底有什么作用,要想写好一个微信小程序也不是一件容易的事,少年仍需多多努力!
name: res.userInfo.nickName
})
}
})
},
})
三、程序运行结果
[外链图片转存中…(img-F570ZEdI-1661300599636)]
四、问题总结与体会
问题:在保存图片至image文件夹时未保存其地址,解决方式:将图片复制到小程序项目中的image文件夹中去。
收获与体会:在学习的过程中不要只是依葫芦画瓢,更要自己多多尝试了解其中的步骤到底有什么作用,要想写好一个微信小程序也不是一件容易的事,少年仍需多多努力!