微信小程序中關(guān)乎“授權(quán)”的，拋開(kāi)各路“牛鬼蛇神”不談，大體上也就兩種：

1. 位置授權(quán)
2. 用戶信息授權(quán)

切記的是：在微信一直打著的“用戶至上”的旗號(hào)下，幾乎一切用戶相關(guān)的應(yīng)用都需要用戶手動(dòng)授權(quán)！所以必須要有提示的。

---

位置授權(quán)

昨天完成了微信小程序項(xiàng)目的最后一點(diǎn)內(nèi)容，里面我加了個(gè)“點(diǎn)擊自動(dòng)定位”的功能，請(qǐng)求的是高德地圖的web API，但是需要傳經(jīng)緯度，于是我一開(kāi)始是這樣寫(xiě)的：

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

相信很多初學(xué)者到此就OK了，但是一運(yùn)行發(fā)現(xiàn)：誒怎么什么都沒(méi)有？

哦，忘了說(shuō)了，微信小程序中的“自動(dòng)”彈窗提示是需要在app.json中配置的！

"permission": {
  "scope.userLocation": {
    "desc": "請(qǐng)確認(rèn)授權(quán)，您的授權(quán)信息將只被用于小程序運(yùn)行期間，且只在小程序內(nèi)部"
  }
}

到這里，在你剛進(jìn)入頁(yè)面（如果寫(xiě)在onLoad或onShow中）或者點(diǎn)擊某按鈕觸發(fā)（寫(xiě)在事件中）時(shí)就能看到一個(gè)極其類(lèi)似小程序彈框API wx.showToast() 的提示框了。

你是否到這里就滿足了？

當(dāng)我信心滿滿的提交代碼后卻換來(lái)了老大的“無(wú)能狂怒”：“為什么在用戶點(diǎn)擊‘取消’按鈕時(shí)沒(méi)有提示！”、“為什么不在用戶拒絕授權(quán)以后下一次想要觸發(fā)相應(yīng)功能時(shí)給個(gè)提醒？”

emmmmmmm我也沒(méi)注意過(guò)這玩意啊…
情急之下，又找到了wx.getLocation()的文檔，發(fā)現(xiàn)里面有這么一個(gè)說(shuō)明：

接口調(diào)用失敗？
肯定是分為好多種情況的，但是毫無(wú)疑問(wèn)的是：如果用戶拒絕了授權(quán)，那么相應(yīng)的信息就不可能返回，應(yīng)該也算是“調(diào)用失敗”…吧？

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

果然。

那接下來(lái)我們唯一需要做的就是：在fail中給出用戶提示，并引導(dǎo)用戶去授權(quán)！

wx.openSetting，打開(kāi)設(shè)置頁(yè)！
一般用于“二次授權(quán)”。其中屬性 authSetting 中（scope對(duì)象）包含了用戶的操作配置！

wx.showModal({
   title: '提醒！',
   content: '您拒絕了位置授權(quán)，將無(wú)法使用大部分功能，點(diǎn)擊確定重新獲取授權(quán)',
   success(res) {
     //如果點(diǎn)擊確定
     if (res.confirm) {
       wx.openSetting({ //打開(kāi)設(shè)置頁(yè)
        success(res) { //成功，返回頁(yè)面回調(diào)
          //如果同意了位置授權(quán)則userLocation=true
          if (res.authSetting["scope.userLocation"]) { //授權(quán)中如果有位置授權(quán)則執(zhí)行邏輯
            /*后續(xù)代碼：比如：刷新頁(yè)面/重新調(diào)用函數(shù)*/
          }
        }
      })
    }
  }
})

到這里其實(shí)就很完善了（在微信看來(lái)）。但是你會(huì)發(fā)現(xiàn)：如果用戶第二次仍然拒絕授權(quán)，那么就不再有機(jī)會(huì)了（除非清除緩存重新進(jìn)入或者再次調(diào)用getLocation API）。

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

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

然后回到開(kāi)發(fā)者工具，刷新應(yīng)該就可以了。有些麻煩
建議它們的另一個(gè)服務(wù)：微信 SDK（高德）/微信小程序JavaScript API（百度）

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

---

用戶信息授權(quán)

歐呦，這個(gè)就有的說(shuō)了：微信小程序“ 獲取用戶信息 ”的機(jī)制很早就改了?；蛟S是不想讓開(kāi)發(fā)者對(duì)用戶“隨意”造成困擾——畢竟有的用戶上來(lái)只是為了“逛一圈”，于是增加了“ 只有觸發(fā)button才能彈窗 ”的功能。

