微信端H5的相关问题总结
微信端路由(带[#])跳转问题
问题描述：在微信端页面路由跳转成功，但将跳转页分享出去会发现分享出去的链接为初始页面链接，导致与预期不一致的结果。
问题原因：在微信端浏览器中由路由跳转的spa应用，url将不会刷新，尤其体现在ios端
解决方案：不使用路由跳转，改成使用location.href等方式跳转
代码参考如下
this.$router.push({name: 'xxx'}） -> location.href('xxx')
微信二次分享问题
- 微信二次分享需要使用jssdk，因此需要引用
weixin-js-sdk（注：引用方式可以全局引用；也可以使用es6模块的方式引用，使用npm install weixin-js-sdk安装，然后通过import wx from 'weixin-js-sdk'引用）。 - 微信 jssdk 中的api
wx.config({xxx})中需要提供签名（signature字段），签名通过发送请求至https://xxx/signature?_=new Date().getTime()&url=encodeURIComponent(url)获取，此处需要注意一个细节url，url必须跟当前页面一致（hash部分不需要）,否则获得的签名在wx.config({xxx})的校验中将会报签名不合法的错误。
微信二次分享配置详情
import axios from 'axios'
import wx from 'weixin-js-sdk'
const wex = {
shareTwo(obj) {
obj = Object.assign({}, {
title: 'xxx', // 二次分享标题
msg: 'xxx', // 二次分享内容
imgUrl: 'xxx',// 二次分享图标
url: window.location.href, // 当前页面地址（注：！！特别重要，要用于获取签名）
link: '' // 二次分享的链接地址
}, obj)
let wxReady = false // 设置wxReady的状态为false
let wxConfigParam = { // 基本的一些wxConfig的一些配置
debug: false,
appId: 'xxx',
jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage', 'onMenuShareQQ', 'onMenuShareWeibo', 'onMenuShareQZone'] // 配置需要调用的jsApi
}
axios({
url: `https://xxx/signature?_=${new Date().getTime()}&url=${encodeURIComponent(obj.url)}`,
method: 'get'
}).then(function (res) {
if (res.status === 200 && res.data) {
return res.data
} else {
return Promise.reject()
}
}).then(function (res) {
if (res.code === 0) {
// 请求成功后获取签名等信息，并将其写入配置项
wxConfigParam.timestamp = res.data.timestamp
wxConfigParam.nonceStr = res.data.nonceStr
wxConfigParam.signature = res.data.signature
// wx.config()是所有步骤的前提，这步报错将无法继续后续操作
wx.config(wxConfigParam)
if (wx && !wxReady) {
wx.ready(function () {
let commonShareData = {
title: obj.title, // 分享标题
link: obj.link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
desc: obj.msg, // 分享描述
imgUrl: obj.imgUrl, // 分享图标
success: function () {
wxReady = true
}
}
wx.onMenuShareTimeline(commonShareData) // “分享到朋友圈”
wx.onMenuShareAppMessage(commonShareData) // “分享给朋友”
wx.onMenuShareWeibo(commonShareData) // “分享到腾讯微博”
wx.onMenuShareQQ(commonShareData) // “分享到QQ”
wx.onMenuShareQZone(commonShareData) // “分享到QQ空间”
})
}
}
})
}
}
export {wex}
工具类总结
下面将提供几个比较实用的工具类
- 判断是否是ios端
let isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)
- 判断安卓终端
let isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1
- 判断是否在微信端
let isWeiXin = ua.match(/MicroMessenger/i) == 'micromessenger'
- 获取想要获取的查询参数
function getQueryString(name) {
const reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i')
const w = window.location.search.split('?')
const r = w.length === 2 && w[1] || ''
let reStr = ''
let urlArr = []
w.length === 2 && w[1].replace("?", '') && w[1].split('&').forEach((v) => {
let i = v.split('=')
urlArr[i[0]] = i[1]
})
if (name) {
reStr = r.match(reg) !== null ? r.match(reg)[2] : false
return reStr
} else {
return urlArr
}
}
- 获取所有的查询参数
/**
* 获取URL所有查询参数
* @return {Object} searchObj
*/
function getParams() {
let name = '', value = '', searchObj = {};
let str = location.href; //取得整个地址栏
let questionMark = str.indexOf('?')
let hashMark = str.indexOf('#')
str = questionMark > hashMark ? str.substring(questionMark + 1) : str = str.substring(questionMark + 1, hashMark)
let arr = str.split("&"); //各个参数放到数组里
for (var i = 0; i < arr.length; i++) {
let num = arr[i].indexOf("=");
if (num > 0) {
name = arr[i].substring(0, num);
value = arr[i].substr(num + 1);
searchObj[name] = value;
}
}
return searchObj
}
- 将查询参数对象转换为查询参数字符串
/**
* 将查询参数对象转换为查询参数字符串
* @param {Object} searchObj
* @return {String} searchOptions
* */
function ObjToSearchOptions(searchObj, otherSearchObj = {}) {
searchObj = Object.assign(searchObj, otherSearchObj) // 进行参数的合并（此处为浅拷贝）
let searchArr = []
for (let [key, value] of Object.entries(searchObj)) {
value !== '' && value !== undefined && value !== null && searchArr.push(`${key}=${value}`)
}
return `?${searchArr.join('&')}`
}
- 不同终端（IOS，Android，...）调用起好车主App的方案
/**
* jumpDownloadView：跳转到好车主app，并打开指定页面
* @param {String} targetUrl
* */
let jumpDownloadView = function (targetUrl) {
// 配置打开app后的跳转地址
let href = targetUrl || URL.POLICY + '/activities/invite/index.html'
if (isiOS) {
// IOS平台
try {
// 若支持 carowner 协议（注：也就是安装了好车主APP）
window.location.href = 'carowner://?url=' + encodeURIComponent(href)
} catch (e) {
// 未安装好车主APP的跳转下载
window.location.href = 'http://a.app.qq.com/o/simple.jsp?pkgname=com.pingan.carowner#rd'
}
} else if (isAndroid) {
// Android平台
window.location.href = 'http://a.app.qq.com/o/simple.jsp?pkgname=com.pingan.carowner&android_schema=pinganhczapp://com.pingan.carowner?url=web://' + href
} else {
// 其他平台
window.location.href = 'http://a.app.qq.com/o/simple.jsp?pkgname=com.pingan.carowner#rd'
}
}