此教程适合接触微信小程序一段时间，有一点基础的同学参考学习。
服务端语言：PHP 服务端框架：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);
}
},
/**
* 强制登录微信
*/
loginWx: function (cb) {
var that = this
var code = '';
var openid = '';
wx.showNavigationBarLoading();
wx.showLoading({
title: '努力登录中...',
mask: true,
})
//调用登录接口
wx.login({
success: function (obj) {
wx.hideNavigationBarLoading();
code = obj.code;
// console.log(code);
//请求服务端换取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错误');
wx.hideNavigationBarLoading();
wx.hideLoading();
}
)
},
fail: function () {
//登录失败
console.log('授权失败');
wx.hideNavigationBarLoading();
wx.hideLoading();
}
})
},
/**
* 获取用户信息
* @param openid=null不解析加密数据
*/
getUserInfo: function (cb, openid = null) {
var that = this;
wx.showNavigationBarLoading();
//读取用户信息
wx.getUserInfo({
success: function (res) {
wx.hideNavigationBarLoading();
console.log('授权成功!');
// console.log(res);
that.userInfo = res.userInfo;
//解密数据
if (openid != null) {
that.decodeWxUserInfo(openid, res, cb);
} else {
typeof cb == "function" && cb(that.userInfo);
}
},
fail: function () {
wx.hideNavigationBarLoading();
wx.hideLoading();
//登录失败
console.log('登录出现网络错误失败');
typeof cb == "function" && cb(null);
}
})
},
/**
* 请求解析微信加密数据
*/
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('解密数据网络错误');
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 是我封装的一个http请求的类，各位可以根据自己服务端返回的json数据格式自定义，这里就不提供代码了。
- cacheLoginWx方法提供缓存登录，你当然不希望自己的程序每次都请求服务器登录吧，所以需要判断登录的地方首先调用这个方法。
- 获取微信登录的code,用此code从自建服务端获取登录用户的openid
- wx.getUserInfo方法可以获取简要的用户信息，比如头像url和昵称，此方法还会返回一个加密过的rawData，如果需要获取更多用户的信息，比如用户的性别，地区等，就需要解密这段数据了
- decodeWxUserInfo会从服务端请求解密数据，此步骤对于不需要用户详细信息的可以省略。
服务端 (语言：php)
服务端就不提供代码了，数据库表不一样，代码写法也不一样，这里只提供一下思路
通过code获取openid，地址：$url = "https://api.weixin.qq.com/sns/jscode2session?";通过此方法获取的数据，可以在数据表里新建一个用户，记录唯一标识openid，此时服务端已经可以认为微信登录成功了。
解密数据，我用的官方提供的php Demo，这里有一点非常重要，从官方下载的php文档一定要记得去掉BOM头，否则android手机的用户就会无法登录成功，这一步切记！我用的phpstrom，所以直接可以选择File--Remove BOM。
openid是用户登录此小程序的唯一标识，同一用户登录小程序，此openid不会变，如果要判断App或是网页里的登录的微信用户是否是同一个用户，需要用到unionid，有需要的同学一定要注意。
结束语
感谢大家的支持，系列教程会不断更新，如果在小程序开发过程中有遇到问题的同学可以私信我，空了一定会予以解答。
[我的网站] http://www.58xinrui.com
码字也是个苦差事，欢迎打赏💰
