Vue項目history模式下微信分享爬坑總結(jié)-創(chuàng)新互聯(lián)

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

創(chuàng)新互聯(lián)主要從事網(wǎng)站建設(shè)、網(wǎng)站制作、網(wǎng)頁設(shè)計、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務(wù)。立足成都服務(wù)吉利,10余年網(wǎng)站建設(shè)經(jīng)驗,價格優(yōu)惠、服務(wù)專業(yè),歡迎來電咨詢建站服務(wù):18982081108

技術(shù)要點

Vue，history

常見問題及說明

debug模式下報false

這個沒得說，就是調(diào)用wx.config方法的參數(shù)錯誤造成的，請確認(rèn)以下事項：

是否成功綁定了域名（域名校驗文件要能被訪問到）
使用最新的js-sdk文件，因為微信會改部分api
config方法的參數(shù)是否傳正確了（拼寫錯誤、大小寫...）
需要使用的方法是否寫在了jsApiList中
獲取簽名的url需要decodeURIComponent
后臺的生成簽名的加密方法需要對照官方文檔

debug返回ok，分享不成功

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

單頁項目（SPA）中的一些要點

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

上面那段話摘自官方文檔

開發(fā)者需要注意的事項：

android和ios需要分開處理
需要在頁面url變化的時候重新調(diào)用wx.config方法，android獲取簽名的url就傳window.location.href
Vue項目在切換頁面時，IOS中瀏覽器的url并不會改變，依舊是第一次進(jìn)入頁面的地址，所以IOS獲取簽名的url需要傳第一次進(jìn)入的頁面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);
  }
});

當(dāng)前題目：Vue項目history模式下微信分享爬坑總結(jié)-創(chuàng)新互聯(lián)
標(biāo)題網(wǎng)址：http://muchs.cn/article22/poicc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站建設(shè)、外貿(mào)網(wǎng)站建設(shè)、虛擬主機、微信公眾號、品牌網(wǎng)站制作、云服務(wù)器

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

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