A perfect description of mini program obtaining user location authorization-Mini Program Development-php.cn

Related learning recommendations:WeChat Mini Program Tutorial

Preface

Mini programs require user authorization in many places during the development process. It is necessary to check whether the user is authorized. If there is no authorization, the user will be guided to authorize. So I encapsulated this process so that little cuties can refer to it and make more comments to make progress together.

Flow chart

Sometimes the logic to determine whether the user is authorized is used in many places in the project, so encapsulation is very necessary. Let's take location authorization as an example to talk about the general process.

Many applications will ask users to authorize their geographical location as soon as they enter. They can get the user's longitude and latitude and calculate the distance to the user. Below is a simple flow chart.

A perfect description of mini program obtaining user location authorization

Development must first obtain the user's current settings and official documents throughwx.getSettiing(). If you have permission to proceed to the next step, if the user is not asked to open permission again, if the user clicks No, the authorization fails. If the user agrees, callwx.openSetting()to bring up the client applet setting interface and return the operation results set by the user, official documentation. After opening the settings page, if the user returns without turning on authorization, he or she will get the result of authorization failure. If authorization is turned on and you return to the previous page, the authorization is successful.

One thing to note here is to obtain geographical authorization by adding the following code to app.json.

"permission": { "scope.userLocation": { "desc": "您的位置信息将用于展示您所在城市的信息" } }复制代码

Copy after login

Main code

Create a new auth.js in the utils folder for authorization operations, and then you can do it directly in 2 lines of 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 }复制代码

Copy after login

The page js introduces auth.js and calls the getWxSetting method to pass in the attribute name corresponding to the authList defined in 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 () { }, })复制代码

Copy after login

Then you can perform post-authorization operations. The wx.getLocation here can also extract public files, so I won’t go into details here.

If you want to know more about programming learning, please pay attention to thephp trainingcolumn!

The above is the detailed content of A perfect description of mini program obtaining user location authorization. For more information, please follow other related articles on the PHP Chinese website!