我们基于测试号来说明,非测试号也可以使用,填入正确字段即可,如果有问题,可以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)
        }
    });
});

zxl20070701
136 声望14 粉丝