2024年夏季《移动软件开发》实验报告
实验名称 | 实验1:第一个微信小程序 |
---|---|
Gitee仓库地址 | numune/Mobile_Software (gitee.com) |
一、实验目标
1、学习使用快速启动模板创建小程序的方法;2、学习不使用模板手动创建小程序的方法。
二、实验步骤
列出实验的关键步骤、代码解析、截图。
1. 全局设计
app.json 文件
在pages文件夹下创建index页面
设置导航栏的背景颜色为#eeeeff,字体为黑色
{
"pages": [
"pages/index/index"
],
"window": {
"navigationBarTextStyle": "black",
"navigationBarBackgroundColor": "#eeeeff",
"navigationBarTitleText": "我的第一个小程序"
},
"style": "v2",
"sitemapLocation": "sitemap.json"
}
导航栏设计效果如下:
app.wxss文件
.container {
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
padding: 200rpx 0;
box-sizing: border-box;
}
2. 创建文件夹images
用于存放图像
3. index页面的设计与功能实现
组件设计
在index.wxml中使用三个组件:
- 组件:用于显示初始图片和头像,用变量userInfo.avatarUrl保存图像信息,便于替换
-
组件:用于显示昵称,用变量userInfo.nickName保存文字信息 - 组件:点击实现对应功能,用变量func显示按钮当前的功能
<view class="container">
<image bindtap="bindViewTap" src="{{userInfo.avatarUrl}}" mode="cover"></image>
<text>{{userInfo.nickName}}</text>
<view wx:if= '{{!hasUserInfo}}'>
<button bindtap="getUserProfile">{{func}} </button>
</view>
<view wx:else>
<button bindtap="logout">{{func}} </button>
</view>
</view>
这里的逻辑设计:
我们需要用hasUserInfo属性来判断是否已经获取了用户信息。如果没有,则点击button组件时调用getUserProfile方法来获取信息;如果有,则此时再点击button组件将调用logout方法来退出登陆
页面布局
在index.wxss中对页面布局进行设置
.container{
height:100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-around;
}
image{
width:400rpx;
border-radius: 50%;
}
text{
font-size:50rpx;
}
button{
font-size: medium;
background-color: #eeefff;
}
设计效果如下:
功能实现
在index.js文件中完成,在Page({})中补充代码
-
定义data对象
初始状态时用图像代替用户头像,
用文字代替用户昵称,
用hasUserInfo记录当前是没有获取用户信息的状态,
用func表示当前button组件的点击功能
data: { userInfo: {avatarUrl:'/images/2.jpg',nickName:"欢迎来到我的小程序🥰"}, hasUserInfo: false, func: "获取头像昵称" },
-
方法getUserProfile(e)用于实现获取用户信息的功能
- 调用微信小程序提供的API:wx.getUserProfile,弹出用户信息授权框,用户同意后执行回调函数,此时获得用户的头像和昵称,更新页面数据
- 调用API:wx.showToast,显示一个轻提示,告知用户正在登录
getUserProfile(e) { wx.getUserProfile({ desc: '授权', success: (res) => {//用户同意授权 this.setData({ userInfo: res.userInfo, func:"退出", hasUserInfo: true }) } }) wx.showToast({//显示一个轻提示,告知用户正在登录 icon:"loading", title: '正在登陆' }) },
获取用户信息时的效果如下:
-
方法logout用于实现退出登陆
- 调用API:wx.showToast,显示一个轻提示,告知用户已经退出登陆
- 更新页面数据为初始值
logout(e){ wx.showToast({ icon:"success", title: '已退出登录' }) this.setData({ userInfo: {avatarUrl:'/images/2.jpg',nickName:"欢迎来到我的小程序🥰"}, hasUserInfo: false, func: "获取头像昵称" }) },
三、程序运行结果
列出程序的最终运行结果及截图。
1.小程序初始页面
2.正在获取头像昵称时的页面
3.获取完头像昵称后的页面
4.退出登陆后的页面
四、问题总结与体会
描述实验过程中所遇到的问题,以及是如何解决的。有哪些收获和体会,对于课程的安排有哪些建议。
最大的困难是微信提供的接口不好用,部分功能的实现有版本限制,后面手动降低本地设置的版本,再使用微信官方文档中的wx.getUserProfile接口。然后就是参数非常多,在进行页面设计时往往一头雾水,不知道该怎么调整,但实验文档上介绍的非常详细,让我能够一步步完成。
收获和体会:教程非常详细,让我能够清楚了解每一个步骤的具体功能,学会了很多关于微信小程序开发的细节。还在本次实验过程中学会了如何使用gitee管理我的代码,非常开心。
建议:感觉课程挺好的。