【微信小程序开发】小程序更新、页面生命周期、用户信息获取应用实战
✨✨ 欢迎大家来到景天科技苑✨✨
🎈🎈 养成好习惯，先赞后看哦~🎈🎈
🏆 作者简介：景天科技苑
🏆《头衔》：大厂架构师，华为云开发者社区专家博主，阿里云开发者社区专家博主，CSDN全栈领域优质创作者，掘金优秀博主，51CTO博客专家等。
🏆《博客》：Python全栈，前后端开发，小程序开发，人工智能，js逆向，App逆向，网络系统安全，数据分析，Django，fastapi，flask等框架，linux，shell脚本等实操经验，网站搭建，数据库等分享。所属的专栏：微信小程序开发零基础教学，难点与应用实战总结
景天的主页：景天科技苑
文章目录
- 1.小程序更新-生命周期
- 1.1 小程序强制更新
- 1.2 整个应用生命周期 app.js
- 1.3 某个页面生命周期 页面.js
- 2.分享到朋友圈
- 3.转发功能
- 4.获取头像
- 5.获取昵称
- 6.获取手机号
- 6.1 手机号快速验证
- 6.2 手机号实时验证
- 6.3 代码演示
- 7.客服功能
1.小程序更新-生命周期
1.1 小程序强制更新
后续我们代码更新
如果我们在微信端使用过小程序–》微信会把小程序代码拉到微信本地
下次打开，会优先使用本地的代码
咱们代码更新了–》强制更新到我们最先的代码
此时，只需要在 app.js 加入如下代码–》整个小程序第一次打开
onLaunch(){
const update=wx.getUpdateManager()
update.onUpdateReady(function(){
wx.showModal({
title: '发现新版本',
content: '重启应用，更新版本新版本?',
success:(res)=>{
if(res.confirm){
update.applyUpdate()
}
}
})
})
}
怎么模拟出更新的效果呢？在开发者工具中 添加编译模式
将编译设置中 下次编译时模拟更新勾上，点击确定
然后就会看到小程序有弹窗，要求强制更新，是否重启应用。点确定 就会重启小程序，下载最新的版本
1.2 整个应用生命周期 app.js
我们在app.js里面将我们上面设置的强制更新删掉
输入App，点击这个带框的，就会自动生成各种生命周期函数
App({
/**
* 当小程序初始化完成时，会触发 onLaunch（全局只触发一次）
*/
onLaunch: function () {
console.log('小程序只要启动，就触发它')
},
/**
* 当小程序启动，或从后台进入前台显示，会触发 onShow
*/
onShow: function (options) {
console.log('小程序切回来了')
},
/**
* 当小程序从前台进入后台，会触发 onHide
*/
onHide: function () {
console.log('小程序切到后台了')
},
/**
* 当小程序发生脚本错误，或者 api 调用失败时，会触发 onError 并带上错误信息
*/
onError: function (msg) {
}
})
1.3 某个页面生命周期 页面.js
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
console.log('1 页面加载了')
// 向后端发送请求
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
console.log('3 初次渲染完成')
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
console.log('2 页面显示')
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
console.log('4 页面隐藏')
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
console.log('5 页面卸载')
},
2.分享到朋友圈
当我们点击小程序右上角三个点时，会弹出分享小程序等按钮
由于我们的小程序中未设置，所以图标是灰色的，没有分享功能
分享到朋友圈，需要在当前页面的js中加上一段代码如下：
// 允许发送到朋友圈，右上角 ... 分享到朋友圈
onShareTimeline(){
return {
title:"这是一个神奇的页面",
query:'name=justin&age=19',
imageUrl:'/images/b.jpg'
}
},
3.转发功能
1 方式一：通过右上方 …
2 方式二：通过按钮， 需要给button设置 open-type=“share”
<button open-type="share">转发</button>
3 js中编写
onShareAppMessage() {
return {
title:"是朋友就点一下",
path:"/pages/my/my", //当前转发的页面
imageUrl:'/images/b.jpg'
}
},
点击转发，会显示出我们设置的图片和主题
4.获取头像
#####wxml###
<button class="btn" open-type="chooseAvatar" bindchooseavatar="choosePhoto">
<image src="{{phono}}" class="photo"/>
</button>
点击图片的时候获取头像
####js###
Page({
data:{
phono:'/images/b.jpg'
},
choosePhoto(event){
console.log(event.detail.avatarUrl)
this.setData({
phono:event.detail.avatarUrl //将获取到的头像设置到按钮位置
})
}
})
###wxss###
.btn{
/* 透明的 */
background-color: transparent;
}
/* 去掉边框 */
.btn::after{
border: none;
}
.photo{
height: 250rpx;
width: 250rpx;
border-radius: 50%;
}
一点击按钮，就让你选择头像来源，可以是微信头像，可以拍照，可以从相册选
我们选择用微信头像，微信头像就被设置到按钮位置
如果想用这个图片，可以传到后端保存起来
5.获取昵称
###wxml###
<!-- type一定得是 nickname -->
<input type="nickname" placeholder="输入或获取昵称" model:value="{{username}}"/>
<button type="primary" plain bind:tap="showName">提交</button>
###js####
Page({
data:{
username:"",
},
showName(){
console.log(this.data.username)
}
})
###wxss##
input {
border: 1rpx solid pink;
border-radius: 10rpx;
padding: 10rpx;
margin: 10rpx;
}
如此，当我们点击输入或获取用户名时，就会弹出微信昵称
选择，就会填到输入框中
点击提交，根据js设置的绑定事件，就会在控制台打印出来
6.获取手机号
快速登录
- 前后端配合
- 前端配合获取手机号–》带着code到后端
- 后端：注册+登录接口
- 后端你通过code–》去微信开发平台–》获取真正手机号
- 检测你用户表，这个用户有没有注册过，如果注册过，直接签发token登录成功
- 检测你用户表，这个用户有没有注册过，如果没有注册，先注册，再签发token登录成功
前提
1 手机号接口，必须是非个人开发者，并且完成了认证的小程序 个人注册的小程序无法获取
2 两种验证方式需要付费使用，每个小程序账号有1000次体验额度
3 小程序端
https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/getPhoneNumber.html
6.1 手机号快速验证
如下图
6.2 手机号实时验证
给你手机发送验证码–》输入验证码后–》才能获取到手机号
6.3 代码演示
后端获取手机号的接口
POST https://api.weixin.qq.com/wxa/business/getuserphonenumber?access_token=ACCESS_TOKEN
###微信小程序端
###wxml###
<button type="warn" open-type="getPhoneNumber"
bindgetphonenumber="getPhoneNumber">快速手机号</button>
<button type="default" plain open-type="getRealtimePhoneNumber"
bindgetrealtimephonenumber="getRealPhoneNumber"
>实时手机号</button>
###js###
getPhoneNumber(event) {
console.log(event)
// 通过获取手机号返回的code--传递给后端--后端调用：POST https://api.weixin.qq.com/wxa/business/getuserphonenumber?access_token=ACCESS_TOKEN -->获取手机号--》后端签发token给前端
云调用
wx.request({
url: '我们后端地址',
method:'POST',
data:{
code:event.detail.code
},
success:(res)=>{
//在此返回登录信息，用户登录
}
})
},
getRealPhoneNumber(event) {
console.log(event)
}
需要真机调试，个人小程序会提示没有权限
如果是企业小程序，有权限的话，会获取服务端返回的一串code
当我们向微信后台发送请求的时候，请求参数里面携带上这个code。就会获取到手机号
官方给的获取手机号接口
7.客服功能
微信为小程序提供客服消息能力，以便小程序用户可以方便快捷地与小程序服务提供方进行沟通
https://developers.weixin.qq.com/miniprogram/introduction/custom.html
需要我们登录微信公众平台
点击客服，添加客服
输入微信id号，添加客服
点击确定，添加成功
在微信小程序界面，添加个按钮
<view>---------------------客服-------------------</view>
<button type="default" plain open-type="contact">联系客服</button>
需要真机调试，用手机点击联系客服按钮
然后在微信公众平台，登录查看客服消息
看到待接入 1人
接入，就可以看到用户消息
就可以与用户对话了
