全局票据
全局票据需要基于mongodb或者redires，我们用mongodb
新建个mongoose.js
const mongoose = require('mongoose') const { Schema } = mongoose mongoose.connect('mongodb://localhost:27017/weixin', { useNewUrlParser: true }, () => { console.log('Mongodb connected..') }) exports.ServerToken = mongoose.model('ServerToken', { accessToken: String });
index.js里改造上面用co-wechat-api的
const { ServerToken } = require('./mongoose')//全局票据来源 const WechatAPI = require('co-wechat-api') const api = new WechatAPI( conf.appid, conf.appsecret, // 取Token async () => await ServerToken.findOne(), // 存Token async token => await ServerToken.updateOne({}, token, { upsert: true }) ) router.get('/getFollowers', async ctx => { let res = await api.getFollowers() res = await api.batchGetUsers(res.data.openid, 'zh_CN') ctx.body = res })
消息推动
就类似于这个，前台发送1，1，2
后台会显示前台的推送，而且更新echart
Oauth2认证流程
首先三个端，浏览器，服务器，微信服务器
1.浏览器向服务器发送认证请求
2.服务器让浏览器重定向微信认证界面
3.浏览器向微信服务器请求第三方认证（微信认证）
4.微信服务器毁掉给服务器一个认证code
5.服务器用code向微信服务器申请认证令牌
6.微信服务器返给服务器一个令牌
最后当服务器得到令牌认证成功后，发给浏览器一个指令，刷新界面
刷新后就会有一个用户信息
使用微信开发者工具，选择公众号网页，用来预览
demo1 下载
相关文档：
01_公众号_服务器端 下载
01-公众号简介与开发者申请 下载
02-ngrok使用1 下载
实现一个微信认证登录
配置js接口安全域名，就是我们转发的公网域名（不用带协议）：zhifeiji.free.idcfengye.com
再就是每个微信接口api那里也要授权，即下图的修改位置，修改的和上面一样
把前面的项目考过来再seed目录下继续写
index.js
const OAuth = require('co-wechat-oauth')//引入一个oauth库 const oauth = new OAuth(conf.appid,conf.appsecret) /** * 生成用户URL */ router.get('/wxAuthorize', async (ctx, next) => { const state = ctx.query.id console.log('ctx...' + ctx.href) let redirectUrl = ctx.href redirectUrl = redirectUrl.replace('wxAuthorize', 'wxCallback') const scope = 'snsapi_userinfo' const url = oauth.getAuthorizeURL(redirectUrl, state, scope) console.log('url' + url) ctx.redirect(url) }) /** * 用户回调方法 */ router.get('/wxCallback', async ctx => { const code = ctx.query.code console.log('wxCallback code', code) const token = await oauth.getAccessToken(code) const accessToken = token.data.access_token const openid = token.data.openid console.log('accessToken', accessToken) console.log('openid', openid) ctx.redirect('/?openid=' + openid) }) /** * 获取用户信息 */ router.get('/getUser', async ctx => { const openid = ctx.query.openid const userInfo = await oauth.getUser(openid) console.log('userInfo:', userInfo) ctx.body = userInfo })
index.html
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0"> <script src="https://unpkg.com/vue@2.1.10/dist/vue.min.js"></script> <script src="https://unpkg.com/axios/dist/axios.min.js"></script> <script src="https://unpkg.com/cube-ui/lib/cube.min.js"></script> <script src="https://cdn.bootcss.com/qs/6.6.0/qs.js"></script> <script src="http://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script> <link rel="stylesheet" href="https://unpkg.com/cube-ui/lib/cube.min.css"> <style> /* .cube-btn { margin: 10px 0; } */ </style> </head> <body> <div id="app"> <cube-input v-model="value"></cube-input> <cube-button @click='click'>Click</cube-button> <cube-button @click='getTokens'>getTokens</cube-button> <cube-button @click='getFollowers'>getFollowers</cube-button> <cube-button @click='auth'>微信登录</cube-button> <cube-button @click='getUser'>获取用户信息</cube-button> </div> <script> var app = new Vue({ el: '#app', data: { value: 'input' }, methods: { click: function () { console.log('click') }, async getTokens(){ const res = await axios.get('/getTokens') console.log('res:',res) }, async getFollowers(){ const res = await axios.get('/getFollowers') console.log('res',res) }, async auth(){ window.location.href = '/wxAuthorize' }, async getUser(){ const qs = Qs.parse(window.location.search.substr(1)) const openid= qs.openid const res = await axios.get('/getUser',{ params:{ openid } }) console.log('res',res) } }, mounted: function () { }, }); </script> </body> </html>
全局票据（一样用到mongoose，从上次的修改）
mongoose.js
const mongoose = require('mongoose') const { Schema } = mongoose mongoose.connect('mongodb://localhost:27017/weixin', { useNewUrlParser: true }, () => { console.log('Mongodb connected..') }) exports.ServerToken = mongoose.model('ServerToken', { accessToken: String }); schema = new Schema({ access_token: String, expires_in: Number, refresh_token: String, openid: String, scope: String, create_at: String }); // 自定义getToken方法 schema.statics.getToken = async function (openid) { return await this.findOne({ openid: openid }); }; schema.statics.setToken = async function (openid, token) { // 有则更新，无则添加 const query = { openid: openid }; const options = { upsert: true }; return await this.updateOne(query, token, options); }; exports.ClientToken = mongoose.model('ClientToken', schema);
index.js
const { ServerToken,ClientToken } = require('./mongoose')//全局票据来源 const oauth = new OAuth(conf.appid, conf.appsecret, async function (openid) { return await ClientToken.getToken(openid) }, async function (openid, token) { return await ClientToken.setToken(openid, token) } )
微信jssdk
准备：
?1.获取jsconfig
index.html
<cube-button @click='getJSConfig'>获取jsconfig</cube-button> async getJSConfig(){ console.log('wx',wx) const res = await axios.get('/getJSConfig',{ params:{ url:window.location.href } }) console.log('config',res) res.data.jsApiList = ['onMenuShareTimeline'] wx.config(res.data) wx.ready(function () { console.log('wx.ready......') }) }
index.js
/** * 获取JSConfig */ router.get('/getJsConfig',async ctx => { console.log('getJSSDK...',ctx.query) const res = await api.getJsConfig(ctx.query) ctx.body = res })
如果能走到wx.ready(),说明这个时候可以使用别的功能那个api了
?2.获取网络状态
在wx.ready()后加，当然在ready()里加最为合理
//获取网络状态 wx.getNetworkType({ success:function(res){ // 返回网络类型2g，3g，4g，wifi const networkType = res.networkType console.log('getNetworkType...', networkType) } })
下图可见当前是wifi
好了，到这里基本上已经知道怎么去调用微信jssdk了，但是呢，开发过程中是前后端分离的，所以我们要有特定的写法
前后端分离的开发
cubeui（前端目录）
安装依赖
npm run watch
quiz（后端目录）
nodemon server.js
项目丢这里，可以自己看看
文档：
