Vue項目history模式下微信分享爬坑總結(jié)
每回遇到微信分享都是一個坑,目前的商城項目使用Vue開發(fā),采用history的路由模式,配置微信分享又遇到了很多問題,最后終于解決了,現(xiàn)將解決的過程分享一下。
技術(shù)要點
Vue,history
常見問題及說明
debug模式下報false
這個沒得說,就是調(diào)用wx.config方法的參數(shù)錯誤造成的,請確認以下事項:
- 是否成功綁定了域名(域名校驗文件要能被訪問到)
- 使用最新的js-sdk文件,因為微信會改部分api
- config方法的參數(shù)是否傳正確了(拼寫錯誤、大小寫...)
- 需要使用的方法是否寫在了jsApiList中
- 獲取簽名的url需要decodeURIComponent
- 后臺的生成簽名的加密方法需要對照官方文檔
debug返回ok,分享不成功
- 確保代碼拼寫正確
- 分享鏈接域名或路徑必須與當前頁面對應的公眾號JS安全域名一致
- 接口調(diào)用需要放在wx.ready方法中
單頁項目(SPA)中的一些要點
所有需要使用JS-SDK的頁面必須先注入配置信息,否則將無法調(diào)用(同一個url僅需調(diào)用一次,對于變化url的SPA的web app可在每次url變化時進行調(diào)用,目前Android微信客戶端不支持pushState的H5新特性,所以使用pushState來實現(xiàn)web app的頁面會導致簽名失敗,此問題會在Android6.2中修復)。
上面那段話摘自官方文檔
開發(fā)者需要注意的事項:
- android和ios需要分開處理
- 需要在頁面url變化的時候重新調(diào)用wx.config方法,android獲取簽名的url就傳window.location.href
- Vue項目在切換頁面時,IOS中瀏覽器的url并不會改變,依舊是第一次進入頁面的地址,所以IOS獲取簽名的url需要傳第一次進入的頁面url
Code
router/index.js
......
import { wechatAuth } from "@/common/wechatConfig.js";
......
const router = new Router({
mode: "history",
base: process.env.BASE_URL,
routes: [
{
path: "/",
name: "home",
meta: {
title: "首頁",
showTabbar: true,
allowShare: true
},
},
{
path: "/cart",
name: "cart",
meta: {
title: "購物車",
showTabbar: true
},
component: () => import("./views/cart/index.vue")
}
......
]
});
router.afterEach((to, from) => {
let authUrl = `${window.location.origin}${to.fullPath}`;
let allowShare = !!to.meta.allowShare;
if (!!window.__wxjs_is_wkwebview) {// IOS
if (window.entryUrl == "" || window.entryUrl == undefined) {
window.entryUrl = authUrl; // 將后面的參數(shù)去除
}
wechatAuth(authUrl, "ios", allowShare);
} else {
// 安卓
setTimeout(function () {
wechatAuth(authUrl, "android", allowShare);
}, 500);
}
});
代碼要點:
- meta中的allowShare用于判斷頁面是否可分享
- window.__wxjs_is_wkwebview可用來判斷是否是微信IOS瀏覽器
- entryUrl是項目第一次進入的頁面的地址,將其緩存在window對象上
- 為什么安卓的時候要增加一個延時器,因為安卓會存在一些情況,就是即便簽名成功,但是還是會喚不起功能,這個貌似是一個比較穩(wěn)妥的解決辦法
wechatConfig.js
import http from "../api/http";
import store from "../store/store";
export const wechatAuth = async (authUrl, device, allowShare) => {
let shareConfig = {
title: "xx一站式服務(wù)平臺",
desc: "xxxx",
link: allowShare ? authUrl : window.location.origin,
imgUrl: window.location.origin + "/share.png"
};
let authRes = await http.get("/pfront/wxauth/jsconfig", {
params: {
url: decodeURIComponent(device == "ios" ? window.entryUrl : authUrl)
}
});
if (authRes && authRes.code == 101) {
wx.config({
//debug: true,
appId: authRes.data.appId,
timestamp: authRes.data.timestamp,
nonceStr: authRes.data.nonceStr,
signature: authRes.data.signature,
jsApiList: ["updateAppMessageShareData", "updateTimelineShareData", "onMenuShareAppMessage", "onMenuShareTimeline"]
});
wx.ready(() => {
wx.updateAppMessageShareData({
title: shareConfig.title,
desc: shareConfig.desc,
link: shareConfig.link,
imgUrl: shareConfig.imgUrl,
success: function () {//設(shè)置成功
//shareSuccessCallback();
}
});
wx.updateTimelineShareData({
title: shareConfig.title,
link: shareConfig.link,
imgUrl: shareConfig.imgUrl,
success: function () {//設(shè)置成功
//shareSuccessCallback();
}
});
wx.onMenuShareTimeline({
title: shareConfig.title,
link: shareConfig.link,
imgUrl: shareConfig.imgUrl,
success: function () {
shareSuccessCallback();
}
});
wx.onMenuShareAppMessage({
title: shareConfig.title,
desc: shareConfig.desc,
link: shareConfig.link,
imgUrl: shareConfig.imgUrl,
success: function () {
shareSuccessCallback();
}
});
});
}
};
function shareSuccessCallback() {
if (!store.state.user.uid) {
return false;
}
store.state.cs.stream({
eid: "share",
tpc: "all",
data: {
uid: store.state.user.uid,
truename: store.state.user.truename || ""
}
});
http.get("/pfront/member/share_score", {
params: {
uid: store.state.user.uid
}
});
}
總結(jié)
原先計劃不能分享的頁面就使用hideMenuItems方法隱藏掉相關(guān)按鈕,在ios下試了一下,有些bug:顯示按鈕的頁面切換的影藏按鈕的頁面,分享按鈕有時依然存在,刷新就沒問題,估計又是一個深坑,沒精力在折騰了,就改為隱私頁面分享到首頁,公共頁面分享原地址,如果有什么好的解決辦法,請聯(lián)系我!
一開始我有參考sf上的一篇博客http://chabaoo.cn/article/158685.htm,按照上面的代碼,android手機都能成功,但是IOS有一個奇怪的問題,就是分享間歇性的失效,同一個頁面,剛剛調(diào)起分享成功,再試一次就失?。]有圖標、title,只能跳轉(zhuǎn)到首頁),經(jīng)過“不斷”努力的嘗試,應該是解決了問題,說一下過程:
- 一開始以為是異步喚起沒成功的問題,就和android一樣給IOS調(diào)用wechatAuth方法也加了個定時器,測了一遍沒效果,放棄
- 起始js-sdk是通過npm安裝的,版本上帶了個test,有點不放心,改為直接使用script標簽引用官方的版本
- 重新讀了一遍文檔,發(fā)現(xiàn)onMenuShareTimeline等方法即將廢棄,就把jsApiList改為jsApiList:['updateAppMessageShareData','updateTimelineShareData'],改后就變成了IOS可以成功,android分享失敗
- 百度updateAppMessageShareData安卓失敗原因,參考這個鏈接http://chabaoo.cn/article/158690.htm,把老的api也加到j(luò)sApiList中,仔細、反復試了試兩種設(shè)備都ok,好像是成功了,說"好像"是因為心里沒底啊,各種“魔法”代碼!
最后,在這里希望騰訊官方能不能走點心,更新文檔及時點,demo能不能提供完整點....
參考鏈接
http://chabaoo.cn/article/158685.htm
http://chabaoo.cn/article/158693.htm
http://chabaoo.cn/article/158690.htm
https://github.com/vuejs/vue-router/issues/481
以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
Vue3+antDesignVue實現(xiàn)表單校驗的方法
這篇文章主要為大家詳細介紹了基于Vue3和antDesignVue實現(xiàn)表單校驗的方法,文中的示例代碼講解詳細,具有一定的參考價值,需要的小伙伴可以了解下2024-01-01
Vue實現(xiàn)登錄保存token并校驗實現(xiàn)保存登錄狀態(tài)的操作代碼
這篇文章主要介紹了Vue實現(xiàn)登錄保存token并校驗實現(xiàn)保存登錄狀態(tài),本文通過示例代碼給大家介紹的非常詳細,感興趣的朋友跟隨小編一起看看吧2024-02-02

