uni-app使用微信JS-SDK

记录如何在uni-app中使用微信JS-SDK

前段时间因为修改bug的原因学习了下如何在uni-app下面使用多图上传，所以基于uni-app做了一个微信JS-SDK调用的Demo

依赖安装

页面引用

后台签名方法(nodejs)

效果演示

参考资料

依赖安装

npm命令方式

npm install jweixin-module --save

下载文件方式

文件地址：https://unpkg.com/jweixin-module@1.4.1/out/index.js

下载保存之后放入项目中

这里我们使用了非npm安装的方式

页面引用

在需要使用微信JS-SDK功能的页面引入

后台签名方法(nodejs)

这里我们使用koa框架来实现签名，详情可以参考上次分享的文章基于koa实现的微信JS-SDK调用Demo

uni-app项目根目录下的server文件夹下即为示例后端代码，执行node app.js即可，下面是签名核心方法：

router.get('/sig', async (ctx, next) => { try { //获取当前url let url = ctx.request.protocol + '://' + ctx.request.host + ctx.request.originalUrl; if (ctx.query.url) { url = ctx.query.url; } ctx.data = await sign(url); } catch (e) { console.log(e); } await next(); }); async function sign(url) { let sig = {}, noncestr = config.noncestr, timestamp = Math.floor(Date.now() / 1000), //精确到秒 jsapi_ticket; if (cache.get('ticket')) { jsapi_ticket = cache.get('ticket'); sig = { appId: config.appid, noncestr: noncestr, timestamp: timestamp, url: url, jsapi_ticket: jsapi_ticket, signature: sha1( 'jsapi_ticket=' + jsapi_ticket + '&noncestr=' + noncestr + '×tamp=' + timestamp + '&url=' + url ), }; } else { // 获取 token let tokenRes = await rp({ uri: config.accessTokenUrl + '?grant_type=' + config.grant_type + '&appid=' + config.appid + '&secret=' + config.secret, }); tokenRes = JSON.parse(tokenRes); // 获取 ticket let ticketRes = await rp({ uri: config.ticketUrl + '?access_token=' + tokenRes.access_token + '&type=jsapi', }); var ticketMap = JSON.parse(ticketRes); // 加入缓存 cache.put('ticket', ticketMap.ticket, config.cache_duration); sig = { appId: config.appid, noncestr: noncestr, timestamp: timestamp, url: url, jsapi_ticket: ticketMap.ticket, signature: sha1( 'jsapi_ticket=' + ticketMap.ticket + '&noncestr=' + noncestr + '×tamp=' + timestamp + '&url=' + url ), }; } return sig; }

效果演示

视频演示地址：

https://www.bilibili.com/video/BV1SV411p7Hs?share_source=copy_web

参考资料

jweixin-module npm(https://www.npmjs.com/package/jweixin-module)

jweixin-module github(https://github.com/zhetengbiji/jweixin-module)

JS-SDK说明文档(https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html)

API/SDK 移动APP

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。