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小時內刪除侵權內容。

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。