本地调试微信公众号js-sdk接口

安装服务器

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)
        }
    });
});