微信小程序 登錄的簡(jiǎn)單實(shí)現(xiàn)
微信小程序 實(shí)現(xiàn)登錄
最近一段時(shí)間,微信小程序在張小龍的8小時(shí)演講下瞬間火了起來(lái),但是呢沒(méi)火多久,就迅速沉靜下去了,我也是不知道張小龍什么想法,但是我想法挺多的,好了,廢話(huà)說(shuō)多了,聊一下正題吧,我呢是剛?cè)胄械男〕绦騿T,一路上采坑不斷,別人遇不到的坑基本上踩了一遍,話(huà)說(shuō)我的運(yùn)氣有時(shí)候也確實(shí)挺爆炸的,小程序一個(gè)小登錄送給大家,
一、小程序開(kāi)發(fā)前準(zhǔn)備
目前在網(wǎng)上的教程已經(jīng)不計(jì)其數(shù)了,給大家推薦一個(gè)網(wǎng)址: http://chabaoo.cn/article/111566.htm 這里面介紹比較詳細(xì),
二、小程序登錄
我先開(kāi)始的時(shí)候在登錄就出問(wèn)題了,因?yàn)楫?dāng)時(shí)官方給的文檔就讓人很糾結(jié),因?yàn)楣俜浇o的文檔讓人感覺(jué)就凌亂了,在這里我解釋一下,
官方給的流程:
第一步:獲取用戶(hù)授權(quán)信息(每次的授權(quán)信息都不一樣)
第二部: 上代碼
wx.request({ url : API_URL,//自己的服務(wù)接口地址 method : 'POST', // 在這里需要格外注意了,所有的post請(qǐng)求header必須是下面的格式不然你又入坑了 header : {'content-type':'application/x-www-form-urlencoded'}, data : { iv: res2.iv, code: code, encryptedData: res2.encryptedData }, success: function (data) { // 4.解密成功后 獲取自己服務(wù)器返回的結(jié)果 // 解密的sdk在開(kāi)發(fā)文檔上搜索-簽名加密-然后你閱讀后就知道了-下載屬于自己語(yǔ)言的解碼包 if(data.data.status == 1) { var userInfo_ = data.data.userInfo; }else { console.log('解密失敗') } }, fail:function() { console.log('系統(tǒng)錯(cuò)誤') } })
他的意思是所有的操作在后臺(tái)進(jìn)行,這樣相對(duì)安全一點(diǎn),還有一點(diǎn)就是公眾號(hào)需要的unionId可以通過(guò)解密獲取到,那樣的話(huà)就可以在公眾號(hào)的頁(yè)面看到你的小程序了,unionId是公眾號(hào)和小程序的共用ID,如果你們的項(xiàng)目是需要關(guān)聯(lián)的話(huà)那我還是建議你按照官方的走,如果不是的話(huà),下面的方式可以迅速解決你的登錄問(wèn)題
自定義流程:
//app.js function Login(code,username,img) { var that = this wx.request({ url:HTTP_URL, data: { appid : '你后臺(tái)獲取的appdi', secret : '你后臺(tái)獲取的secret', js_code : code, grant_type : 'authorization_code' }, method:'GET', header:{'content-type': 'application/json'}, success: function (a) { var openid = a.data.openid // 請(qǐng)求自己的服務(wù)器 wx.request({ url:API_URL, data: { img : img openid : openid, username : username, }, success: function(b) { // 成功返回用戶(hù)的唯一ID(這是數(shù)據(jù)庫(kù)ID) console.log(b.data.uid) // 我這里是把用戶(hù)返回的ID存到了緩存里因?yàn)?,我在使用全局? // 量時(shí)候發(fā)現(xiàn)有時(shí)候引入了js但是還會(huì)有丟失找不到的現(xiàn)象 wx.setStorageSync('uid', b.data.uid) } }) }, fail: function () { // 在這里你要考慮到用戶(hù)登錄失敗的情況 wx.showToast({ title: '網(wǎng)站正在維護(hù)中...', icon: 'loading', duration: 10000 }); } }) } // 自己服務(wù)器的地址 // 注意:開(kāi)發(fā)時(shí)可以是http協(xié)議,但是如果上線(xiàn)必須申請(qǐng)https協(xié)議(也就是SSL協(xié)議)協(xié)議可以在阿里和騰訊的控制 // 臺(tái)都可以購(gòu)買(mǎi),例子:阿里-管理控制臺(tái)-安全(云盾)-證書(shū)服務(wù),一般用dv免費(fèi)的就可以了協(xié)議申請(qǐng)完后需要補(bǔ)全, // 補(bǔ)全完畢后下載文件是個(gè)壓縮包,里面有兩個(gè)文件,把他們放到你服務(wù)器上,然后再配置文件中指明這是ssl協(xié)議并 // 且指明路徑,這樣 你就算配置成功了,至于如何配置,網(wǎng)上開(kāi)源的教程挺多的,nginx有Apache也有如果你 var API_URL = "自己服務(wù)器的地址"; // 微信提供的接口地址:這里必須要把https://api.weixin.qq.com這個(gè)網(wǎng)址在微信后臺(tái)安全域名中添加進(jìn)去否則你會(huì) // 感覺(jué)生活是如此的黑暗完全看不到希望 var HTTP_URL = "https://api.weixin.qq.com/sns/jscode2session?appid=appid&secret=app_sectet&grant_type=authorization_code&js_code=code"; App({ onLaunch: function () { // 調(diào)用API從本地緩存中獲取數(shù)據(jù) var logs = wx.getStorageSync('logs') || [] logs.unshift(Date.now()) wx.setStorageSync('logs', logs) }, getUserInfo: function (cb) { var that = this if(this.globalData.userInfo) { typeof cb == "function" && cb(this.globalData.userInfo) }else { // 調(diào)用登錄接口 wx.login({ // login流程 success: function (res) { //登錄成功 if (res.code) { // 這里是用戶(hù)的授權(quán)信息每次都不一樣 var code = res.code; wx.getUserInfo({ // getUserInfo流程 success: function (res2) { // console.log(res2) that.globalData.userInfo = res2.userInfo typeof cb == "function" && cb(that.globalData.userInfo) var username = res2.userInfo.nickName var img = res2.userInfo.avatarUrl // 請(qǐng)求自己的服務(wù)器 Login(code,username,img); } }) }else { wx.showModal({ title: '提示', content: '獲取用戶(hù)登錄態(tài)失?。?+res.errMsg }) } } }) } }, globalData: { userInfo:null } })
下面附兩張圖片是申請(qǐng)SSL協(xié)議的大概流程圖
有些亂,大家將就一下。
還有就是注意一點(diǎn),那就是代碼的重用,畢竟小程序代碼上傳是有限制的不得大于1MB,有些代碼其實(shí)可以節(jié)省的有些css代碼或是js代碼有些都是可以封裝一下的開(kāi)發(fā)工具提供了app.js和app.css有些你感覺(jué)每個(gè)頁(yè)面都會(huì)用到的都可以放到里面,這樣也就減少了一些麻煩,還有就是有些人查看手機(jī)時(shí),發(fā)現(xiàn)只能查看靜態(tài)的,這里提醒一定要打開(kāi)調(diào)試模式,不然你就干著急吧。以上就是個(gè)人的一些經(jīng)驗(yàn)分享,感謝觀看。如果說(shuō)對(duì)各位有幫助的話(huà),希望點(diǎn)個(gè)贊。第一次寫(xiě)博客,感謝支持。
感謝閱讀,希望能幫助到大家,謝謝大家對(duì)本站的支持!
相關(guān)文章
直觀詳細(xì)的typescript隱式類(lèi)型轉(zhuǎn)換圖文詳解
這篇文章主要為大家介紹了直觀詳細(xì)的typescript隱式類(lèi)型轉(zhuǎn)換圖文詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-07-07微信小程序 按鈕滑動(dòng)的實(shí)現(xiàn)方法
這篇文章主要介紹了微信小程序 按鈕滑動(dòng)的實(shí)現(xiàn)方法的相關(guān)資料,希望通過(guò)本文能幫助到大家實(shí)現(xiàn)這樣的功能,需要的朋友可以參考下2017-09-09微信小程序 網(wǎng)絡(luò)API 上傳、下載詳解
這篇文章主要介紹了微信小程序 網(wǎng)絡(luò)API 上傳、下載詳解的相關(guān)資料,需要的朋友可以參考下2016-11-11Js原型鏈constructor prototype __proto__屬性實(shí)例詳解
這篇文章主要介紹了Js原型鏈constructor prototype __proto__屬性實(shí)例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-10-10JS中 querySelector 與 getElementById 方法區(qū)別
這篇文章主要介紹了JavaScript中 querySelector 與 getElementById 方法與區(qū)別,圍繞querySelector 與 getElementById 的相關(guān)資料展開(kāi)文章內(nèi)容,需要的朋友可以參考一下2021-10-10