微信网页开发，JSSDK配置，uniapp开发h5 调用微信sdk 全网最全指南！！！！ 血泪史！！!

1.绑定域名（项目发布后域名）

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

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

2.引入文件

        1-1：js文件

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

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

        1-2: npm

        安装：npm install wexin-js-sdk --save

        页面使用

        import jweixin from 'weixin-js-sdk'; // 使用js-sdk

3.通过config接口注入权限验证配置

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

        1-1：调用config方法所需参数需要后端提供（出于安全考虑，开发者必须在服务器端实现签名的逻辑）

        1-2：前端提供当前页面url （地址提供错误会导致签名失败）

        url中有’#‘，使用location.href.split('#')[0]获取

        url中没有’#‘但有参数，使用encodeURIComponent(location.href.split('#')[0])获取

        1-3:微信 JS 接口签名校验工具：微信 JS 接口签名校验工具

        wx.config({

            debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。

            appId: '', // 必填，公众号的唯一标识

            timestamp: , // 必填，生成签名的时间戳：当前时间戳（单位秒）字符串类型

            nonceStr: '', // 必填，生成签名的随机串：随即生成的字符串

            signature: '',// 必填，签名

            jsApiList: [‘’] // 必填，需要使用的JS接口列表：jsApiList必填，即便是没有也要写成 sApiList: ['']

          });

注：本地测试报错：invalid url domain，因为当前页面所在域名（本机ip）与使用的appid没有绑定。

本地测试config配置成功方法：

        1-1：微信给我们提供了一个测试账号：微信公众平台

        微信扫码即可使用

        1-2：配置域名（即项目运行ip+端口号）

        

        1-3：使用提供的测试账号appID、appsecret生成signature，生成网址：微信 JS 接口签名校验工具

        参考文档：关于微信SDK的一些理解和实践 - 掘金；uniapp开发h5 调用微信sdk 全网最全指南！！！！ 血泪史！！!_前端微信环境 识别不了路径参数 h5可以-CSDN博客