微信小程序 登錄的簡單實現(xiàn)
微信小程序 實現(xiàn)登錄
最近一段時間,微信小程序在張小龍的8小時演講下瞬間火了起來,但是呢沒火多久,就迅速沉靜下去了,我也是不知道張小龍什么想法,但是我想法挺多的,好了,廢話說多了,聊一下正題吧,我呢是剛?cè)胄械男〕绦騿T,一路上采坑不斷,別人遇不到的坑基本上踩了一遍,話說我的運氣有時候也確實挺爆炸的,小程序一個小登錄送給大家,
一、小程序開發(fā)前準(zhǔn)備
目前在網(wǎng)上的教程已經(jīng)不計其數(shù)了,給大家推薦一個網(wǎng)址: http://www.dbjr.com.cn/article/111566.htm 這里面介紹比較詳細,
二、小程序登錄
我先開始的時候在登錄就出問題了,因為當(dāng)時官方給的文檔就讓人很糾結(jié),因為官方給的文檔讓人感覺就凌亂了,在這里我解釋一下,
官方給的流程:
第一步:獲取用戶授權(quán)信息(每次的授權(quán)信息都不一樣)
第二部: 上代碼
wx.request({
url : API_URL,//自己的服務(wù)接口地址
method : 'POST',
// 在這里需要格外注意了,所有的post請求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在開發(fā)文檔上搜索-簽名加密-然后你閱讀后就知道了-下載屬于自己語言的解碼包
if(data.data.status == 1)
{
var userInfo_ = data.data.userInfo;
}else
{
console.log('解密失敗')
}
},
fail:function()
{
console.log('系統(tǒng)錯誤')
}
})
他的意思是所有的操作在后臺進行,這樣相對安全一點,還有一點就是公眾號需要的unionId可以通過解密獲取到,那樣的話就可以在公眾號的頁面看到你的小程序了,unionId是公眾號和小程序的共用ID,如果你們的項目是需要關(guān)聯(lián)的話那我還是建議你按照官方的走,如果不是的話,下面的方式可以迅速解決你的登錄問題
自定義流程:
//app.js
function Login(code,username,img)
{
var that = this
wx.request({
url:HTTP_URL,
data:
{
appid : '你后臺獲取的appdi',
secret : '你后臺獲取的secret',
js_code : code,
grant_type : 'authorization_code'
},
method:'GET',
header:{'content-type': 'application/json'},
success: function (a)
{
var openid = a.data.openid
// 請求自己的服務(wù)器
wx.request({
url:API_URL,
data:
{
img : img
openid : openid,
username : username,
},
success: function(b)
{
// 成功返回用戶的唯一ID(這是數(shù)據(jù)庫ID)
console.log(b.data.uid)
// 我這里是把用戶返回的ID存到了緩存里因為,我在使用全局變
// 量時候發(fā)現(xiàn)有時候引入了js但是還會有丟失找不到的現(xiàn)象
wx.setStorageSync('uid', b.data.uid)
}
})
},
fail: function ()
{
// 在這里你要考慮到用戶登錄失敗的情況
wx.showToast({
title: '網(wǎng)站正在維護中...',
icon: 'loading',
duration: 10000
});
}
})
}
// 自己服務(wù)器的地址
// 注意:開發(fā)時可以是http協(xié)議,但是如果上線必須申請https協(xié)議(也就是SSL協(xié)議)協(xié)議可以在阿里和騰訊的控制
// 臺都可以購買,例子:阿里-管理控制臺-安全(云盾)-證書服務(wù),一般用dv免費的就可以了協(xié)議申請完后需要補全,
// 補全完畢后下載文件是個壓縮包,里面有兩個文件,把他們放到你服務(wù)器上,然后再配置文件中指明這是ssl協(xié)議并
// 且指明路徑,這樣 你就算配置成功了,至于如何配置,網(wǎng)上開源的教程挺多的,nginx有Apache也有如果你
var API_URL = "自己服務(wù)器的地址";
// 微信提供的接口地址:這里必須要把https://api.weixin.qq.com這個網(wǎng)址在微信后臺安全域名中添加進去否則你會
// 感覺生活是如此的黑暗完全看不到希望
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)
{
// 這里是用戶的授權(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
// 請求自己的服務(wù)器
Login(code,username,img);
}
})
}else
{
wx.showModal({
title: '提示',
content: '獲取用戶登錄態(tài)失??!'+res.errMsg
})
}
}
})
}
},
globalData:
{
userInfo:null
}
})
下面附兩張圖片是申請SSL協(xié)議的大概流程圖

有些亂,大家將就一下。
還有就是注意一點,那就是代碼的重用,畢竟小程序代碼上傳是有限制的不得大于1MB,有些代碼其實可以節(jié)省的有些css代碼或是js代碼有些都是可以封裝一下的開發(fā)工具提供了app.js和app.css有些你感覺每個頁面都會用到的都可以放到里面,這樣也就減少了一些麻煩,還有就是有些人查看手機時,發(fā)現(xiàn)只能查看靜態(tài)的,這里提醒一定要打開調(diào)試模式,不然你就干著急吧。以上就是個人的一些經(jīng)驗分享,感謝觀看。如果說對各位有幫助的話,希望點個贊。第一次寫博客,感謝支持。
感謝閱讀,希望能幫助到大家,謝謝大家對本站的支持!
相關(guān)文章
直觀詳細的typescript隱式類型轉(zhuǎn)換圖文詳解
這篇文章主要為大家介紹了直觀詳細的typescript隱式類型轉(zhuǎn)換圖文詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2022-07-07
微信小程序 網(wǎng)絡(luò)API 上傳、下載詳解
這篇文章主要介紹了微信小程序 網(wǎng)絡(luò)API 上傳、下載詳解的相關(guān)資料,需要的朋友可以參考下2016-11-11
Js原型鏈constructor prototype __proto__屬性實例詳解
這篇文章主要介紹了Js原型鏈constructor prototype __proto__屬性實例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-10-10
JS中 querySelector 與 getElementById 方法區(qū)別
這篇文章主要介紹了JavaScript中 querySelector 與 getElementById 方法與區(qū)別,圍繞querySelector 與 getElementById 的相關(guān)資料展開文章內(nèi)容,需要的朋友可以參考一下2021-10-10

