first

2022年夏季《移动软件开发》实验报告

姓名：张俊博 学号：20020007100

姓名和学号？	张俊博，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、学习不使用模板手动创建小程序的方法。

二、实验步骤

列出实验的关键步骤、代码解析、截图。

1.快速启动模板创建小程序

①.创建项目（创建一个新文件夹，查询开发者个人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代码：

Hello World 点击获取头像和昵称

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)]

修改WXML页面的组件如下：

<image src='/images/ 2022-05-08 162334.png’mode=‘widthFix’>

在WXSS页面追加和 组件的代码如下：

image{
width: 250rpx;
border-radius: 50%;
}
text{
font-size: 50rpx;
}

效果如图：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CmjZqjbO-1661300599635)(C:\Users\dell\Desktop\屏幕截图 2022-08-17 111354.png)]

④.逻辑实现

(1).获取微信用户信息

在WXML页面修改组件的代码.

<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).使用动态数据显示头像和昵称

在WXML页面修改和 组件：

<image src='{{src}}'mode='widthFix'></image>
<text>{{name}}</text>

修改JS文件

data: {
src:‘/image/2020126.png’,
name:‘Zhang Junbo’
},

(3).更新头像和昵称

修改JS文件中getMyInfo函数的代码：

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文件：

{{name}}

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文件夹中去。

收获与体会：在学习的过程中不要只是依葫芦画瓢，更要自己多多尝试了解其中的步骤到底有什么作用，要想写好一个微信小程序也不是一件容易的事，少年仍需多多努力！