微信JS-SDK是微信公众平台 面向网页开发者提供的基于微信内的网页开发工具包。
通过使用微信JS-SDK,网页开发者可借助微信高效地使用拍照、选图、语音、位置等手机系统的能力,同时可以直接使用微信分享、扫一扫、卡券、支付等微信特有的能力,为微信用户提供更优质的网页体验。
微信JS-SDK如何使用及相关注意事项可以查看以下文档
这里就直接呈上代码:
前端的事情:
// 拿到当前的 url ,向后台发送请求,拿到配置项 vue 中演示
<template>
<div id="app">
<h1>微信项目</h1>
<button @click="btnAction()">选取图片</button>
<div v-for="(item, index) in imgs" :key="index" class="img-list">
<img :src="item" alt="" />
</div>
<button @click="btn2Action()">扫一扫</button>
<div>扫描结果为:{{ qrCode }}</div>
</div>
</template>
<script>
import axios from "axios";
export default {
data() {
return {
imgs: [],
qrCode: ""
};
},
methods: {
async configWX() {
// 1.发送请求,向后台询问timestamp,nonceStr,signature
const url =
window.location.origin +
window.location.pathname +
window.location.search;
const { data } = await axios.get("/api/sign", { params: { url } });
//获得数据后,配置wx
wx.config({
// 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,
//可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
debug: true,
appId: "wx412bbe740f1c025", // 必填,公众号的唯一标识
timestamp: data.timestamp, // 必填,生成签名的时间戳
nonceStr: data.nonceStr, // 必填,生成签名的随机串
signature: data.signature, // 必填,签名
jsApiList: ["chooseImage", "scanQRCode"] // 必填,需要使用的JS接口列表
});
wx.ready(function() {
console.log("ready.......");
// config信息验证后会执行ready方法,所有接口调用都必须在config接口获得结果之后,
// config是一个客户端的异步操作,所以如果需要在页面加载时就调用相关接口,
// 则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口,
// 则可以直接调用,不需要放在ready函数中。
});
wx.error(function(error) {
console.log(error);
// config信息验证失败会执行error函数,
// 如签名过期导致验证失败,具体错误信息可以打开config的debug模式查看,
// 也可以在返回的res参数中查看,对于SPA可以在这里更新签名。
});
},
btnAction() {
wx.chooseImage({
count: 1, // 默认9
sizeType: ["original", "compressed"], // 可以指定是原图还是压缩图,默认二者都有
sourceType: ["album", "camera"], // 可以指定来源是相册还是相机,默认二者都有
success: res => {
const localIds = res.localIds; // 返回选定照片的本地ID列表,localId可以作为img标签的src属性显示图片
this.imgs = localIds;
console.log(localIds);
}
});
},
btn2Action() {
wx.scanQRCode({
needResult: 1, // 默认为0,扫描结果由微信处理,1则直接返回扫描结果,
scanType: ["qrCode", "barCode"], // 可以指定扫二维码还是一维码,默认二者都有
success: res => {
this.qrCode = res.resultStr; // 当needResult 为 1 时,扫码返回的结果
}
});
}
},
created() {
this.configWX();
}
};
</script>
<style>
.img-list {
margin: 10px 0;
}
.img-list img {
width: 50%;
}
</style>
后台的事情
// 后台需要根据文档进行测试是否有用
// 根据 appid 和 secret 请求拿到 access_token;
// 根据拿到的 access_token 请求拿到 ticket;
// 保存 ticket,以免触发频率限制,过期时间是 两个小时;
// 生成JS-SDK权限验证的签名;返回签名给客户端
const express = require('express');
const axios = require('axios');
const sign = require('./sign');
const app = express();
app.use('/MP_verify_kx0eoWxOzJcfpiDj.txt', (req, res)=>{
res.sendFile(__dirname+'/static/MP_verify_kx0eoWxOzJcfpiDj.txt');
})
app.get('/api/sign', async (req, res)=>{
// 1.获得access_token
const {data: {access_token}} = await axios.get('https://api.weixin.qq.com/cgi-bin/token', {
params: {
grant_type: 'client_credential',
appid: 'wx412bbe740f1c9d0f',
secret: '94d4b0869151a0cd6a383188d821889a'
}
});
// 2.获得jsapi_ticket
const {data: {ticket}} = await axios.get('https://api.weixin.qq.com/cgi-bin/ticket/getticket', {
params: {
access_token: access_token,
type: 'jsapi'
}
});
// 3.保存jsapi_ticket
// 4.生成JS-SDK权限验证的签名
const code = sign(ticket, req.query.url);
// 响应给客户端
res.json(code);
});
app.get('/', (req, res)=>{
res.sendFile(__dirname+'/www/index.html');
})
app.use('/js', express.static('./www/js'));
app.listen(8000, (error)=>{
console.log(error);
})
生成JS-SDK权限验证
var createNonceStr = function () {
return Math.random().toString(36).substr(2, 15);
};
var createTimestamp = function () {
return parseInt(new Date().getTime() / 1000) + '';
};
var raw = function (args) {
var keys = Object.keys(args);
keys = keys.sort()
var newArgs = {};
keys.forEach(function (key) {
newArgs[key.toLowerCase()] = args[key];
});
var string = '';
for (var k in newArgs) {
string += '&' + k + '=' + newArgs[k];
}
string = string.substr(1);
return string;
};
/**
* @synopsis 签名算法
*
* @param jsapi_ticket 用于签名的 jsapi_ticket
* @param url 用于签名的 url ,注意必须动态获取,不能 hardcode
*
* @returns
*/
var sign = function (jsapi_ticket, url) {
var ret = {
jsapi_ticket: jsapi_ticket,
nonceStr: createNonceStr(),
timestamp: createTimestamp(),
url: url
};
var string = raw(ret);
jsSHA = require('jssha');
shaObj = new jsSHA(string, 'TEXT');
ret.signature = shaObj.getHash('SHA-1', 'HEX');
return ret;
};
module.exports = sign;