Vue在history模式下调用微信分享

建议：如果工程还没有正式发布测试，项目依赖微信JSSDK，请尽量换成HASH路由模式

建议：如果工程还没有正式发布测试，项目依赖微信JSSDK，请尽量换成HASH路由模式

---

启用history模式, 需要后端配合设置 [配置请移步], History服务端配置忽略; 以下为vue前端部分; 

场景: 单页面详情页需要配置分享, 解决微信二次分享图片,链接丢失问题

---

思路如下:
1 . 由于苹果系统的特殊性, 需要单独设置页面的URL, 所以在路由跳出时判断路径

2 . 安卓直接location.href, 苹果系统单独给window下添加一个变量 "entryUrl" 保存

3 . 导出一个公众的方法, 用于获取微信的配置

备注：ios中微信调用JSSDK，初始进入失败，刷新下就好了，具体处理可以看官方文档

微信IOS公众号JSSDK，第一次签名失败，刷新后签名成功（99%的原因是签名URL不一致微信IOS公众号JSSDK，第一次签名失败，刷新后签名成功（99%的原因是签名URL不一致）微信IOS公众号JSSDK，第一次签名失败，刷新后签名成功（99%的原因是签名URL不一致

---

第一步: 安装微信JSDK

npm install -g weixin-js-sdk
// 安装完查看package.json, 是否有weixin-js-sdk版本信息
// ["weixin-js-sdk": "^1.4.0-test"]

---

第二步: 在Router配置文件下:

router.afterEach主要做了区分 Ios 跟 Android系统，IOS系统微信默认只需要一次URL注册授权（也就是页面初始化时候的URL），之后就不需要调取wx服务注册了，可以直接使用wx相关的jsApi

import Vue from 'vue'
import Router from 'vue-router'
import { getNativeModel, wechatAuthEffect } from '@/common/js/weXinShare'  // 分享JS

new Router({
  mode: 'history',
  base: '/app-duiyu',
  routes: [
    {
      path: '/shareGoodsDetail', // 商品分享
      name: 'shareGoodsDetail',
      component: resolve => require(['@/pages/shareGoodsDetail.vue'], resolve),
      meta: {
        title: '商品分享',
        allowShare: true
      }
    },
})


// 路由守卫
router.afterEach((to, from) => {
  // 需要调用的页面标识
  const allowShare = Boolean(to.meta.allowShare)
  if (!allowShare) {
    return false
  }


  // 通过wx自带属性__wxjs_is_wkwebview判断
  const isIOS = getNativeModel()
  let authUrl = window.location.href
  if (window.__wxjs_is_wkwebview || isIOS === 'ios') {
    if (!window.entryUrl) {
      window.entryUrl = authUrl
    }
  }

  wechatAuthEffect(isIOS, authUrl)
})

---

第三步: 调用微信SDK

1. 通过向后端服务传送当前URL，拿到该路径WX配置信息

2. 调用WX服务，检测配置信息，成功进入ready，否则进入error

3. error中针对SPA服务下IOS签名失效，做针对性处理即可

这里有关键信息，看重点标记部分！！

import axios from 'axios'
import wx from 'weixin-js-sdk'
import state from '@/store/state'

// 机型判断
export const getNativeModel = () => {
  const ua = navigator.userAgent.toLowerCase()
  if (/(Android|Linux|agent_android)/i.test(ua)) {
    return 'android'
  }

  if (/(iPhone|iPad|iPod|iOS|agent_ios)/i.test(ua)) {
    return 'ios'
  }
}


// 获取服务端微信配置服务
export const wechatAuthEffect = async (device, authUrl) => {
  if (!device) { return false }

  // 这里可以小优化一下：
  // IOS获取配置成功后，此方法可以不再执行，节约服务资源（有兴趣朋友可以写一个判断）

  let formalURL = '正式开发接口地址, 拿到公众号配置信息'

  // ios取第一次缓存的地址，android则需要每次动态授权
  let localURL = device === 'ios' ? window.entryUrl : authUrl

  // 请求服务端返回具体URL拿到的签名信息
  const { code, data, msg } = await axios.get(formalURL, {
    params: { url: encodeURIComponent(localURL) }
  })


  if (code === 200) {
    // vuex缓存信息，方便后面取，这里根据业务需要留存
    state.commit('SET_WX_CONFIG', data)
    setWxConfigEffect(data)
  } else {
    console.error(msg)
  }
}


// 微信注册服务
const setWxConfigEffect = (data) => {
  // 接口返回字段，这里看接口返回具体字段取值
  const { appId, timestamp, nonceStr, signature } = data

  // 需要调用的WXAPI
  const jsAPIList = [ 'checkJsApi', 'updateAppMessageShareData', 'updateTimelineShareData', 'onMenuShareAppMessage', 'onMenuShareTimeline' ]

  // 调用wx注册信息
  wx.config({
    debug: false,
    appId: appId, // 必填，公众号的唯一标识
    timestamp: timestamp, // 必填，生成签名的时间戳
    nonceStr: nonceStr, // 必填，生成签名的随机串
    signature: signature, // 必填，签名
    jsApiList: jsAPIList // 必填，需要调用的WXAPI
  })

  wx.checkJsApi({
    jsApiList: jsAPIList
  })

  // 延时执行，防止wx服务调用失败
  setTimeout(() => {
    wx.ready(() => {
      wx.updateAppMessageShareData(shareData)
      wx.updateTimelineShareData(shareData)
    })


    // 如果你项目H5是采用History, 请重点关注这里 ！！
    // 如果你项目H5是采用History, 请重点关注这里 ！！
    // 如果你项目H5是采用History, 请重点关注这里 ！！
    // 如果你项目H5是采用History, 请重点关注这里 ！！
    wx.error(res => {
      console.error('微信服务调用失败'，res)

      // 解决IOS第一次注册失败问题
      // 可以理解为：IOS下签名URL不一致时，重新去签名
      const isIOS = getNativeModel()
      if (isIOS === 'ios') {
        const RUL = res.realAuthUrl
        window.entryUrl = RUL && RUL[0]
        wechatAuthEffect(isIOS, '')
      }
    })
  }, 500)
}

踩坑区

1 . 报错invalid url domain, 检查公众号是否配置域名正确, (区分域名和项目路径)

2 . 报错invalid signature, 大部分是路径的问题, 检查下传值路径是否和配置的域名对应

3 . 最好是配置绑定顶级域名(3次机会/月), 这样即使使用二级域名也可以使用

4 . 新版貌似调用分享API, 还需要把旧版的方法加上即"jsApiList(↑ ↑)", 不然调用会有问题 !

参考链接:

WX-JSSDK
网页授权证书配置
安卓和苹果获取URL不同处理
配置了安全域名依然报invalid url domain
Vue项目history模式下微信分享总结