建议:如果工程还没有正式发布测试,项目依赖微信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模式下微信分享总结