本地调式微信js-sdk

jiezi

6 年前

本地调试 js-sdk，因为初始化 js-sdk 的时还需要通过域名 url 才能生成签名，所以需要在本地模拟一个域名进行调试。下面是详细的操作步骤：

1. 首先需要让手机与调试的电脑位于同一个局域网
2. 让电脑能够通过自己设置的域名访问调试本地页面，例如我的页面 index 是 http://127.0.0.1/basic.html，我想要通过电脑浏览器访问 http://baidu.com/basic.html 得 …

（1）修改 hosts，windows 路径（C:WindowsSystem32driversetc），先用 #把 127.0.0.1 localhost 注释掉，新建 127.0.0.1 baidu.com

（2）. 访问 http://baidu.com/basic.html：

3. 下载安装 charles，将手机的 ip 访问代理到电脑端：
（1）. 查看电脑 ip：192.168.6.162
（2）. 打开 charles，它默认通过 8888 端口代理，打开 Proxy->Proxy Settings 查看：

（3）. 打开手机的 wifi 设置代理 ip 和端口：

（4）. 手机访问：’http://baidu.com/basic.html’，如果手机能通过你的电脑的自定义域名进行访问，就证明代理成，。向成功又迈进了一大步。

4. 引入微信 js-sdk，生成 token 等信息进行初始化：
（1）. 进入个人的测试公众号（微信公众平台：，没有就用个人邮箱注册一个）

（2）切记，这里的域名绑定，是没有 http:// 的

(3). 记录下上图的 appID 和 appsecret，用于获取 token
(4). 启动 node.js，写一个获取 noncestr（随机数）、timestamp（时间戳）和 signature（签名）的服务端请求，用于页面初始化 jsdk，附上官方文档

（4.1）access_token 和 ticket 有效期 7200 秒，而且这个接口每天都有调用次数限制，所以需要缓存起来，等过期了再重新调用获取，这里只是演示本地开发，没有做缓存。生产环境切记缓存。
（4.2）接口代码：（请注意代码注释）
const request = require(‘request’);
const sha1 = require(‘js-sha1’); // 引入 sha1 加密算法，需要使用 sha1 算法生成签名

app.post(‘/getWX’, function (req, res) {
const appId = ‘….’; // 测试公众号的 addId
const appSecret = ‘…..’ // 测试公众号的 appSecret
const url = req.body.url; // 初始化 jsdk 的页面 url，如果是单页应用记得截掉 url 的 #部分

promise.then(access_token => {
// 第二步，通过第一步的 access_token 获取票据 ticket
return new Promise((resolve, reject) => {
request(`https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=${access_token}&type=jsapi`, function (error, response, body) {
if (!error && response.statusCode == 200) {
let ticket = JSON.parse(body).ticket;
console.log(‘ 第二步获取 ticket：’,ticket);
resolve(ticket);
} else {
reject(error);
}
});
});

}).then(ticket => {
const createNonceStr = () => Math.random().toString(36).substr(2, 15);
const createTimeStamp = () => parseInt(new Date().getTime() / 1000) + ”;
const calcSignature = function (ticket, noncestr, ts, url) {
var str = `jsapi_ticket=${ticket}&noncestr=${noncestr}&timestamp=${ts}&url=${url}`;
shaObj = sha1(str); // 使用 sha1 加密算法
return shaObj;
}
const noncestr = createNonceStr(); // 随机字符串
const timestamp = createTimeStamp(); // 时间戳
const signature = calcSignature(ticket, noncestr, timestamp, url); // 通过 sha1 算法得到签名
res.send({
noncestr: noncestr,
timestamp: timestamp,
signature: signature,
})
}).catch(error =>{
console.log(error);
});
});

(5). 页面记得引用 wx-jsdk，进行页面初始化，点击 login 调起选择图片的 js 接口（单页应用的 hash 模式有个好处就是，你只需要在首页初始化一次 js-sdk，就可以任意切换页面调用，因为初始化的时候是把 #号及其后面的部分截取掉，而单页面的 hash 模式，页面切换只会改变# 后面部分。）
<template>
<div @click=”func”>login</div>
</template>
<script>
import wx from ‘wx’
export default {
name: ‘Login’,
data () {
return {}
},
mounted () {
this.axios({
url: ‘/api/getWX’,
method: ‘post’,
data: {
url: location.href.split(‘#’)[0] // 把 url 的 #及其后面的部分截取掉
}
}).then(res => {
console.log(‘——‘);
console.log(res.data);
wx.config({
debug: true, // 开发模式开启，便于调试是否成功初始化 js-sdk
appId: ‘…..’, // appId
timestamp: res.data.timestamp, // 时间戳
nonceStr: res.data.noncestr, // 随机数（注意，前面的 nonceStr 的 S 是大写的）
signature: res.data.signature, // 签名
jsApiList: [‘checkJsApi’, // 需要调用的 js-sdk 功能接口列表
‘chooseImage’,
‘previewImage’,
‘uploadImage’,
‘downloadImage’,
‘scanQRCode’
]
});
});
},
methods: {
func () {
wx.chooseImage({
count: 9, // 默认 9
sizeType: [‘original’, ‘compressed’], // 可以指定是原图还是压缩图，默认二者都有
sourceType: [‘album’, ‘camera’], // 可以指定来源是相册还是相机，默认二者都有
success: function (res) {
var localIds = res.localIds;
alert(localIds);
}
});
}
}
}
</script>

(6). 关注调试公众号：

(7). 手机微信端调试（通过微信访问我们的项目）：
(7.1) 初始化成功提示：

(7.2) 点击 login，调用 chooseImg 接口：

(7.3) 成功调用页面 alert：

5. 如果初始化失败，查看官网文档附录 5 - 常见错误及解决方法

6. 博客参考
参考 1
参考 2