我们基于测试号来说明,非测试号也可以使用,填入正确字段即可,如果有问题,可以issue给我们留言!
安装服务器
npm install --save wechat-offiaccount
配置服务器
准备一份配置文件,比如在当前目录下有一个文件offiaccount.config.js
,内容如下:
// 具体的改为自己的即可
const config = {
port:8080,
appID: "",
appsecret: ""
}
module.exports = config
上述appID和appsecret字段在微信公众号账号下查看即可。
配置JS接口安全域名
比如你的项目地址是:http://192.168.0.6:20000/index.html(无需外网可以访问,如果电脑和手机连同一个wifi,像这里的例子,用局域网ip即可)访问,那么,“JS接口安全域名”中的域名配置成192.168.0.6:20000即可。
启动服务器
在package.json
中配置启动命令:
{
"scripts": {
"offiaccount": "offiaccount-cli --config offiaccount.config.js"
}
}
然后执行启动命令:
npm run offiaccount
引入js-sdk
在你的项目index.html中引入:
<script src="http://res2.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
初始化权限
在项目中加入如下代码:
fetch("http://" + window.location.hostname + ":8080/JsApiSignature?url=" + window.location.href.split('#')[0], {
method: "get"
}).then(function (response) {
response.json()
.then(function (res) {
wx.config({
debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
appId: res.appId, // 必填,公众号的唯一标识
timestamp: res.timestamp, // 必填,生成签名的时间戳
nonceStr: res.nonceStr, // 必填,生成签名的随机串
signature: res.signature,// 必填,签名
jsApiList: ['chooseImage'] // 必填,需要使用的JS接口列表
});
wx.error(function (res) {
alert("错误:" + res);
});
});
});
使用
我们以选择或者拍照为例:
wx.ready(function () {
alert('准备好了!');
wx.chooseImage({
count: 1, // 默认9
sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有
success: function (res) {
var localIds = res.localIds; // 返回选定照片的本地ID列表,localId可以作为img标签的src属性显示图片
alert(localIds)
}
});
});
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。