Mini Program obtient le processus d'autorisation de localisation de l'utilisateur
Préface
Dans le processus de développement de petits programmes, l'autorisation de l'utilisateur est requise dans de nombreux endroits, et il est nécessaire de demander si l'utilisateur est autorisé, et il n'y a pas d'autorisation pour guider l'utilisateur à autoriser. J'ai donc résumé ce processus pour que vous puissiez vous y référer et faire plus de commentaires et progresser ensemble.
organigramme
Parfois, la logique consistant à déterminer si l'utilisateur est autorisé est utilisée dans de nombreuses parties du projet, l'encapsulation est donc très nécessaire. Prenons l'autorisation de localisation comme exemple pour parler du processus général
De nombreuses applications permettront à l'utilisateur d'autoriser la localisation géographique dès son entrée, et la latitude et la longitude de l'utilisateur pourront être obtenues par calcul pour obtenir la distance de l'utilisateur. Voici un organigramme simple
Le développement doit d'abord wx.getSettiing()obtenir les paramètres actuels de l'utilisateur et les documents officiels. Si vous avez l'autorisation de passer à l'étape suivante, si vous ne demandez pas à l'utilisateur de rouvrir l'autorisation, si vous cliquez sur l'utilisateur et cliquez sur Non, l'autorisation échoue. Si l'utilisateur accepte, appelez wx.openSetting()l'interface de configuration de l'applet client, retournez le résultat de l'opération défini par l'utilisateur et le document officiel. Après avoir ouvert la page des paramètres, si l'utilisateur revient sans ouvrir l'autorisation, vous obtiendrez le résultat d'un échec d'autorisation. Si vous ouvrez l'autorisation et revenez à la page précédente, l'autorisation est réussie
Ici, il faut faire attention au fait que pour obtenir une autorisation géographique, app.jsonajoutez le code suivant
"permission": {
"scope.userLocation": {
"desc": "您的位置信息将用于展示您所在城市的信息"
}
}
Code principal
Créez un nouveau auth.js dans le dossier utils pour l'opération d'autorisation, puis vous pouvez directement le tirer en 2 lignes dans le code!
/**
* 微信授权
*/
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 page js introduit auth.js et appelle la méthode getWxSetting pour passer le nom d'attribut correspondant à l'authList défini dans 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 () {
},
})
Ensuite, vous pouvez effectuer des opérations autorisées. Le wx.getLocation ici peut également extraire des fichiers publics, je ne les répéterai donc pas ici.
Adresse source:
https://github.com/sunniejs/weapp-auth-demo