乐趣区

本地调式微信js-sdk

本地调试 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 的 #部分

let promise = new Promise((resolve, reject) => {
// 第一步,通过 appId 和 appSecret 获取 access_token
request(`https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=${appId}&secret=${appSecret}`, function (error, response, body) {
if (!error && response.statusCode == 200) {
let access_token = JSON.parse(body).access_token;
console.log(‘ 第一步获取 access_token:’, access_token);
resolve(access_token);
} else {
reject(error);
}
});
});

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

退出移动版