微信本地调试js-sdk
本地调试js-sdk，因为初始化js-sdk的时还需要通过域名url才能生成签名，所以需要在本地模拟一个域名进行调试。下面是详细的操作步骤：
1. 首先需要让手机与调试的电脑位于同一个局域网
2. 让电脑能够通过自己设置的域名访问调试本地页面，例如我的页面index是http://127.0.0.1/basic.html，我想要通过电脑浏览器访问http://baidu.com/basic.html得到我的页面index
（1） 修改hosts ，windows路径（C:\Windows\System32\drivers\etc），先用#把 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}×tamp=${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' // 引用wx-jsdk
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>