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.co...
记录如何在uni-app中使用微信JS-SDK
前段时间因为修改bug的原因学习了下如何在uni-app下面使用多图上传,所以基于uni-app做了一个微信JS-SDK调用的Demo
依赖安装
- npm命令方式
npm install jweixin-module --save
- 下载文件方式
- 文件地址:https://unpkg.com/jweixin-module@1.4.1/out/index.js
- 下载保存之后放入项目中
这里我们使用了非npm安装的方式
页面引用
在需要使用微信JS-SDK功能的页面引入
<script>
function getLocalImgDataPromise(localId) {
return new Promise((resolve, reject) => {
wx.getLocalImgData({
localId: localId,
success: function(res) {
resolve(res)
},
fail: function(err) {
reject(err)
}
});
})
}
import wx from '@/common/js/jweixin-module/index.js'
export default {
data() {
return {
upload_picture_list: []
}
},
onLoad() {
//获取微信公众号的配置
uni.request({
url: 'http://localhost:4000/sig',
data: {
url: location.href.split('#')[0]
},
success: res => {
var s = res.data;
wx.config({
debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
appId: s.data.appId, // 必填,公众号的唯一标识
timestamp: s.data.timestamp, // 必填,生成签名的时间戳
nonceStr: s.data.noncestr, // 必填,生成签名的随机串
signature: s.data.signature.toLowerCase(), // 必填,签名,见附录1
jsApiList: [
'chooseImage',
'previewImage',
"getLocalImgData",
'uploadImage',
]
});
if (typeof callback === 'function') {
callback(res.data);
}
wx.ready(() => {
wx.checkJsApi({
// 需要检测的JS接口列表
jsApiList: ['chooseImage'],
success: function(res) {
console.log("res: " + res);
}
});
})
},
fail: err => {
console.log('request fail', err);
}
});
},
methods: {
previewImg(index) {
let that = this
uni.previewImage({
current: index,
urls: that.upload_picture_list
});
},
chooseImage() {
let _this = this
wx.chooseImage({
success: async (res) => {
let localIds = res.localIds;
for (let i = 0, len = localIds.length; i < len; i++) {
let imgDataRes = await getLocalImgDataPromise(localIds[i])
const localData = imgDataRes.localData
let imageBase64 = '';
if (localData.indexOf('data:image') == 0) {
//苹果的直接赋值,默认生成'data:image/jpeg;base64,'的头部拼接
imageBase64 = localData;
} else {
//此处是安卓中的唯一得坑!在拼接前需要对localData进行换行符的全局替换
//此时一个正常的base64图片路径就完美生成赋值到img的src中了
imageBase64 = 'data:image/jpeg;base64,' + localData.replace(
/\n/g, '');
}
_this.upload_picture_list.push(imageBase64);
}
}
});
}
}
}
</script>
后台签名方法(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
参考资料
【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱:
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论(0)