El mini programa obtiene el proceso de autorización de ubicación del usuario
Prefacio
En el proceso de desarrollo de programas pequeños, la autorización del usuario se requiere en muchos lugares y es necesario consultar si el usuario está autorizado y no existe una autorización para guiar al usuario a autorizar. Así que resumí este proceso, para que puedan consultarlo y hacer más comentarios y progresar juntos.
diagrama de flujo
A veces, la lógica de determinar si el usuario está autorizado se utiliza en muchas partes del proyecto, por lo que la encapsulación es muy necesaria. Tomemos la autorización de ubicación como ejemplo para hablar sobre el proceso general
Muchas aplicaciones permitirán al usuario autorizar la ubicación geográfica tan pronto como ingrese, y la latitud y longitud del usuario se pueden obtener mediante cálculo para obtener la distancia del usuario. A continuación se muestra un diagrama de flujo simple
El desarrollo primero debe wx.getSettiing()obtener la configuración actual del usuario y los documentos oficiales. Si tiene permiso para continuar con el siguiente paso, si no solicita al usuario que vuelva a abrir el permiso, si hace clic en el usuario y hace clic en No, la autorización falla. Si el usuario está de acuerdo, llame a wx.openSetting()la interfaz de configuración del subprograma del cliente, devuelva el resultado de la operación establecido por el usuario y el documento oficial. Después de abrir la página de configuración, si el usuario regresa sin abrir la autorización, obtendrá el resultado del error de autorización. Si abre la autorización y regresa a la página anterior, la autorización es exitosa
Aquí, debemos prestar atención al hecho de que para obtener la autorización geográfica, app.jsonagregue el siguiente código
"permission": {
"scope.userLocation": {
"desc": "您的位置信息将用于展示您所在城市的信息"
}
}
Código principal
Cree un nuevo auth.js en la carpeta utils para la operación de autorización, ¡y luego puede extraerlo directamente en 2 líneas en el código!
/**
* 微信授权
*/
const authList = {
userInfo: {
apiName: ['getUserInfo'],
authTitle: '需要使用你的用户信息',
authContent: '需要使用你的用户信息，请确认授权'
},
userLocation: {
apiName: ['getLocation', 'chooseLocation'],
authTitle: '请求授权当前位置',
authContent: '需要获取您的地理位置，请确认授权'
},
address: {
apiName: ['chooseAddress'],
authTitle: '需要使用你的通讯地址',
authContent: '需要使用你的通讯地址，请确认授权'
},
invoiceTitle: {
apiName: ['chooseInvoiceTitle'],
authTitle: '需要使用你的发票抬头',
authContent: '需要使用你的发票抬头，请确认授权'
},
invoice: {
apiName: ['chooseInvoice'],
authTitle: '需要获取你的发票',
authContent: '需要获取你的发票，请确认授权'
},
werun: {
apiName: ['getWeRunData'],
authTitle: '需要获取你的微信运动数据',
authContent: '需要获取你的微信运动数据，请确认授权'
},
writePhotosAlbum: {
apiName: ['saveImageToPhotosAlbum', 'saveVideoToPhotosAlbum'],
authTitle: '请求授权相册',
authContent: '需要使用你的相册，请确认授权'
},
}
/**
* @description: 返回值中只会出现小程序已经向用户请求过的权限
* @param {String} 权限名称
* @return {Boolean} 是有拥有权限
*/
const getWxSetting = key => {
if (typeof key === 'string' && !authList[key]) return false
return new Promise(function (resolve) {
wx.getSetting({
success: async res => {
var result = res.authSetting
// 用户拒绝过
if (result[`scope.${
key}`] === false) {
// 引导去授权页
_showModal(key).then(() => {
resolve()
})
} else {
// 已授权，或者还未授权
resolve()
}
}
})
})
}
/**
* @description: 引导去授权设置页面
* @param {String} 权限名称
* @return {Boolean} 是有拥有权限
*/
const _showModal = key => {
console.log(authList[key].authContent)
return new Promise(function (resolve) {
wx.showModal({
title: authList[key].authTitle,
content: authList[key].authContent,
success: function (res) {
if (res.confirm) {
wx.openSetting({
success: async dataAu => {
// 异步，进入授权页面授权后返回判断
if (dataAu.authSetting[`scope.${
key}`] === true) {
wx.showToast({
title: '授权成功',
icon: 'success',
duration: 1000
})
resolve()
} else {
wx.showToast({
title: '授权失败',
icon: 'none',
duration: 1000
})
}
}
})
// 用户点击取消
} else if (res.cancel) {
wx.showToast({
title: '授权失败',
icon: 'none',
duration: 1000
})
}
}
})
})
}
module.exports = {
getWxSetting
}
La página js introduce auth.js y llama al método getWxSetting para pasar el nombre del atributo correspondiente a authList que se ha definido en auth.js
//index.js
//获取应用实例
const app = getApp()
const wxApi = require('../../utils/auth.js')
Page({
data: {
},
// 打开地图
openMap: function() {
wxApi.getWxSetting('userLocation').then(()=>{
// 已经授权或还未授权，下面的代码也可以根据需求提取到公共文件中
wx.getLocation({
type: 'wgs84',
success: res => {
wx.openLocation({
latitude: res.latitude,
longitude: res.longitude,
})
},
fail: err => {
wx.showToast({
title: '检查手机定位权限',
icon: 'none',
duration: 2000
})
}
})
})
},
// 保存到相册
writePhotosAlbum: function() {
wxApi.getWxSetting('writePhotosAlbum').then(()=>{
// 已经授权或还未授权，下面的代码也可以根据需求提取到公共文件中
wx.downloadFile({
url: 'https://imgs.solui.cn/avatar.png',
success: function(res) {
wx.saveImageToPhotosAlbum({
filePath: res.tempFilePath,
success: function(res) {
wx.showToast({
title: '保存成功',
icon:'none'
})
},
fail: function(err) {
wx.showToast({
title: '保存失败',
icon:'none'
})
}
})
}
})
})
},
onLoad: function () {
},
})
Entonces puedes realizar operaciones autorizadas. El wx.getLocation aquí también puede extraer archivos públicos, así que no los repetiré aquí.
Dirección de la fuente:
https://github.com/sunniejs/weapp-auth-demo