概览
key
value
项目名称
node微信公众号开发
项目描述
使用node编写接口，前后端分离获取签名数据
开发者
leinov
发布日期
2018-11-07
仓库
github地址
安装&使用
下载
git clone git@github.com:leinov/node-weixin-api.git
npm install
开发
在微信公众号后台配置域名白名单
在server/weixin/wx.js里添加自己的appid secret
在src/index/index.js里wxShare里添加自己的分享内容
npm run dev
打开微信开发者工具调试
npm run build
将域名配置时下载的txt文件放到dist文件夹下
上传到服务器
pm2 start 启动服务
在微信里打开连接分享给好友测试
扩展：修改/src/component/wxconfig.js中的jsApiList数组，添加想要使用的微信api
WIKI我们在微信网页开发的时候需要通过后端返回的微信签名数据加以前端的配置才能使用微信提供的分享，图像，音频等api接口。这里我们就用前后端分离的思想，拿分享到朋友圈为例，使用node来完成这一过程
下图没有使用js-sdk开发的页面在微信里分享样式接下来我们一步步来实现
步骤一：绑定域名先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。
在添加域名时需要下载一个txt文件放到服务器web可访问的根目录 比如 可访问的静态根目录，比如node的静态文件设置的是public文件，就放public下
备注：登录后可在“开发者中心”查看对应的接口权限，看是否有分享朋友圈等权限
步骤二： 引入微信JS文件在需要调用JS接口的页面引入如下JS文件，（支持https）： 也可以直接下载到本地目录引入
步骤三：通过config接口注入权限验证配置（第六步详解）所有需要使用JS-SDK的页面必须先注入配置信息，否则将无法调用（同一个url仅需调用一次，对于变化url的SPA的web app可在每次url变化时进行调用,目前Android微信客户端不支持pushState的H5新特性，所以使用pushState来实现web
wx.config({ debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。 appId: \'\', // 必填，公众号的唯一标识 timestamp: , // 必填，生成签名的时间戳 nonceStr: \'\', // 必填，生成签名的随机串 signature: \'\',// 必填，签名 jsApiList: [] // 必填，需要使用的JS接口列表 });我们使用微信的所有接口都需要有在引入wx js-sdk和配置config的前提下
下面我们主要讲解如何通过node来获取微信签名的config的数据。
步骤三所需要的数据需要通过签名算来生成，下面是生成签名数据的步骤
1,通过公众号的appid和secret获取access_token
2.根据access_token获取ticket票据
3.根据微信提供node生成签名算法（需要ticket，url参数来返回config数据
这里要强调是secret一定要写在后端，决不能暴露在前端，这也是为什么需要用接口返回数据的原因。
获取签名config数据完整代码 server/wx.js /********************************************************************************* * @file: 返回微信开发需要的config数据 * @desc: * 1,通过appid和secret获取access_token * 2.根据access_token获取ticket * 3.根据ticket和url(访问的页面地址由接口传过来 )通过sgin加密返回前度需要用到的config数据 * @ahthor: leinov * @usedate:2018-11-07 **********************************************************************************/ const request = require("request"); const Base64 = require("js-base64").Base64; const sign = require("./sign.js"); //微信提供在开发文档可以找到下载到本地 const base={ appid:"****",//公众号appid secret:"****", // 公众号secret （重要不要暴露在前端） wxapi:"https://api.weixin.qq.com/cgi-bin" }; /** * 根据appid,secret获取access_token */ function getAccessToken(){ return new Promise((resolve, reject)=>{ request.get(`${base.wxapi}/token?grant_type=client_credential&appid=${base.appid}&secret=${base.secret}`, function (error, response, body) { if(error!==null){ reject("获取access_token失败 检查getAccessToken函数"); } resolve(JSON.parse(body)); }); }); } /** * 根据access_token获取api_ticket * * @param {String} access_token * @return {Promise} */ function getTicket(access_token){ return new Promise((resolve,reject)=>{ request.get(`${base.wxapi}/ticket/getticket?access_token=${access_token}&type=jsapi`, function (error, response, body) { if(error!==null){ reject("获取api_ticket失败 检查getTicket函数"); } resolve(JSON.parse(body)); }); }); } /** * 根据api_ticket和url通过加密返回所有config数据 * * @param {String} href * @return {Object} configdata */ async function getConfigData(href){ let configData; try{ const accessTokenData = await getAccessToken(); const ticketData = await getTicket(accessTokenData.access_token); const decodeHref = Base64.decode(href); configData = sign(ticketData.ticket,decodeHref); configData.appid = base.appid; }catch(err){ //打印错误日志 console.log(err); configData = {}; } return configData; } module.exports = getConfigData;