vue 传参 微信_vue hash模式下微信分享，实现参数传递

背景

vue项目hash模式下，需要实现微信分享。支持传递多参、无参、以及指定跳转页面、可配置

实现思路

由于hash模式 #符号的存在，在不同平台会存在兼容性问题。会导致 分享出去的页面不能跳转到指定页面。所以思路就是 将 页面路径 作为一个参数分享出去(本例 称它为 path参数)，打开分享链接后 我们根据path参数 来还原URL，进行重定向。

主要操作

1、重定向判断

在进入项目前，进行url判断：

1、needRedirect 是否需要重定向：主要看path参数是否存在

2、返回homeUrl：页面的正常路径。将形如 http://wxh5.gek6.com/bystu/?path=/works&dudu=2&haha=123 转换成 http://wxh5.gek6.com/bystu/#/works?dudu=2&haha=123

/**

* 页面重定向-确保页面链接正常

* 支持多参、无参、指定页面

* @returns {{needRedirect: *, homeUrl: string}}*/urlResetForWcShare: function () {

let needRedirect= false, homeUrl = '', searchObReal = {}, searchstr = ''let oriUrls= window.location.href.split('?')//let baseShareURl = 'http://wxh5.gek6.com/bystu/'

let baseShareURl = window.location.origin +window.location.pathname

homeUrl= baseShareURl +`#${config.platform[WECHAT.SHARE_PAGE_PATH]}`if (oriUrls.length > 1) {

let searchUrls= oriUrls[1].split('#')

let searchUrlReal= searchUrls[0]

let searchOb=qs.parse(searchUrlReal)

let {path}=searchOb

config.platform[WECHAT.SHARE_EXTRA_PM_KEYS].forEach(item=> searchObReal[item] =searchOb[item])if(config.platform[WECHAT.SHARE_EXTRA_PM_KEYS].length)

searchstr= `?${qs.stringify(searchObReal)}`

needRedirect= path || config.platform[WECHAT.SHARE_EXTRA_PM_KEYS].length !==Object.keys(searchOb).length

homeUrl+=searchstr

}//alert(`页面重定向 baseShareURl: ${window.location.origin + window.location.pathname + `#${config.platform[WECHAT.SHARE_PAGE_PATH]}` + searchstr}`)

return{

needRedirect,

homeUrl,

search: searchObReal

}

}

2、组装分享出去的链接url

主要是要携带一些参数：包括path参数，其他参数。

/**

* 组装微信分享出去的链接url

* @param pm // 附带参数

* @returns {string}*/wrapWcShareLink: function (pm={}) {

config.platform[WECHAT.SHARE_EXTRA_PM_KEYS].forEach(item=>{if (!pm[item])throw newError(`微信分享链接缺少额外参数: ${item}`)

})

pm.path= config.platform[WECHAT.SHARE_PAGE_PATH] //根据path来设置初始页面 当前为根路由

return window.location.origin + window.location.pathname + '?' +qs.stringify(pm)

},

3、实现配置化

将 分享链接里的携带参数 从配置文件读取

platform: {

[WECHAT.SHARE_EXTRA_PM_KEYS]: ['dudu'], //微信分享-附带参数 键名 集合

[WECHAT.SHARE_PAGE_PATH]: '/', //微信分享-指定页面

},

使用

1、根文件 app.vue：

asynccreated(){

let urlResetRes=browserUtil.urlResetForWcShare()

let {needRedirect, homeUrl, search}=urlResetResif(needRedirect) {

window.location.href=homeUrl//location.reload()

} else{

let oldDudu=storage.getLocalStorage(LOCALDATA.WORKS_ID)if (!oldDudu || search.dudu !=oldDudu)

storage.setLocalStorage(LOCALDATA.WORKS_ID, search.dudu)

wx_jssdk.sdk_init(homeUrl);

}

}

2、初始化jssdk。

asyncsdk_init(homeUrl){//获取签名数据

let sign;try{

sign= awaitgetSign(homeUrl); // 访问接口，获取签名数据

}catch(err) {

console.log(err)//alert(JSON.stringify(err))

}//console.log('获取签名成功')//console.log(sign);

wx.config({

debug:false, //开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。

appId: sign.appid, //必填，公众号的唯一标识

timestamp: sign.timestamp, //必填，生成签名的时间戳

nonceStr: sign.noncestr, //必填，生成签名的随机串

signature: sign.signature, //必填，签名

jsApiList: ["onMenuShareTimeline", "onMenuShareAppMessage", "onMenuShareQQ", "onMenuShareQZone", "onMenuShareWeibo", 'updateAppMessageShareData', 'updateTimelineShareData'] //必填，需要使用的JS接口列表

});

}

额外想法：

想兼容这样一种情形：页面链接参数有垃圾参数(不属于配置文件里的额外参数)。

此时 使用 分享链接(无#符号)如 http://wxh5.gek6.com/bystu/?path=/works&dudu=2&haha=123 仍可支持分享。但使用 原始链接(有#)如 http://wxh5.gek6.com/bystu/#/works?dudu=2&haha=123，分享不可用。实质是 window.location.href 在只改变参数的情形下，调用不起作用。

解决思路是： 在这种情形下 调用 reload()。需要注意兼容原来的功能(同时 location.href，reload 在其他情形会无限循环。所以关键是 判断是否为 此情形。暂未解决！！！遗憾

优化想法：

使用伪静态传参，但需要后端的配合(拦截跳转到对应的页面)。链接形如：http://wxh5.gek6.com/bystu/we_2

尝试代码

/**

* 组装微信分享出去的链接url

* @param pm // 附带参数

* @returns {string}*/wrapWcShareLink: function (pm={}) {

let wePmStr= '', keysSize =config.platform[WECHAT.SHARE_EXTRA_PM_KEYS].length

config.platform[WECHAT.SHARE_EXTRA_PM_KEYS].forEach((item, index)=>{if (!pm[item])throw newError(`微信分享链接缺少额外参数: ${item}`)

wePmStr+=`we_${item}`if (index+1

wePmStr+= '/'})return window.location.origin + window.location.pathname +wePmStr},/**

* 页面重定向-确保页面链接正常

* 支持多参、无参、指定页面

* @returns {{needRedirect: boolean, homeUrl: string, search: {}}}*/urlResetForWcShare: function () {

let needRedirect= false, homeUrl = '', searchObReal = {}, searchstr = ''

if(location.search)

needRedirect= true //二次分享 会自动加search

let baseShareURl = window.location.origin +window.location.pathname

let shareFlagIndex= window.location.pathname.indexOf('we_')if (shareFlagIndex > 0) {

needRedirect= truebaseShareURl= window.location.origin + window.location.pathname.substring(0, shareFlagIndex)

let weStr=location.pathname.substring( shareFlagIndex)

weStr= weStr.replace(/we_/g, '')

let wePms= weStr.split('/')if (wePms.length !==config.platform[WECHAT.SHARE_EXTRA_PM_KEYS].length)throw newError(`非法链接，参数不匹配`)

config.platform[WECHAT.SHARE_EXTRA_PM_KEYS].forEach((item, index)=> searchObReal[item] =wePms[index])if(config.platform[WECHAT.SHARE_EXTRA_PM_KEYS].length)

searchstr= `?${qs.stringify(searchObReal)}`

}

//baseShareURl= 'http://wxh5.gek6.com/bystu/'homeUrl= baseShareURl + `#${config.platform[WECHAT.SHARE_PAGE_PATH]}` +searchstr

alert(`页面重定向 homeUrl: ${homeUrl}`)return{

needRedirect,

homeUrl,

search: searchObReal

}}