微信小程序的經常使用受權-記錄系列（1）

一、微信受權頭像暱稱等

先上代碼，新版本getUserProfile：vue

wxml
<button wx:if="{{canIUseGetUserProfile}}" class="authBtn" bindtap="getUserProfile">當即受權</button>
js:
data: {    
    userInfo: {},   
    hasUserInfo: false,    
    canIUseGetUserProfile: false,
},
onLoad() {    
    //用來判斷是否兼容新舊版本    
    let that = this;    
    if (app.globalData.userInfo) {      
        this.setData({        
            userInfo: app.globalData.userInfo,        
            hasUserInfo: true      
        })    
    }else if (wx.getUserProfile) {       
        this.setData({        
            canIUseGetUserProfile: true      
        })    
    } else {      
        // 在沒有 open-type=getUserInfo 版本的兼容處理      
        wx.getUserInfo({        
            success: res => {          
                app.globalData.userInfo = res.userInfo;       
                this.setData({            
                    userInfo: res.userInfo,            
                    hasUserInfo: true          
                })        
            }     
        })    
    }
  },
  getUserProfile(e) {    
        let code = "";    
        let that = this;
    //先獲取code和後臺進行交換，由於會異步因此用了setTimeout    
        wx.login({      
            success(res) {        
                code = res.code;      
            }    
        });    
        setTimeout(() => {      
            wx.getUserProfile({        
                desc: '用於完善會員資料', // 聲明獲取用戶我的信息後的用途，後續會展現在彈窗中，請謹慎填寫        
                success: (res1) => {
                  //拿到用戶頭像暱稱等信息          
                    that.setData({            
                        userInfo: res1.userInfo,            
                        hasUserInfo: true,          
                    })
                  //調接口存到數據庫，並彈出獲取手機號的彈框          
                    wx.request({            
                        url: 'https:njlingshi.com/api/weChatAuth?code='+code,            
                        method: "POST",            
                        success(res2) {              
                            that.setData({                
                                showPhoneModal: true,//展現獲取手機號的彈框                
                                codeKey: res2.data.data.codeKey,//存儲key和用戶加密信息後面用到                
                                userInfoEncrypt: {                  
                                    "encryptedData": res1.encryptedData,                  
                                    "iv": res1.iv                
                                }              
                            })            
                        }          
                     })        
                   }      
                })    
           })  
    },
複製代碼

舊版本getUserInfo:ios

wxml
<button wx:else class="authBtn" open-type="getUserInfo" bindgetuserinfo="getUserInfo">當即受權</button>
js:
//data部分和上面同樣
getUserInfo(e) {    
    //在這裏就能夠拿到用戶加密信息encryptedData和iv等
    // 不推薦使用getUserInfo獲取用戶信息，預計自2021年4月13日起，getUserInfo將再也不彈出彈窗，並直接返回匿名的用戶我的信息    
    this.setData({      
        userInfo: e.detail.userInfo,      
        hasUserInfo: true    
    })    
    wx.login({      
        success(res) {        
            if (res.code) {          
                wx.request({            
                    url: 'https:njlingshi.com/api/weChatAuth?code='+code,            
                    method: "POST",            
                    success(res) {              
                        that.setData({                
                            showPhoneModal: true,//展現獲取手機號的彈框                
                            "codeKey": res.data.data.codeKey,                
                            "userInfoEncrypt": {
                                //存儲key和用戶加密信息後面用到                  
                                "encryptedData": e.detail.encryptedData,                  
                                "iv": e.detail.iv                
                             }              
                        })            
                      }          
                   })        
                }      
          }    
      });  
},
複製代碼

區別：

一、getUserProfile頁面產生點擊事件後纔可調用，每次請求都會彈出受權窗口，須要在wx.getUserProfile({})方法執行後拿到用戶信息git

getUserInfo在按鈕點擊的時候就能夠拿到信息，目前不推薦使用了。數據庫

二、記住這時候接口若是提示解密失敗、微信解密驗籤失敗是後端的鍋不要背，硬氣點！json

三、tips:小程序在最後審覈上線的時候會卡登陸，若是你進頁面必需要受權登陸才行可能會不經過，這個要先溝通好，首頁等接口不須要token也能夠訪問。axios

二、受權獲取手機號碼

wxml:
<button class="authBtn" open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber">獲取手機號碼</button>

