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

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

技術要點

Vue，history

常見問題及說明

debug模式下報false

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

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

debug返回ok，分享不成功

1. 確保代碼拼寫正確
2. 分享鏈接域名或路徑必須與當前頁面對應的公眾號JS安全域名一致
3. 接口調用需要放在wx.ready方法中

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

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

上面那段話摘自官方文檔

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

1. android和ios需要分開處理
2. 需要在頁面url變化的時候重新調用wx.config方法，android獲取簽名的url就傳window.location.href
3. 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);
  }
});

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

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

廣告

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