淺談微信小程式授權應用

微信小程式中關乎“授權”的，拋開各路“牛鬼蛇神”不談，大體上也就兩種：

1. 位置授權
2. 用戶資訊授權

切記的是：在微信一直打著的“用戶至上”的旗號下，幾乎一切用戶相關的應用都需要用戶手動授權！所以必須要有提示的，

位置授權

昨天完成了微信小程式專案的最后一點內容，里面我加了個“點擊自動定位”的功能，請求的是高德地圖的web API，但是需要傳經緯度，于是我一開始是這樣寫的：

wx.getLocation({
  type: 'gcj02',
  success: function(res) {
    var latitude = res.latitude
    var longitude = res.longitude
  }
})

相信很多初學者到此就OK了，但是一運行發現：誒怎么什么都沒有？

哦，忘了說了，微信小程式中的“自動”彈窗提示是需要在app.json中配置的！

"permission": {
  "scope.userLocation": {
    "desc": "請確認授權，您的授權資訊將只被用于小程式運行期間，且只在小程式內部"
  }
}

到這里，在你剛進入頁面（如果寫在onLoad或onShow中）或者點擊某按鈕觸發（寫在事件中）時就能看到一個極其類似小程式彈框API wx.showToast() 的提示框了，

你是否到這里就滿足了？

當我信心滿滿的提交代碼后卻換來了老大的“無能狂怒”：“為什么在用戶點擊‘取消’按鈕時沒有提示！”、“為什么不在用戶拒絕授權以后下一次想要觸發相應功能時給個提醒？”

emmmmmmm我也沒注意過這玩意啊…
情急之下，又找到了wx.getLocation()的檔案，發現里面有這么一個說明：

介面呼叫失敗？
肯定是分為好多種情況的，但是毫無疑問的是：如果用戶拒絕了授權，那么相應的資訊就不可能回傳，應該也算是“呼叫失敗”…吧？

wx.getLocation({
  type: 'gcj02', //回傳可以用于wx.openLocation的經緯度
  success: function(res) {
    var latitude = res.latitude
    var longitude = res.longitude
  },
  fail(){
    console.log('用戶拒絕了授權')
  }
})

果然，

那接下來我們唯一需要做的就是：在fail中給出用戶提示，并引導用戶去授權！

wx.openSetting，打開設定頁！
一般用于“二次授權”，其中屬性 authSetting 中（scope物件）包含了用戶的操作配置！

wx.showModal({
   title: '提醒！',
   content: '您拒絕了位置授權，將無法使用大部分功能，點擊確定重新獲取授權',
   success(res) {
     //如果點擊確定
     if (res.confirm) {
       wx.openSetting({ //打開設定頁
        success(res) { //成功，回傳頁面回呼
          //如果同意了位置授權則userLocation=true
          if (res.authSetting["scope.userLocation"]) { //授權中如果有位置授權則執行邏輯
            /*后續代碼：比如：重繪頁面/重新呼叫函式*/
          }
        }
      })
    }
  }
})

到這里其實就很完善了（在微信看來），但是你會發現：如果用戶第二次仍然拒絕授權，那么就不再有機會了（除非清除快取重新進入或者再次呼叫getLocation API），

所以，從這一點看，你可以選擇更為方便的：百度/高德地圖API

如果用web API，需要在微信中配置高德/百度的域名：

然后回到開發者工具，重繪應該就可以了，有些麻煩
建議它們的另一個服務：微信 SDK（高德）/微信小程式JavaScript API（百度）

• 百度地圖-微信小程式JavaScript API配置
• 高德地圖-微信 SDK配置

用戶資訊授權

歐呦，這個就有的說了：微信小程式“ 獲取用戶資訊 ”的機制很早就改了，或許是不想讓開發者對用戶“隨意”造成困擾——畢竟有的用戶上來只是為了“逛一圈”，于是增加了“ 只有觸發button才能彈窗 ”的功能，

看一下新版授權資訊機制

<button open-type="getUserInfo" bindgetuserinfo="getUserInfo">授權</button>

