如何在UNI-APP内开发微信公众号（H5）JSSDK

参考文章

UNI-APP 开发微信公众号（H5）JSSDK 的使用方式
微信内H5使用JSSDK分享！！！注意目前Hbuilderx2.3.7版本存在问题！！！
vue-router与location.href的用法区别
微信网页开发 JSSDK 分享功能，安卓和调试工具都成功，IOS无法使用？

源码地址

uniapp-component
请参考 utils/wxShare.js

实现

1. 安装
   全局引入：

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

2. jssdk使用
   全局引入之后，我们在微信内访问我们的网页应用时，会新增一个全局变量jWeixin。
   所有需要使用 JS-SDK 的页面必须先注入配置信息，否则将无法调用。

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

signature（签名）生成规则，可参考微信 JS 接口签名校验工具，验签中有一个很重要的参数url（当前网页的URL，不包含#及其后面部分。注意：对于没有只有域名没有 path 的 URL ，浏览器会自动加上 / 作为 path，如打开 http://qq.com 则获取到的 URL 为 http://qq.com/）。

然而，我们的H5应用有一个引导页，用户访问域名时会先进入引导页，再根据链接上的参数路由到不同功能页。当我从www.demo.com?type=1路由到www.demo.com/pages/main/main的时候，history发生改变了。然后不可思议的一幕出现了，我验签使用的url时www.demo.com/pages/main/main，生成的签名和微信 JS 接口签名校验工具生成的签名一样，但jWeixin.config一直提示我 realAuthuUrl[ www.demo.com?type=1，www.demo.com/pages/main/main]。

怎么办呢？微信社区有一篇贴子：微信网页开发 JSSDK 分享功能，安卓和调试工具都成功，IOS无法使用？里官方的一段回复引起了我的注意。

我使用UNI-APP开发的是SPA应用。直接说重点，vue-router与location.href的用法区别，vue-router不会重新加载页面，而location.href会重新加载页面。

我使用UNI-APP开发的是SPA应用，并且路由变化不会重新加载页面。那我在A页面给window内新增一个变量a，赋值1，我在B页面能使用window.a吗？可以。

我使用UNI-APP开发的是SPA应用，并且路由变化不会重新加载页面，全局可以使用jWeixin。用户进入A页面，我在App.vue的onLaunch里执行jWeixin.config，jWeixin.ready成功。执行完成之后再在A页面内变更路由。在B页面继续使用jWeixin执行jWeixin.ready吗？亲测可以。

事情就变得简单了。

当用户访问H5应用时，在A页面执行jWeixin.config，声明好我用到得api，然后无论路由到任何B页面，我都可以使用jWeixin.ready自由定制我的分享页了。

其实，重点只有一个，执行jWeixin.config时不要产生任何history。

补个坑吧！
微信内，window.location.replace 的表现形式与window.location.href 一样。