js:getPhoneNumber(e) {    
    let that = this;    
    if (!e.detail.iv) {//判斷是否容許受權，拿到加密信息，展現受權彈框      
        this.setData({        
            showPhoneModal: false      
        })      
        return;    
    }    
    wx.request({        
        url: 'https:njlingshi.com/api/miniProgramLogin',      
        method: "POST",      
        data: {//傳入接口須要用到的各類參數          
            "codeKey": that.data.codeKey,          
            "userInfoEncrypt": that.data.userInfoEncrypt,          
            "userPhoneEncrypt": {            
                encryptedData: e.detail.encryptedData,            
                iv: e.detail.iv          
            }      
        },      
        success(res) {        
            if(res.statusCode == 200) {          
                app.globalData.token = res.data.data.token;//存入token和用戶信息在全局變量中 
                app.globalData.userInfo = res.data.data;          
                that.setData({showPhoneModal: false})          
                wx.setStorage({            
                    key: "token",            
                    data: res.data.data.token          
                })          
                wx.setStorage({            
                    key: "userinfo",            
                    data: res.data.data          
                })          
                wx.showLoading({title: '加載中'});          
                setTimeout(()=>{wx.hideLoading();},1500)          
                //能夠在這裏調用界面須要token的接口        
            }else {          
                wx.showToast({            
                    icon:'error',            
                    title: res.data.message,          
                })        
            }      
        }    
    })  
},
複製代碼

三、受權獲取地址位置

app.json中加入  
"permission": {    
        "scope.userLocation": {      
        "desc": "你的位置信息將用於小程序位置效果展現"    
}},

app.js
onShow() {
   //獲取用戶當前位置    
    wx.getLocation({      
        type: 'gcj02',      
        success (res) {//記錄經緯度方便後面其餘界面用到        
            that.globalData.userLat = res.latitude;        
            that.globalData.userLong = res.longitude;      
        }    
    })
},
globalData: {    
    userLat: '',//用戶所在經緯度    
    userLong: '',
}
複製代碼

算出用戶當前位置與目的位置的距離

app.js中寫公共方法

// 計算距離函數  
Rad(d) {    //根據經緯度判斷距離    
    return d * Math.PI / 180.0;  
},  
getDistance(lat1, lng1, lat2, lng2) {    
    // lat1用戶的緯度    // lng1用戶的經度    // lat2商家的緯度    // lng2商家的經度    
    var radLat1 = this.Rad(lat1);    
    var radLat2 = this.Rad(lat2);    
    var a = radLat1 - radLat2;    
    var b = this.Rad(lng1) - this.Rad(lng2);    
    var s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) + Math.cos(radLat1) * Math.cos(radLat2) * Math.pow(Math.sin(b / 2), 2)));   
    s = s * 6378.137;    
    s = Math.round(s * 10000) / 10000;    
    s = s.toFixed(1) + 'km' //保留兩位小數    
    return s  
},
js中使用示例：
app.getDistance(app.globalData.userLat,app.globalData.userLong,"31.929074190568766","118.8757504898559");
複製代碼

四、封裝請求接口

我的認爲這樣操做，在必定程度上作到了請求攔截，至關於vue的axios的請求攔截小程序

app.js

wxRequest(method, url, data, callback, errFun) {    
    let baseUrl = 'https://njlingshi.com';//這裏千萬不要寫不少前綴否則後面接口不同很麻煩   
    wx.request({      
      url: baseUrl+url,      
      method: method,      
      data: data,      
      header: {        
          'content-type': method == 'GET' || method == 'POST'?'application/json':'application/x-www-form-urlencoded',        
          'Accept': 'application/json',        
          'Authorization': this.globalData.token      
      },      
      dataType: 'json',      
      success: function (res) {        
             if(res.statusCode == 200) {          
                  callback(res.data);        
             }else if(
                  res.statusCode == 401){//這裏根據狀況改401狀態碼，我這裏代碼登陸失效 
                      wx.showToast({            
                         icon: "none",            
                         title: '請登陸!',          
                      })          
                     wx.removeStorageSync('token');        
              }else {//剩餘狀況就是接口報錯須要提醒了          
                      wx.showToast({            
                          icon: "none",            
                          title: res.data.errMsg ? res.data.errMsg : res.data.message,    
                      })        
               }      
       },      
      fail: function (err) {        
             console.log(err)        
             errFun(err);      
      }    
  })  
},
js調用：
    let that = this;    
    app.wxRequest('GET', '/api/getHotList',{}, (res) => {        
         this.setData({          
             hotList: res.data && res.data.length > 0 ? res.data : []        
         })    
    }, (err) => {        
         console.log(err)    
    })
複製代碼

五、一些簡單的小坑避免指南

一、wx.showToast文字展現不全，吧icon去掉，就能夠展現最多兩行字了，若是仍是不夠展現，本身能夠寫個組件用後端
二、wxml須要對數組用到indexOfapi
一、定義一個common.wxs在utils中數組

function indexOf(arr, value) {    
       if (arr.indexOf(value) < 0) {        
            return false;    
       } else {        
            return true;    
       }
  }
  module.exports.indexOf = indexOf;
複製代碼

wxml:
{{item}} {{item}} {{item}} //這樣就能夠在頁面中使用indexOf啦，否則界面不支持，嗚嗚嗚，太難了，才發現的坑
公共樣式能夠寫在app.wxss中，減小重複樣式；公共的js能夠放在app.js中

先寫這麼多，後期再更新，以爲有用的朋友點個贊呀~