? ? ? 上一節(jié)，我們實現(xiàn)了簡單的通過用戶名和密碼調(diào)用接口進行登錄的實戰(zhàn)，但是在小程序中，有個特殊的情況，就是很少有廠商去開發(fā)一個注冊功能或者是通過用戶名+密碼來登錄的邏輯，為什么？因為APP、小程序為了用戶體驗，是盡量多的避免用戶多次輸入交互，所以，這個時候，一鍵通過微信登錄，非常方便。就像我們的平常做的SNS社交一鍵登錄一樣。本節(jié)我們來學(xué)習(xí)使用微信一鍵登錄功能。

首先準備一張微信UI素材，網(wǎng)上到處都是，自己覺的哪個美觀就用哪個。將其添加到我們項目中的resource目錄中。修改登錄按鈕樣式為如下。

添加如下四個樣式：

頁面wxml文件中新增如下控件

?保存文件，你將可發(fā)現(xiàn)頁面變化，多了個微信登錄的按鈕。

這里著重強調(diào)一下樣式，wx-label里面增加?了一個left屬性，值為10rpx,這個的目的是增加圖標與文字之間的間距，不至于兩個挨在一起，過于丑陋。當然你可以不給wx-label來增加left屬性，你可以給wx-icon增加right屬性，均可實現(xiàn)同樣的效果。圖標和文字仍然是水平居中對齊。

細心學(xué)習(xí)的同學(xué)可能已經(jīng)發(fā)現(xiàn)了問題！什么問題？我怎么沒有發(fā)現(xiàn)？說明你真的沒有用心去體會，我們每每在寫CSS樣式時，就需要在腦子里面進行頁面的假想繪制，我們通過這樣的CSS樣式繪制出來的頁面應(yīng)該長什么樣的！如果你有所懷疑，你現(xiàn)在就去認真的看看這新增的4個?樣式應(yīng)該展示什么樣的頁面。

1、這個"微信登錄"的按鈕字體怎么這么粗，明明和上面的登錄字體大小設(shè)置一樣，它為什么變粗了？

2、這個"微信登錄"的按鈕寬度不對呀，明明是70%，為什么寬度明顯小了很多？

現(xiàn)在，我們來查查為什么，究竟是什么東西影響了這個組件的顯示。我們通過調(diào)試器窗口來觀看添加到這個組件上的所有的樣式，一探究竟。

咦，為什么會出現(xiàn)這么多的莫名其妙的user agent stylesheet?其實不難理解，應(yīng)該是瀏覽器默認定義的一些常規(guī)樣式，它里面定義的樣式等級最低，我們可以直接在我們自己的樣式中重新寫一次，將其覆蓋。理論上是這樣的，標準也是這樣制定的。可是問題又來了，我們明明在wx-button-view中已經(jīng)定義了width屬性，為什么不起作用了，你先別懵逼！同時，我們在wx-button-view定義font-weight期待覆蓋user agent stylesheet里面的值的時候，也失敗了！也就是說，理論上它的優(yōu)先級是最低的，但是我們嘗試覆蓋的時候，失敗了。你可以理解為這是微信小程序的BUG。但是我們可以修改配置文件來修正此問題，通過這種方式，我猜測，微信官方它就是這樣干的，沒有將優(yōu)先級處理好或者是考慮到一些其他的場景，此處沒有根據(jù)常規(guī)的優(yōu)先級等級來進行渲染！

? ? 我們打開app.json全局配置文件，看到有一個v2的style定義，將其干掉，我們發(fā)現(xiàn)一切就正常了。故而不要糾結(jié)于微信官方為什么沒有按照等級優(yōu)先級來渲染，只需要知道刪除這個配置數(shù)據(jù)即可。

?將其刪除掉，保存。再來看看頁面，一切就又正常了。

?寬度是我們定義的寬度，樣式是我們寫的樣式。

我們回到login.wxml頁面文件中，繼續(xù)進行我們的功能實現(xiàn)。我們?yōu)閎utton添加如下屬性。記住就是這樣用的即可，不用管為什么會這樣子。并且只有button屬性open-type='getPhoneNumber'的時候才可以觸發(fā)微信授權(quán)！你把button換為view它就不行，記住即可。授權(quán)后的數(shù)據(jù)會通過綁定在bindgetphonenumber屬性上的函數(shù)回調(diào)給你，我們綁定的回調(diào)函數(shù)名稱為：getMobilePhone

我們在login.js文件里面實現(xiàn)此函數(shù)：

保存文件，在頁面上點擊"微信"登錄的按鈕，如不出意外，你將看到如下的頁面：

點擊允許，你將在綁定的函數(shù)中監(jiān)聽到微信授權(quán)數(shù)據(jù)：

有了這些數(shù)據(jù)，你將可以根據(jù)微信官方提供的API來獲取到用戶的數(shù)據(jù)，比如手機號等信息。獲取到手機號，后面你們怎么生成用戶信息，那都是很方便、自然的事情了。