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文件夹中去。
收获与体会：在学习的过程中不要只是依葫芦画瓢，更要自己多多尝试了解其中的步骤到底有什么作用，要想写好一个微信小程序也不是一件容易的事，少年仍需多多努力！
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
