此教程適合接觸微信小程序一段時(shí)間败明，有一點(diǎn)基礎(chǔ)的同學(xué)參考學(xué)習(xí)馅精。
服務(wù)端語言：PHP 服務(wù)端框架：Thinkphp5.0
客戶端： 微信小程序框架
客戶端
//app.js
var httpclient = require("utils/httpclient");
App({
onLaunch: function () {
this.loginWx();
},
/**
* 緩存登錄
*/
cacheLoginWx: function (cb) {
if (this.userInfo == null) {
this.loginWx(cb);
} else {
typeof cb == "function" && cb(this.userInfo);
}
},
/**
* 強(qiáng)制登錄微信
*/
loginWx: function (cb) {
var that = this
var code = '';
var openid = '';
wx.showNavigationBarLoading();
wx.showLoading({
title: '努力登錄中...',
mask: true,
})
//調(diào)用登錄接口
wx.login({
success: function (obj) {
wx.hideNavigationBarLoading();
code = obj.code;
// console.log(code);
//請(qǐng)求服務(wù)端換取key
httpclient.request(
that.url.head + that.url.wxOnLogin,
{
code: code,
},
function (res) {
openid = res.openid;
that.getUserInfo(cb, openid);
},
function (res) {
console.log('key錯(cuò)誤');
wx.hideNavigationBarLoading();
wx.hideLoading();
}
)
},
fail: function () {
//登錄失敗
console.log('授權(quán)失敗');
wx.hideNavigationBarLoading();
wx.hideLoading();
}
})
},
/**
* 獲取用戶信息
* @param openid=null不解析加密數(shù)據(jù)
*/
getUserInfo: function (cb, openid = null) {
var that = this;
wx.showNavigationBarLoading();
//讀取用戶信息
wx.getUserInfo({
success: function (res) {
wx.hideNavigationBarLoading();
console.log('授權(quán)成功!');
// console.log(res);
that.userInfo = res.userInfo;
//解密數(shù)據(jù)
if (openid != null) {
that.decodeWxUserInfo(openid, res, cb);
} else {
typeof cb == "function" && cb(that.userInfo);
}
},
fail: function () {
wx.hideNavigationBarLoading();
wx.hideLoading();
//登錄失敗
console.log('登錄出現(xiàn)網(wǎng)絡(luò)錯(cuò)誤失敗');
typeof cb == "function" && cb(null);
}
})
},
/**
* 請(qǐng)求解析微信加密數(shù)據(jù)
*/
decodeWxUserInfo: function (openid, obj, cb) {
var that = this;
var rawData = obj.rawData;
var signature = obj.signature;
var encryptedData = obj.encryptedData;
var iv = obj.iv;
wx.showNavigationBarLoading();
//
httpclient.request(
that.url.head + that.url.decodeWxUserInfo,
{
openid: openid,
encryptedData: encryptedData,
iv: iv,
},
function (userData) {
if (userData.hasOwnProperty('userId')) {
that.userInfo.userId = userData.userId;
}
if (userData.hasOwnProperty('authority')) {
that.userInfo.authority = parseInt(userData.authority);
}
console.log(userData);
//
wx.hideNavigationBarLoading();
wx.hideLoading();
typeof cb == "function" && cb(that.userInfo);
},
function (res) {
console.log('解密數(shù)據(jù)網(wǎng)絡(luò)錯(cuò)誤');
wx.hideNavigationBarLoading();
wx.hideLoading();
}
)
},
/**
* 獲取用戶id
*/
getUserId() {
if (this.userInfo == null) return null;
return this.userInfo.userId;
},
/**
* userInfo
*/
userInfo: null,
/**
* url
*/
url: {
head: "http://192.168.0.1/",
//consumer
wxOnLogin: "/public/consumer/Consumer/wxOnLogin",
decodeWxUserInfo: "/public/consumer/Consumer/decodeWxUserInfo",
},
})
講解
注：httpclient.js 是我封裝的一個(gè)http請(qǐng)求的類冈闭，各位可以根據(jù)自己服務(wù)端返回的json數(shù)據(jù)格式自定義又活，這里就不提供代碼了矮台。
- cacheLoginWx方法提供緩存登錄，你當(dāng)然不希望自己的程序每次都請(qǐng)求服務(wù)器登錄吧漾月，所以需要判斷登錄的地方首先調(diào)用這個(gè)方法病梢。
- 獲取微信登錄的code,用此code從自建服務(wù)端獲取登錄用戶的openid
- wx.getUserInfo方法可以獲取簡(jiǎn)要的用戶信息，比如頭像url和昵稱，此方法還會(huì)返回一個(gè)加密過的rawData蜓陌，如果需要獲取更多用戶的信息觅彰，比如用戶的性別，地區(qū)等钮热，就需要解密這段數(shù)據(jù)了
- decodeWxUserInfo會(huì)從服務(wù)端請(qǐng)求解密數(shù)據(jù)填抬，此步驟對(duì)于不需要用戶詳細(xì)信息的可以省略。
服務(wù)端 (語言：php)
服務(wù)端就不提供代碼了隧期，數(shù)據(jù)庫表不一樣飒责，代碼寫法也不一樣，這里只提供一下思路
通過code獲取openid仆潮，地址：$url = "https://api.weixin.qq.com/sns/jscode2session?";通過此方法獲取的數(shù)據(jù)宏蛉，可以在數(shù)據(jù)表里新建一個(gè)用戶，記錄唯一標(biāo)識(shí)openid性置，此時(shí)服務(wù)端已經(jīng)可以認(rèn)為微信登錄成功了拾并。
解密數(shù)據(jù)，我用的官方提供的php Demo鹏浅，這里有一點(diǎn)非常重要嗅义，從官方下載的php文檔一定要記得去掉BOM頭，否則android手機(jī)的用戶就會(huì)無法登錄成功隐砸，這一步切記芥喇！我用的phpstrom，所以直接可以選擇File--Remove BOM凰萨。
openid是用戶登錄此小程序的唯一標(biāo)識(shí)继控，同一用戶登錄小程序，此openid不會(huì)變胖眷，如果要判斷App或是網(wǎng)頁里的登錄的微信用戶是否是同一個(gè)用戶武通，需要用到unionid，有需要的同學(xué)一定要注意珊搀。
結(jié)束語
感謝大家的支持冶忱，系列教程會(huì)不斷更新，如果在小程序開發(fā)過程中有遇到問題的同學(xué)可以私信我境析，空了一定會(huì)予以解答囚枪。
[我的網(wǎng)站] http://www.58xinrui.com
碼字也是個(gè)苦差事，歡迎打賞??
