? ? ? 上一節(jié)符匾，我們實(shí)現(xiàn)了簡(jiǎn)單的通過(guò)用戶名和密碼調(diào)用接口進(jìn)行登錄的實(shí)戰(zhàn)蕴潦，但是在小程序中，有個(gè)特殊的情況汪榔，就是很少有廠商去開發(fā)一個(gè)注冊(cè)功能或者是通過(guò)用戶名+密碼來(lái)登錄的邏輯蒲拉，為什么？因?yàn)锳PP痴腌、小程序?yàn)榱擞脩趔w驗(yàn)雌团，是盡量多的避免用戶多次輸入交互，所以衷掷，這個(gè)時(shí)候辱姨，一鍵通過(guò)微信登錄，非常方便戚嗅。就像我們的平常做的SNS社交一鍵登錄一樣雨涛。本節(jié)我們來(lái)學(xué)習(xí)使用微信一鍵登錄功能。
首先準(zhǔn)備一張微信UI素材懦胞，網(wǎng)上到處都是替久，自己覺的哪個(gè)美觀就用哪個(gè)。將其添加到我們項(xiàng)目中的resource目錄中躏尉。修改登錄按鈕樣式為如下蚯根。
添加如下四個(gè)樣式：
頁(yè)面wxml文件中新增如下控件
?保存文件，你將可發(fā)現(xiàn)頁(yè)面變化胀糜，多了個(gè)微信登錄的按鈕颅拦。
這里著重強(qiáng)調(diào)一下樣式，wx-label里面增加?了一個(gè)left屬性教藻，值為10rpx,這個(gè)的目的是增加圖標(biāo)與文字之間的間距距帅，不至于兩個(gè)挨在一起，過(guò)于丑陋括堤。當(dāng)然你可以不給wx-label來(lái)增加left屬性碌秸，你可以給wx-icon增加right屬性绍移，均可實(shí)現(xiàn)同樣的效果。圖標(biāo)和文字仍然是水平居中對(duì)齊讥电。
細(xì)心學(xué)習(xí)的同學(xué)可能已經(jīng)發(fā)現(xiàn)了問題蹂窖！什么問題？我怎么沒有發(fā)現(xiàn)恩敌？說(shuō)明你真的沒有用心去體會(huì)瞬测，我們每每在寫CSS樣式時(shí)，就需要在腦子里面進(jìn)行頁(yè)面的假想繪制潮剪，我們通過(guò)這樣的CSS樣式繪制出來(lái)的頁(yè)面應(yīng)該長(zhǎng)什么樣的涣楷！如果你有所懷疑分唾，你現(xiàn)在就去認(rèn)真的看看這新增的4個(gè)?樣式應(yīng)該展示什么樣的頁(yè)面抗碰。
1、這個(gè)"微信登錄"的按鈕字體怎么這么粗绽乔，明明和上面的登錄字體大小設(shè)置一樣弧蝇，它為什么變粗了？
2折砸、這個(gè)"微信登錄"的按鈕寬度不對(duì)呀看疗，明明是70%，為什么寬度明顯小了很多睦授？
現(xiàn)在两芳，我們來(lái)查查為什么，究竟是什么東西影響了這個(gè)組件的顯示去枷。我們通過(guò)調(diào)試器窗口來(lái)觀看添加到這個(gè)組件上的所有的樣式怖辆，一探究竟。
咦删顶，為什么會(huì)出現(xiàn)這么多的莫名其妙的user agent stylesheet?其實(shí)不難理解竖螃，應(yīng)該是瀏覽器默認(rèn)定義的一些常規(guī)樣式，它里面定義的樣式等級(jí)最低逗余，我們可以直接在我們自己的樣式中重新寫一次特咆，將其覆蓋。理論上是這樣的录粱，標(biāo)準(zhǔn)也是這樣制定的腻格。可是問題又來(lái)了啥繁，我們明明在wx-button-view中已經(jīng)定義了width屬性菜职，為什么不起作用了，你先別懵逼输虱！同時(shí)些楣，我們?cè)?b>wx-button-view定義font-weight期待覆蓋user agent stylesheet里面的值的時(shí)候，也失敗了！也就是說(shuō)愁茁，理論上它的優(yōu)先級(jí)是最低的蚕钦，但是我們嘗試覆蓋的時(shí)候，失敗了鹅很。你可以理解為這是微信小程序的BUG嘶居。但是我們可以修改配置文件來(lái)修正此問題，通過(guò)這種方式促煮，我猜測(cè)邮屁，微信官方它就是這樣干的，沒有將優(yōu)先級(jí)處理好或者是考慮到一些其他的場(chǎng)景菠齿，此處沒有根據(jù)常規(guī)的優(yōu)先級(jí)等級(jí)來(lái)進(jìn)行渲染佑吝！
? ? 我們打開app.json全局配置文件，看到有一個(gè)v2的style定義绳匀，將其干掉芋忿，我們發(fā)現(xiàn)一切就正常了。故而不要糾結(jié)于微信官方為什么沒有按照等級(jí)優(yōu)先級(jí)來(lái)渲染疾棵，只需要知道刪除這個(gè)配置數(shù)據(jù)即可戈钢。
?將其刪除掉，保存是尔。再來(lái)看看頁(yè)面殉了，一切就又正常了。
?寬度是我們定義的寬度拟枚，樣式是我們寫的樣式薪铜。
我們回到login.wxml頁(yè)面文件中，繼續(xù)進(jìn)行我們的功能實(shí)現(xiàn)梨州。我們?yōu)閎utton添加如下屬性痕囱。記住就是這樣用的即可，不用管為什么會(huì)這樣子暴匠。并且只有button屬性open-type='getPhoneNumber'的時(shí)候才可以觸發(fā)微信授權(quán)鞍恢！你把button換為view它就不行，記住即可每窖。授權(quán)后的數(shù)據(jù)會(huì)通過(guò)綁定在bindgetphonenumber屬性上的函數(shù)回調(diào)給你帮掉，我們綁定的回調(diào)函數(shù)名稱為：getMobilePhone
我們?cè)趌ogin.js文件里面實(shí)現(xiàn)此函數(shù)：
保存文件，在頁(yè)面上點(diǎn)擊"微信"登錄的按鈕窒典，如不出意外蟆炊，你將看到如下的頁(yè)面：
點(diǎn)擊允許，你將在綁定的函數(shù)中監(jiān)聽到微信授權(quán)數(shù)據(jù)：
有了這些數(shù)據(jù)瀑志，你將可以根據(jù)微信官方提供的API來(lái)獲取到用戶的數(shù)據(jù)涩搓，比如手機(jī)號(hào)等信息污秆。獲取到手機(jī)號(hào)，后面你們?cè)趺瓷捎脩粜畔⒚粮剩嵌际呛芊奖懔计础⒆匀坏氖虑榱恕?/p>
