Vue項(xiàng)目history模式下微信分享爬坑總結(jié)

每回遇到微信分享都是一個(gè)坑，目前的商城項(xiàng)目使用Vue開(kāi)發(fā)，采用history的路由模式，配置微信分享又遇到了很多問(wèn)題，最后終于解決了，現(xiàn)將解決的過(guò)程分享一下。

新邵ssl適用于網(wǎng)站、小程序/APP、API接口等需要進(jìn)行數(shù)據(jù)傳輸應(yīng)用場(chǎng)景，ssl證書(shū)未來(lái)市場(chǎng)廣闊！成為創(chuàng)新互聯(lián)建站的ssl證書(shū)銷售渠道，可以享受市場(chǎng)價(jià)格4-6折優(yōu)惠！如果有意向歡迎電話聯(lián)系或者加微信：028-86922220（備注：SSL證書(shū)合作）期待與您的合作！

技術(shù)要點(diǎn)

Vue，history

常見(jiàn)問(wèn)題及說(shuō)明

debug模式下報(bào)false

這個(gè)沒(méi)得說(shuō)，就是調(diào)用wx.config方法的參數(shù)錯(cuò)誤造成的，請(qǐng)確認(rèn)以下事項(xiàng)：

是否成功綁定了域名（域名校驗(yàn)文件要能被訪問(wèn)到）
使用最新的js-sdk文件，因?yàn)槲⑿艜?huì)改部分api
config方法的參數(shù)是否傳正確了（拼寫(xiě)錯(cuò)誤、大小寫(xiě)...）
需要使用的方法是否寫(xiě)在了jsApiList中
獲取簽名的url需要decodeURIComponent
后臺(tái)的生成簽名的加密方法需要對(duì)照官方文檔

debug返回ok，分享不成功

確保代碼拼寫(xiě)正確
分享鏈接域名或路徑必須與當(dāng)前頁(yè)面對(duì)應(yīng)的公眾號(hào)JS安全域名一致
接口調(diào)用需要放在wx.ready方法中

單頁(yè)項(xiàng)目（SPA）中的一些要點(diǎn)

所有需要使用JS-SDK的頁(yè)面必須先注入配置信息，否則將無(wú)法調(diào)用（同一個(gè)url僅需調(diào)用一次，對(duì)于變化url的SPA的web app可在每次url變化時(shí)進(jìn)行調(diào)用,目前Android微信客戶端不支持pushState的H5新特性，所以使用pushState來(lái)實(shí)現(xiàn)web app的頁(yè)面會(huì)導(dǎo)致簽名失敗，此問(wèn)題會(huì)在Android6.2中修復(fù)）。

上面那段話摘自官方文檔

開(kāi)發(fā)者需要注意的事項(xiàng)：

android和ios需要分開(kāi)處理
需要在頁(yè)面url變化的時(shí)候重新調(diào)用wx.config方法，android獲取簽名的url就傳window.location.href
Vue項(xiàng)目在切換頁(yè)面時(shí)，IOS中瀏覽器的url并不會(huì)改變，依舊是第一次進(jìn)入頁(yè)面的地址，所以IOS獲取簽名的url需要傳第一次進(jìn)入的頁(yè)面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: "首頁(yè)",
        showTabbar: true,
        allowShare: true
      },
    },
    {
      path: "/cart",
      name: "cart",
      meta: {
        title: "購(gòu)物車",
        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);
  }
});

代碼要點(diǎn)：

meta中的allowShare用于判斷頁(yè)面是否可分享
window.__wxjs_is_wkwebview可用來(lái)判斷是否是微信IOS瀏覽器
entryUrl是項(xiàng)目第一次進(jìn)入的頁(yè)面的地址，將其緩存在window對(duì)象上
為什么安卓的時(shí)候要增加一個(gè)延時(shí)器，因?yàn)榘沧繒?huì)存在一些情況，就是即便簽名成功，但是還是會(huì)喚不起功能，這個(gè)貌似是一個(gè)比較穩(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ù)平臺(tái)",
    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é)

原先計(jì)劃不能分享的頁(yè)面就使用hideMenuItems方法隱藏掉相關(guān)按鈕，在ios下試了一下，有些bug：顯示按鈕的頁(yè)面切換的影藏按鈕的頁(yè)面，分享按鈕有時(shí)依然存在，刷新就沒(méi)問(wèn)題，估計(jì)又是一個(gè)深坑，沒(méi)精力在折騰了，就改為隱私頁(yè)面分享到首頁(yè)，公共頁(yè)面分享原地址，如果有什么好的解決辦法，請(qǐng)聯(lián)系我！

一開(kāi)始我有參考sf上的一篇博客https://www.jb51.net/article/158685.htm，按照上面的代碼，android手機(jī)都能成功，但是IOS有一個(gè)奇怪的問(wèn)題，就是分享間歇性的失效，同一個(gè)頁(yè)面，剛剛調(diào)起分享成功，再試一次就失敗（沒(méi)有圖標(biāo)、title，只能跳轉(zhuǎn)到首頁(yè)），經(jīng)過(guò)“不斷”努力的嘗試，應(yīng)該是解決了問(wèn)題，說(shuō)一下過(guò)程：

一開(kāi)始以為是異步喚起沒(méi)成功的問(wèn)題，就和android一樣給IOS調(diào)用wechatAuth方法也加了個(gè)定時(shí)器，測(cè)了一遍沒(méi)效果，放棄
起始js-sdk是通過(guò)npm安裝的，版本上帶了個(gè)test，有點(diǎn)不放心，改為直接使用script標(biāo)簽引用官方的版本
重新讀了一遍文檔，發(fā)現(xiàn)onMenuShareTimeline等方法即將廢棄，就把jsApiList改為jsApiList:['updateAppMessageShareData','updateTimelineShareData']，改后就變成了IOS可以成功，android分享失敗
百度updateAppMessageShareData安卓失敗原因，參考這個(gè)鏈接https://www.jb51.net/article/158690.htm，把老的api也加到j(luò)sApiList中，仔細(xì)、反復(fù)試了試兩種設(shè)備都o(jì)k，好像是成功了，說(shuō)"好像"是因?yàn)樾睦餂](méi)底啊，各種“魔法”代碼！

最后，在這里希望騰訊官方能不能走點(diǎn)心，更新文檔及時(shí)點(diǎn)，demo能不能提供完整點(diǎn)....

參考鏈接

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

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。

當(dāng)前名稱：Vue項(xiàng)目history模式下微信分享爬坑總結(jié)
文章分享：http://muchs.cn/article40/jpdieo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供ChatGPT、外貿(mào)建站、App設(shè)計(jì)、域名注冊(cè)、網(wǎng)頁(yè)設(shè)計(jì)公司、網(wǎng)站制作

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容