2022年夏季《移动软件开发》实验报告
姓名:冯欣怡 学号:22020006029
姓名和学号? | 冯欣怡,22020006029 |
---|---|
本实验属于哪门课程? | 中国海洋大学22夏《移动软件开发》 |
实验名称? | 实验1:第一个微信小程序 |
博客地址? | XXXXXXX |
Github仓库地址? | XXXXXXX |
(备注:将实验报告发布在博客、代码公开至 github 是 加分项,不是必须做的)
一、实验目标
1、学习使用快速启动模板创建小程序的方法;2、学习不使用模板手动创建小程序的方法。
二、实验步骤
(一)注册微信小程序
1. 访问微信公众平台官网首页(mp.weixin.qq.com),进行注册
填写邮箱和密码,注意每个邮箱只能申请一个公众号。
2. 注册成功后填写小程序信息+类
填写小程序的基础信息,我们的小程序便有打好了地基~,后续继填写解锁其他权限!
(二)下载微信开发工具并建立空项目
1. 下载微信开发者工具
在官方网站developers.weixin.qq.com/miniprogram/dev/devtools/download.html中下载适合自己的版本,
下载完成后打开微信开发工具
默认是游客模式,我们用刚刚认证小程序的微信号扫码登录。
2. 建立空项目
点击+号创建空项目
选择项目目录,在目录后面输入想命的名,上方项目名称自动更新
下拉AppID可以看到刚刚申请的小程序对应的ID号码,选择此码
选择不使用云服务
选择不使用模板,点击创建
打开后发现带有模板
删除components的所有内容,删除pages中index.wxml,index.wxs,index.json的代码,,删除index.js的代码,输入page点击第二个function补全函数。
清空app.js ,app.wxss;在app.js中输入app找第一个app function补全函数
然后编译,发现左侧的预览界面全空
即创建了一个空项目
(三)完成index的代码
1. 思路
我们需要实现:通过按一个按键,获得微信头像和微信昵称。
操作前:界面是默认头像和默认昵称+一个按键“点击获取头像和昵称”
操作后:微信头像、微信昵称+一个按键“点击获取头像和昵称”
获取用户头像和昵称操作需要用到的官方函数是getUserProfile或getUserInfo
2. 完成操作前页面
(1)上传默认的头像
新建一个photo文件夹,上传默认的图片
(2) 编写index.wxml
<view>
<block>
<image src="/photo/1.jpg"></image>
<text>微信昵称</text>
<button> 获取头像昵称 </button>
</block>
</view>
呈现了一个非常乱的样子
在index.wxss中写页面的布置、滑动页面、container类、图片类和文本类,设置格式
/**index.wxss**/
page {
height: 100vh;
display: flex;
flex-direction: column;
}
.container {
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
padding: 200rpx 0;
box-sizing: border-box;
}
.scrollarea {
flex: 1;
overflow-y: hidden;
}
.avatar{
height: 200px;
width: 200px;
border-radius: 100px;
}
.te{
padding: 10%;
}
3. 完成操作函数
点击button触发获取头像操作,使用bindtap,绑定函数
<button wx:if="{{canIUseGetUserProfile}}" bindtap="getUserProfile"> 获取头像昵称 </button>
设置data :hasUserInfo-false,canIUseGetUserProfile-false,
写onLoad函数,调用wx.getUserProfile函数,弹出一个弹窗,提醒用户是否同意共享自己的头像和昵称,如果用户选择确定,则canIUseGetUserProfile: true。
canIUseGetUserProfile= true才可以调用getUserProfile函数获取用户信息,这一逻辑在wxml中实现。
getUserProfile函数调用wx.getUserProfile,获得userInfo: res.userInfo, hasUserInfo:设为true
hasUserInfo用于控制在前端显示的头像是默认还是真实的,如果hasUserInfo=false,则显示默认,hasUserInfo=true显示获取到的userInfo
在index.js中写函数:
// index.js
Page({
data: {
userInfo: {},
hasUserInfo: false,
canIUseGetUserProfile: false,
},
onLoad() {
if (wx.getUserProfile) {
this.setData({
canIUseGetUserProfile: true
})
}
},
getUserProfile(e) {
// 推荐使用wx.getUserProfile获取用户信息,开发者每次通过该接口获取用户个人信息均需用户确认
wx.getUserProfile({
desc: '用于完善会员资料', // 声明获取用户个人信息后的用途,后续会展示在弹窗中,请谨慎填写
success: (res) => {
this.setData({
userInfo: res.userInfo,
hasUserInfo: true
})
}
})
},
})
3. 完成获取信息操作后的页面
头像和昵称所在的位置在点击前是默认,点击后是获得的信息,这里设置if else
<block wx:if="{{!hasUserInfo}}">
<image src="/photo/1.jpg" class="avatar"></image>
<text class="te">微信昵称</text>
<button wx:if="{{canIUseGetUserProfile}}" bindtap="getUserProfile"> 获取头像昵称 </button>
</block>
<block wx:else>
<image src="{{userInfo.avatarUrl}}" class="avatar"></image>
<text class="te">{{userInfo.nickName}}</text>
<button wx:if="{{canIUseGetUserProfile}}" bindtap="getUserProfile"> 获取头像昵称 </button>
</block>
如果hasUserInfo=1,显示第一个block
如果hasUserInfo=0,显示第二个block
三、程序运行结果
四、问题总结与体会
wx.getuserfrofile经历改版现在无法弹出询问窗口,修改基础库版本来解决问题
本地设置->调试基础库 最低版本