1.微信小程序支持使用扫一扫的功能

小程序文档：https://developers.weixin.qq.com/miniprogram/dev/component/web-view.html

h5页面引入：

 <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>

 2.在小程序开发者工具中是有自己调用的方法scanCode，但是仅限于在开发者工具内部使用，无需获取签名

但是需求是需要在h5中写功能，最后嵌入到小程序中，为的是一套代码既可以在公众号里使用又可以在小程序中使用

然而，小程序提供了web-view,引入之后就可以在h5中调用scanQRCode方法调起扫一扫功能了

1.wx.config()调用后台接口获取签名
  window.wx.config({
                        debug: false,//是否开启调试
                        appId: data.appId,//小程序appid
                        timestamp: data.timestamp,//时间搓，单位秒
                        nonceStr: data.nonceStr,//随机字符串
                        signature: data.signature,//签名md5
                        jsApiList: ['checkJsApi', 'scanQRCode'] //当前html需要用到的接口
                    });

2. 在ready之后调用scanQRCode方法
          window.wx.ready(function () {
                        window.wx.checkJsApi({
                            jsApiList: ['scanQRCode'],
                            success: function (res) {
                                console.log(res);
                            }
                        });
                        window.wx.scanQRCode({
                            needResult: 1,
                            scanType: ['qrCode', 'barCode'], 
                            success: function (res) {
                       
                                }).catch(err => {
                                   
                                });


                            },
                            error: function (res) {
                                if (res.errMsg.indexOf('function_not_exist') > 0) {
                                    alert('版本过低请升级');
                                }
                            }
                        });
                    });

3.在本次做这个功能期间遇到的问题

a.再调用后台获取config中数据时一直报invalid signature

            排查错误的结果是：后台获取的config里的值和返回给前台页面的值不一致，

b.之后报invalid url domain

            发现域名配置错误 域名配置的是测试环境域名而实际是推到开发坏境的域名

c.经过这次改动功能已经可以正常使用

           开开心心回家：第二天来又报nvalid signature  what？？？？？？？？？？？

d:又是排查

         其实功能已经可以实现，无奈我的是andriod手机，其实ios手机已经实现了此功能andriod手机不行，我自己一直拿着我的手机在测结果一直实现不了

        这一次的原因是url上有个参数，但是这个参数是必传的，但是又不能让这个参数暴漏在url上，故把参数获取到之后再拿掉，然而这就引起了另外一个问题，测试时比需把这个参数加上页面才能显示

       于是乎在把本页面嵌入到小程序中时url上加了个参数，奇迹出现了

       本页面访问时有参数，在页面上时url参数没有参数，这就导致发给后台的参数和实际参数不一致，就签名失败了

       ios是一直不变所以不会出现这情况

 

 

JSSDK使用步骤

步骤一：绑定域名

先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。

备注：登录后可在“开发者中心”查看对应的接口权限。

 

步骤二：引入JS文件

在需要调用JS接口的页面引入如下JS文件，（支持https）：http://res.wx.qq.com/open/js/jweixin-1.4.0.js

如需进一步提升服务稳定性，当上述资源不可访问时，可改访问：http://res2.wx.qq.com/open/js/jweixin-1.4.0.js （支持https）。

备注：支持使用 AMD/CMD 标准模块加载方法加载

 

步骤三：通过config接口注入权限验证配置

所有需要使用JS-SDK的页面必须先注入配置信息，否则将无法调用（同一个url仅需调用一次，对于变化url的SPA的web app可在每次url变化时进行调用,目前Android微信客户端不支持pushState的H5新特性，所以使用pushState来实现web app的页面会导致签名失败，此问题会在Android6.2中修复）。

wx.config({
    debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
    appId: '', // 必填，公众号的唯一标识
    timestamp: , // 必填，生成签名的时间戳
    nonceStr: '', // 必填，生成签名的随机串
    signature: '',// 必填，签名
    jsApiList: [] // 必填，需要使用的JS接口列表
});

签名算法见文末的附录1，所有JS接口列表见文末的附录2

 

步骤四：通过ready接口处理成功验证

wx.ready(function(){
    // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
});

 

步骤五：通过error接口处理失败验证

wx.error(function(res){
    // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
});