H5页面跳转小程序

H5页面跳转小程序实现

环境：

• vue2.X
• 公众号内

问题：

• 生成签名：config:invalid signature

  1. 确认签名算法正确，可用 页面工具进行校验。
  2. 确认config中nonceStr（js中驼峰标准大写S）, timestamp与用以签名中的对应noncestr, timestamp一致。
  3. 确认url是页面完整的url(请在当前页面alert(location.href.split(’#’)[0])确认)，包括http(s)://部分，以及’？‘后面的GET参数部分,但不包括’#'hash后面的部分
  4. 确认 config 中的 appid 与用来获取 jsapi_ticket 的 appid 一致
  5. 确保一定缓存access_token和jsapi_ticket。

  html的静态页面在前端通过ajax将url传到后台签名，前端需要用js获取当前页面除去’#‘hash部分的链接（可用location.href.split(’#’)[0]获取,而且需要encodeURIComponent），因为页面一旦分享，微信客户端会在你的链接末尾加入其它参数，如果不是动态获取当前链接，将导致分享后的页面签名失败。

  步骤：

  • 首先你在页面alert(location.href.split(’#’)[0])
  • 然后你再打印出动态获取的url是否和你alert的地址是否一样。一定要一模一样，包括大小写
  • 如果发现不一样，那就按照自己的需求改。反正要一样。验证签名一定可以通过的。

• 需要配置白名单、js安全域名到公众号

• vue项目中不能直接用template包裹，用

  <script type="text/wxtag-template"></script>
  

• <script type="text/wxtag-template"></script>里面的样式rem不生效，最好使用px

• 静态图片文件不要写在<script type="text/wxtag-template"></script>里面，<img src="./img.png">

详细步骤查看：

官方文档-开放标签说明

参考链接：

https://blog.csdn.net/Dengrz/article/details/76289972