微信jsSdk本地调试

2019-12-13

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

首先需要让手机与调试的电脑位于同一个局域网
让电脑能够通过自己设置的域名访问调试本地页面，例如我的页面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：
下载安装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 express = require('express')
const app = express()
const request = require('request');
const sha1 = require('js-sha1'); // 引入sha1加密算法，需要使用sha1算法生成签名

//需要设置CORS跨域访问，不然本地调用接口形成跨域访问不了
app.all('*', function (req, res, next) {
    res.header("Access-Control-Allow-Origin", "*");
    res.header('Access-Control-Allow-Headers', 'Content-Type, Content-Length, Authorization, Accept, X-Requested-With , yourHeaderFeild');
    res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS");
    res.header("X-Powered-By", ' 3.2.1');
    res.header("Content-Type", "application/json;charset=utf-8");
    next();
});


app.post('/api/getWX', function (req, res) {
    const appId = 'wx8b1ec504d512ef43';   // 测试公众号的addId   
    const appSecret = '9c0c55899ff3c802ae417d6145b6cceb'  // 测试公众号的appSecret
    // console.log(req)
    //const url = req.body.url; // 初始化jsdk的页面url，如果是单页应用记得截掉url的#部分
    const url = 'http://ouyang.com:8080/'
    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);
    });
});

app.listen(3000, () => console.log('Example app listening on port 3000!'))

(5)页面记得引用wx-jsdk，进行页面初始化，点击login调起选择图片的js接口（单页应用的hash模式有个好处就是，你只需要在首页初始化一次js-sdk，就可以任意切换页面调用，因为初始化的时候是把#号及其后面的部分截取掉，而单页面的hash模式，页面切换只会改变#后面部分。）

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <!-- 引入微信js-sdk start -->
    <script src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
    <title>Document</title>
</head>

<body>
    <button id="btn">点击请求数据</button> //点击按钮即可初始化微信jsSdk了

    <script>
        axios({
            url: 'http://ouyang.com:3000/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'
                ]
            });
        });
    </script>
</body>

</html>

(6)关注调试公众号：
(7)手机微信端调试（通过微信访问我们的项目）：