Vue项目使用JS-SDK指南

概述

微信JS-SDK是微信公众平台面向网页开发者提供的基于微信内的网页开发工具包。  

通过使用微信JS-SDK，网页开发者可借助微信高效地使用拍照、选图、语音、位置等手机系统的能力，同时可以直接使用微信分享、扫一扫、卡券、支付等微信特有的能力，为微信用户提供更优质的网页体验。 

 此文档面向网页开发者介绍微信JS-SDK如何使用及相关注意事项。  详情见官方文档💐

JS-SDK使用步骤

步骤一：绑定域名

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

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

步骤二：引入JS文件、使用JS-SDK

//引入
npm install jweixin-js --save

//使用
import wx from 'jweixin-js';

步骤三：通过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接口列表
});

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

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

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

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

History模式

iOS环境内，跳转页面后微信分享签名错误：the permission value is offline verifying

原因：SPA应用中，把第一次打开的页面叫做进入页，之后通过路由跳转的页面叫做当前页。iOS环境内，浏览器记录的是进入页的url，Android环境记录的是当前页url。    🌰举个例子：https://www.my-app.com/home  ->  https://www.my-app.com/user，跳转后路由地址更换了，但iOS记录的实际url依然是刚进入时的https://www.my-app.com/home。  在user页使用home页的url签名，所以出现错误。

解决方案：

1、在全局前置守卫中保存进入页url

router.beforeEach((to, from, next) => {  
    if (from.name === null) {    
        window.enterUrl = window.location.href  
    }  
    next()
})

2、签名接口传入url时判断

iOS使用window.enterUrl   |   Android使用window.location.href

Hash模式

1、签名传入的url是：location.href.split('#')[0]

2、安卓环境内微信分享出去的链接，路由和参数被截断了。  解决方案是：在路由的#前面加上?号，代码如下：

let shareLink = 'https://my-app.com/app/#/home?id=1';  
shareLink = shareLink.replace('/#/', '/?#/');

其他问题整理

1、自定义分享时分享链接中带有中文，要进行encodeURIComponent()，否则iOS内分享失败

2、分享缩略图最好不要超过32KB