记录vue使用微信jssdk的各种问题

微信jssdk使用

需要注意的是

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

如果在单页面的应用了，ios跟安卓每次切换路由如果要调用jssdk接口，都需要重新签名

判断是否为微信环境，这里使用Vux组件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
import {WechatPlugin,AjaxPlugin} from 'vux';

let inBrowser = typeof window !== 'undefined'
// eslint-disable-next-line no-undef
let inWeex = typeof WXEnvironment !== 'undefined' && !!WXEnvironment.platform;
// eslint-disable-next-line no-undef
let UA = inBrowser && window.navigator.userAgent.toLowerCase();
let isWechat = UA.match(/MicroMessenger/i);
sessionStorage.setItem('initLink', null);
if (isWechat) {
  store.dispatch('setWechatEnvironment');
  Vue.use(WechatPlugin);
  Vue.use(AjaxPlugin);
}

我们需要在每次路由切换是都保存一下url，在hook.js路由守卫编辑代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
import store from '@/store/index';

export default (router) => {
  router.beforeEach(function (to, from, next) {
    ...
  });
  //
  router.afterEach(function (to) {
    if (store.state.common.wechatEnvironment) {
      // 非ios设备，切换路由时候进行重新签名
      if (window.__wxjs_is_wkwebview !== true) {
        let _url = window.location.origin + to.fullPath;
        sessionStorage.setItem('initLink', _url);
      }
      // ios 设备进入页面则进行js-sdk签名
      if (window.__wxjs_is_wkwebview === true) {
        let _url = window.location.href.split('#')[0];
        sessionStorage.setItem('initLink', _url);
      }
    }
  })
}

使用的是vux组件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
import Vue from 'vue'
import WechatPlugin from "@/plugins/wechat";
import {AjaxPlugin} from "vux";

export default {
    install(Vue){
        Vue.use(WechatPlugin);
        Vue.use(AjaxPlugin);

        Vue.prototype.$getWechatConfig = function(params) {
             let _url = sessionStorage.getItem('initLink');
             Vue.http.get(`xxx.xxx.com?location_url=${encodeURIComponent(_url)}`, {}).then(data => {
               if (data && data.data && parseInt(data.data.errcode) === 0) {
                 let content = data.data.content;
                 let wechatData = {
                   debug: process.env.NODE_ENV !== 'production',
                   // debug: true,
                   appId: content.appId,
                   timestamp: content.timestamp,
                   nonceStr: content.nonceStr,
                   signature: content.signature,
                   jsApiList: appConfig.jsApiList
                 };
                 Vue.wechat.config(wechatData);
                 setTimeout(() => {
                   if (params.timeline) {
                     Vue.wechat.updateTimelineShareData({
                        title: 'xxx',
                        link: 'xxx',
                        imgUrl: 'xxx'
                     });
                   }
                   if (params.appMessage) {
                     Vue.wechat.updateAppMessageShareData({
                        title: 'xxx',
                        link: 'xxx',
                        mgUrl: 'xxx'
                     })
                   }
                 }, 1000);
               }
             })
        }
    }
}

开发中常见的问题

1.如果第一次进入页面的时候微信分享配置失效，请尝试使用延时解决，可以逐渐加大延迟尝试，尽量在同一个方法里面完成获取签名、配置签名、配置分享信息这些操作，否者会出现permission denied的错误

2.配置分享信息的url必须带有http://或者https://，否者会提示一下信息：fail link must be in js secure domain list

3.如果分享配置里的图片打不开，分享配置也会报错，这一点请注意

4.传给后台接口签名的url要使用encodeURIComponent处理，否者或签名错误

5.配置签名的时候要在jsApiList里面加上需要使用的api名称，否者或出现the permission value is offline verifying错误

在vue生命周期里面的

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<script>
export default {
    data(){
        return {}
    },
    created() {

    },
    methods:{
        getPageData() {
            this.$api.getPageData({}).then(res => {
                if(res.status === 200){
                    this.configShareMessage(res.shareConfig)
                }
            })
        }
        configShareMessage(shareData) {
          let data = {
            timeline: {
                title: data.share_title,
                link: data.share_url,
                imgUrl: data.share_image
            },
            appMessage: {
                title: data.share_title,
                desc: data.share_desc,
                link: data.share_url,
                imgUrl: data.share_image
            }
          }
          this.$getWechatConfig(data)
        }
    }
}
</script>