//js
onLoad(options){
	this.userAuthorized();
},
getUserInfo(event){
	const userInfo=event.detail.userInfo;
	this.setData({
		userInfo:userInfo
	})
},
authorized(){
	wx.getSetting(){
		success:data=>{
			if(data.authSetting["scope.userInfo"]){
				wx.getUserInfo({
					success:data=>{
						this.setData({
							userInfo:data.userInfo
						})
					}
				})
			}
		}
	}
}

那么，從老版小程式一路跟進的用戶就該問了：有了open-type為什么還要有getUserInfo呢？

要知道，open-type只是為了（而且只能）獲取用戶頭像、昵稱這些簡單（可能在微信開來也沒啥用的）資訊，這一點上<button>和原先的<open-type></open-type>沒有什么區別，但是！其實獲取完整用戶資訊（更多的如：手機號、id、用戶授權相關），最重要的是“ 登錄 ”，這一步就涉及到和服務器的互動了，
登錄操作在服務器端是有一套非常完整的邏輯的，并不像我們所想的那么簡單，這一點以后再說，

當然，上面的代碼只是闡述一下新版微信小程式改進的地方，下面的才是重點：

自定義button組件實作用戶授權登錄

我們在于主檔案夾同級建立img-button檔案夾，作為button組件的地方，
img-button.wxml

<button bind:getuserinfo="onGetUserInfo" open-type="{{openType}}" plain="{{true}}" class="container">
	<slot name="img"></slot>
</button>

這里的bind后面必須跟userinfo，這是button組件的API，

img-button.js

Component({
	// “備注項”——啟用“插槽”
	options:{
		multipleSlot:true
	},
	prototies:{
		openType:{
			type:String
		}
	},
	methods:{
		onGetUserInfo(event){
			this.triggerEvent('getUserinfo',event.detail,{})
		}
	}
})

組件都有一項“必備屬性”——prototies，（就如同vue中的props——用于接收資料，規范格式）

接收誰的資料？ —— 主wxml中傳來的資料！
既然有接收，就有傳出，不然要組件干嘛，
對！在methods里面，組件“告訴”呼叫它的元素——用getUserInfo定義事件，給你傳一個值event.detail
（這個“getUserInfo”將作為主頁面bind的事件——這里機制其實和vue中的“$emit”->子組件向父組件傳值，是一樣的）

這樣“一來一往”，自定義組件內部和外面呼叫檔案就能“互相訪問”了，
我們在主檔案的json檔案里添加“對自定義組件檔案的訪問”：
main.json

"usingComponents":{
	"v-button":"../img-button/img-button"
}

main.wxml

<v-button wx:if="{{!authorized}}" open-type="getUserInfo" class="..."
			bind:getUserinfo="onGetUserInfo">
	<image slot="img" class="..." src="圖片路徑" /><!-- 更改button樣式，用圖片觸發 -->
</v-button>
<view wx:if="{{authorized}}" class="...">
	<image src="{{userInfo.avatarUrl}}" class="..." />
	<text>{{userInfo.nickName}}</text>
</view>

這里還真有一點需要注意的：呼叫組件時的bind的事件名就是自定義組件內部傳出來的值！（而且必須是）（這一點和上面button組件里面不同）

main.js

data：{
	authorized:false,
	userInfo:null
}，
onLoad(options){
	this.userAuthorized();
},
onGetUserInfo(event){
	const userInfo=event.detail.userInfo;   //取出組件內部傳出來的值
	if(userInfo){
		this.setData({
			userInfo,
			authorized:true
		})
	}
},
userAuthorized(){
	wx.getSetting({
		success:data=>{
			if(data.authSetting['scope.userInfo']){
				wx.getUserInfo({
					success:data=>{
						this.setData({
							authorized:true,
							userInfo:data.userInfo
						})
					}
				})
			}else{
				wx.showToast({
					title:'抱歉！請檢查微信后再試',
					icon:'none',
					duration:1200
				})
			}
		}
	})
}

由我開源并維護的小專案：微信小程式功能組件庫 已發布至github，歡迎star！歡迎提issues！想要參與維護和開發歡迎留言！
配套展示小程式：