您好,登錄后才能下訂單哦!
每回遇到微信分享都是一個坑,目前的商城項目使用Vue開發(fā),采用history的路由模式,配置微信分享又遇到了很多問題,最后終于解決了,現(xiàn)將解決的過程分享一下。
技術(shù)要點
Vue,history
常見問題及說明
debug模式下報false
這個沒得說,就是調(diào)用wx.config方法的參數(shù)錯誤造成的,請確認以下事項:
debug返回ok,分享不成功
單頁項目(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ā)者需要注意的事項:
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); } });
代碼要點:
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上的一篇博客https://www.jb51.net/article/158685.htm,按照上面的代碼,android手機都能成功,但是IOS有一個奇怪的問題,就是分享間歇性的失效,同一個頁面,剛剛調(diào)起分享成功,再試一次就失?。]有圖標、title,只能跳轉(zhuǎn)到首頁),經(jīng)過“不斷”努力的嘗試,應(yīng)該是解決了問題,說一下過程:
最后,在這里希望騰訊官方能不能走點心,更新文檔及時點,demo能不能提供完整點....
參考鏈接
https://www.jb51.net/article/158685.htm
https://www.jb51.net/article/158693.htm
https://www.jb51.net/article/158690.htm
https://github.com/vuejs/vue-router/issues/481
以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持億速云。
免責聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。