获取用户信息
getUserInfo(e){
if(e.detail.rawData){
console.log("授权成功")
return {
getUserInfo:true ,
Info:JSON.parse(e.detail.rawData)
}
}else{
console.log("拒绝授权或授权失败")
return {
getUserInfo:false
}
}
}
获取用户手机号
// 调用授权手机号前,先调用wx.login(),以免session_key与服务器的session_key不匹配
getPhoneNumber(e){
if(e.detail.encryptedData){
console.log("获取加密参数成功")
return {
getPhoneNumber:true,
info:{
encryptedData:e.detail.encryptedData,
iv:e.detail.iv,
errMsg:e.detail.errMsg
}
}
}else{
console.log("获取加密参数失败")
return {
getPhoneNumber:false,
info:{
errMsg:e.detail.errMsg
}
}
}
},
获取地理位置
wx.getLocation({
type: "wgs84",
success(res) {
console.log(res);
const latitude = res.latitude;
const longitude = res.longitude;
const speed = res.speed;
const accuracy = res.accuracy;
},
});
注意:使用当前api需要在app.json声明permission字段
{
"pages": ["pages/index/index"],
"permission": {
"scope.userLocation": {
"desc": "你的位置信息将用于***"
}
}
}
检测版本自动更新
// 小程序更新版本代码
const updateManager = wx.getUpdateManager();
updateManager.onCheckForUpdate(function (res) {
// 请求完新版本信息的回调
console.log("请求完新版本信息的回调",res.hasUpdate);
});
updateManager.onUpdateReady(function () {
wx.showModal({
title: "更新提示",
content: "新版本已经准备好,是否重启应用?",
success: function (res) {
if (res.confirm) {
// 新的版本已经下载好,调用 applyUpdate 应用新版本并重启
updateManager.applyUpdate();
}
},
});
});
updateManager.onUpdateFailed(function () {
// 新的版本下载失败
wx.showModal({
title: "更新提示",
content: "新版本下载失败",
showCancel: false,
});
});
获取节点
const query = wx.createSelectorQuery()
query.select('#the-id').boundingClientRect(function(res){
res.top // #the-id 节点的上边界坐标(相对于显示区域)
})
query.selectViewport().scrollOffset(function(res){
res.scrollTop // 显示区域的竖直滚动位置
})
query.exec()
//在自定义组件或包含自定义组件的页面中,推荐使用 this.createSelectorQuery 来代替 wx.createSelectorQuery ,这样可以确保在正确的范围内选择节点。
WXML节点布局相交状态
节点布局相交状态 API 可用于监听两个或多个组件节点在布局位置上的相交状态。这一组API常常可以用于推断某些节点是否可以被用户看见、有多大比例可以被用户看见。
这一组API涉及的主要概念如下。
-
参照节点:监听的参照节点,取它的布局区域作为参照区域。如果有多个参照节点,则会取它们布局区域的 交集作为参照区域。页面显示区域也可作为参照区域之一。
-
目标节点:监听的目标,默认只能是一个节点(使用 selectAll
选项时,可以同时监听多个节点)。 -
相交区域:目标节点的布局区域与参照区域的相交区域。 相交比例:相交区域占参照区域的比例。
-
阈值:相交比例如果达到阈值,则会触发监听器的回调函数。阈值可以有多个。
//以下示例代码可以在目标节点(用选择器 .target-class 指定)与参照节点(用选择器 .relative-class 指定)在页面显示区域内相交或相离,且相交或相离程度达到目标节点布局区域的20%和50%时,触发回调函数。
wx.createIntersectionObserver(this, {
thresholds: [0.2, 0.5]
}).relativeTo('.relative-class').relativeToViewport().observe('.target-class', (res) => {
res.intersectionRatio // 相交区域占目标节点的布局区域的比例
res.intersectionRect // 相交区域
res.intersectionRect.left // 相交区域的左边界坐标
res.intersectionRect.top // 相交区域的上边界坐标
res.intersectionRect.width // 相交区域的宽度
res.intersectionRect.height // 相交区域的高度
})
}
//注意:与页面显示区域的相交区域并不准确代表用户可见的区域,因为参与计算的区域是“布局区域”,布局区域可能会在绘制时被其他节点裁剪隐藏(如遇祖先节点中 overflow 样式为 hidden 的节点)或遮盖(如遇 fixed 定位的节点)。
初始渲染缓存工作原理
小程序页面的初始化分为两个部分。
1. 逻辑层初始化:载入必需的小程序代码、初始化页面 this 对象(也包括它涉及到的所有自定义组件的 this
对象)、将相关数据发送给视图层。
2. 视图层初始化:载入必需的小程序代码,然后等待逻辑层初始化完毕并接收逻辑层发送的数据,最后渲染页面。
在启动页面时,尤其是小程序冷启动、进入第一个页面时,逻辑层初始化的时间较长。在页面初始化过程中,用户将看到小程序的标准载入画面(冷启动时)或可能看到轻微的白屏现象(页面跳转过程中)。
启用初始渲染缓存,可以使视图层不需要等待逻辑层初始化完毕,而直接提前将页面初始 data 的渲染结果展示给用户,这可以使得页面对用户可见的时间大大提前。它的工作原理如下:
在小程序页面第一次被打开后,将页面初始数据渲染结果记录下来,写入一个持久化的缓存区域(缓存可长时间保留,但可能因为小程序更新、基础库更新、储存空间回收等原因被清除);
1. 在这个页面被第二次打开时,检查缓存中是否还存有这个页面上一次初始数据的渲染结果,如果有,就直接将渲染结果展示出来;
2. 如果展示了缓存中的渲染结果,这个页面暂时还不能响应用户事件,等到逻辑层初始化完毕后才能响应用户事件。
页面交互
小程序在B页面调用A页面的方法可以使用eventChannel
代码示例:
index.vue (A页面)
uni.navigateTo({
url: '/pages/detail/detail',
events: {
// 为指定事件添加一个监听器,获取被打开页面传送到当前页面的数据
// 被打开页面进行回调
acceptDataFromOpenedPage: function(data) {
console.log(data)
},
someEvent: function(data) {
console.log(data)
}
},
success: function(res) {
// 通过eventChannel向被打开页面传送数据
res.eventChannel.emit('acceptData', { data: 'test' })
}
})
detail.vue(B页面)
onLoad() {
//获取事件对象
const eventChannel = this.getOpenerEventChannel()
//通知上一页,传回参数,响应函数
//改变上一页监听的数据时调用
eventChannel.emit('acceptDataFromOpenedPage', {
data: 'test'
});
eventChannel.emit('someEvent', {
data: 'test'
});
// 监听acceptData事件,获取上一页面通过eventChannel传送到当前页面的数据
eventChannel.on('acceptData', function(data) {
console.log(data)
})
},
页面返回询问对话框
wx.enableAlertBeforeUnload
获取菜单按钮(右上角胶囊按钮)的布局位置信息
wx.getMenuButtonBoundingClientRect
中断请求
中断接口请求(requestTask.abort)
一个可以监听下载进度变化事件,以及取消下载任务的对象(DownloadTask)
一个可以监听上传进度变化事件,以及取消上传任务的对象(UploadTask)
文件压缩
图片压缩(wx.compressImage) 视频压缩(wx.compressVideo)
聊天场景打开小程序区分聊天类型
(基础库:2.18.0)更新 APIgetLaunchOptionsSync & getEnterOptionsSync 新增 chatType
长期订阅消息语音提醒
(基础库:2.18.0)更新订阅消息 API 支持订阅消息语音提醒(当前只支持银行类目的长期订阅消息)
wx.showModal输入框
(基础库:2.17.3)更新 API showModal 支持带输入框