看一下新版授權(quán)信息機(jī)制

<button open-type="getUserInfo" bindgetuserinfo="getUserInfo">授權(quán)</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
						})
					}
				})
			}
		}
	}
}

那么，從老版小程序一路跟進(jìn)的用戶就該問(wèn)了：有了open-type為什么還要有g(shù)etUserInfo呢？

要知道，open-type只是為了（而且只能）獲取用戶頭像、昵稱這些簡(jiǎn)單（可能在微信開(kāi)來(lái)也沒(méi)啥用的）信息，這一點(diǎn)上<button>和原先的<open-type></open-type>沒(méi)有什么區(qū)別，但是！其實(shí)獲取完整用戶信息（更多的如：手機(jī)號(hào)、id、用戶授權(quán)相關(guān)），最重要的是“ 登錄 ”，這一步就涉及到和服務(wù)器的交互了。
登錄操作在服務(wù)器端是有一套非常完整的邏輯的，并不像我們所想的那么簡(jiǎn)單，這一點(diǎn)以后再說(shuō)。

當(dāng)然，上面的代碼只是闡述一下新版微信小程序改進(jìn)的地方，下面的才是重點(diǎn)：

自定義button組件實(shí)現(xiàn)用戶授權(quán)登錄

我們?cè)谟谥魑募A同級(jí)建立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({
	// “備注項(xiàng)”——啟用“插槽”
	options:{
		multipleSlot:true
	},
	prototies:{
		openType:{
			type:String
		}
	},
	methods:{
		onGetUserInfo(event){
			this.triggerEvent('getUserinfo',event.detail,{})
		}
	}
})

組件都有一項(xiàng)“必備屬性”——prototies。（就如同vue中的props——用于接收數(shù)據(jù)，規(guī)范格式）

接收誰(shuí)的數(shù)據(jù)？ —— 主wxml中傳來(lái)的數(shù)據(jù)！
既然有接收，就有傳出。不然要組件干嘛。
對(duì)！在methods里面，組件“告訴”調(diào)用它的元素——用getUserInfo定義事件，給你傳一個(gè)值event.detail
（這個(gè)“getUserInfo”將作為主頁(yè)面bind的事件——這里機(jī)制其實(shí)和vue中的“$emit”->子組件向父組件傳值，是一樣的）

這樣“一來(lái)一往”，自定義組件內(nèi)部和外面調(diào)用文件就能“互相訪問(wèn)”了。
我們?cè)谥魑募膉son文件里添加“對(duì)自定義組件文件的訪問(wèn)”：
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樣式，用圖片觸發(fā) -->
</v-button>
<view wx:if="{{authorized}}" class="...">
	<image src="{{userInfo.avatarUrl}}" class="..." />
	<text>{{userInfo.nickName}}</text>
</view>

這里還真有一點(diǎn)需要注意的：調(diào)用組件時(shí)的bind的事件名就是自定義組件內(nèi)部傳出來(lái)的值！（而且必須是）（這一點(diǎn)和上面button組件里面不同）

main.js

data：{
	authorized:false,
	userInfo:null
}，
onLoad(options){
	this.userAuthorized();
},
onGetUserInfo(event){
	const userInfo=event.detail.userInfo;   //取出組件內(nèi)部傳出來(lái)的值
	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:'抱歉！請(qǐng)檢查微信后再試',
					icon:'none',
					duration:1200
				})
			}
		}
	})
}

---

由我開(kāi)源并維護(hù)的小項(xiàng)目：微信小程序功能組件庫(kù) 已發(fā)布至github，歡迎star！歡迎提issues！想要參與維護(hù)和開(kāi)發(fā)歡迎留言！
配套展示小程序：

行舟客 CSDN認(rèn)證博客專家 ECMAScript 6 Node.js CSS 江湖人稱“云小夢(mèng)”。一個(gè)大前端路上還未“畢業(yè)”的“小學(xué)生”。愛(ài)好分享、執(zhí)著探索、樂(lè)于開(kāi)源；曾參與過(guò)中大型微信小程序項(xiàng)目前端開(kāi)發(fā)，并主導(dǎo)過(guò)一些官網(wǎng)（原生）開(kāi)發(fā)；著迷于vue、node、css以及原生js技術(shù)。熱衷研究現(xiàn)有技術(shù)的成型創(chuàng)新應(yīng)用。目前對(duì)前端AI和RTC感興趣。開(kāi)源且目前維護(hù)的有：微信小程序擴(kuò)展組件庫(kù)—— https://github.com/1314mxc/yunUI ，歡迎star！