每回遇到微信分享都是一個坑，目前的商城項目使用Vue開發，采用history的路由模式，配置微信分享又遇到了很多問題，最后終于解決了，現將解決的過程分享一下。
技術要點
Vue，history
常見問題及說明
debug模式下報false
這個沒得說，就是調用wx.config方法的參數錯誤造成的，請確認以下事項：
debug返回ok，分享不成功
單頁項目（SPA）中的一些要點
所有需要使用JS-SDK的頁面必須先注入配置信息，否則將無法調用（同一個url僅需調用一次，對于變化url的SPA的web app可在每次url變化時進行調用,目前Android微信客戶端不支持pushState的H5新特性，所以使用pushState來實現web app的頁面會導致簽名失敗，此問題會在Android6.2中修復）。
上面那段話摘自官方文檔
開發者需要注意的事項：
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; // 將后面的參數去除 } 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一站式服務平臺", 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 () {//設置成功 //shareSuccessCallback(); } }); wx.updateTimelineShareData({ title: shareConfig.title, link: shareConfig.link, imgUrl: shareConfig.imgUrl, success: function () {//設置成功 //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 } });}總結
原先計劃不能分享的頁面就使用hideMenuItems方法隱藏掉相關按鈕，在ios下試了一下，有些bug：顯示按鈕的頁面切換的影藏按鈕的頁面，分享按鈕有時依然存在，刷新就沒問題，估計又是一個深坑，沒精力在折騰了，就改為隱私頁面分享到首頁，公共頁面分享原地址，如果有什么好的解決辦法，請聯系我！
一開始我有參考sf上的一篇博客http://www.49028c.com/article/158685.htm，按照上面的代碼，android手機都能成功，但是IOS有一個奇怪的問題，就是分享間歇性的失效，同一個頁面，剛剛調起分享成功，再試一次就失?。]有圖標、title，只能跳轉到首頁），經過“不斷”努力的嘗試，應該是解決了問題，說一下過程：
最后，在這里希望騰訊官方能不能走點心，更新文檔及時點，demo能不能提供完整點....
參考鏈接
http://www.49028c.com/article/158685.htm
http://www.49028c.com/article/158693.htm
http://www.49028c.com/article/158690.htm
https://github.com/vuejs/vue-router/issues/481
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
