国产探花免费观看_亚洲丰满少妇自慰呻吟_97日韩有码在线_资源在线日韩欧美_一区二区精品毛片,辰东完美世界有声小说,欢乐颂第一季,yy玄幻小说排行榜完本

首頁(yè) > 編程 > JavaScript > 正文

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

2019-11-19 11:55:13
字體:
來(lái)源:轉(zhuǎn)載
供稿:網(wǎng)友

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

技術(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):

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

debug返回ok,分享不成功

  1. 確保代碼拼寫(xiě)正確
  2. 分享鏈接域名或路徑必須與當(dāng)前頁(yè)面對(duì)應(yīng)的公眾號(hào)JS安全域名一致
  3. 接口調(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微信客戶(hù)端不支持pushState的H5新特性,所以使用pushState來(lái)實(shí)現(xiàn)web app的頁(yè)面會(huì)導(dǎo)致簽名失敗,此問(wèn)題會(huì)在Android6.2中修復(fù))。

上面那段話(huà)摘自官方文檔

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

  1. android和ios需要分開(kāi)處理
  2. 需要在頁(yè)面url變化的時(shí)候重新調(diào)用wx.config方法,android獲取簽名的url就傳window.location.href
  3. 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)物車(chē)",        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):

  1. meta中的allowShare用于判斷頁(yè)面是否可分享
  2. window.__wxjs_is_wkwebview可用來(lái)判斷是否是微信IOS瀏覽器
  3. entryUrl是項(xiàng)目第一次進(jìn)入的頁(yè)面的地址,將其緩存在window對(duì)象上
  4. 為什么安卓的時(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上的一篇博客http://www.survivalescaperooms.com/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ò)程:

  1. 一開(kāi)始以為是異步喚起沒(méi)成功的問(wèn)題,就和android一樣給IOS調(diào)用wechatAuth方法也加了個(gè)定時(shí)器,測(cè)了一遍沒(méi)效果,放棄
  2. 起始js-sdk是通過(guò)npm安裝的,版本上帶了個(gè)test,有點(diǎn)不放心,改為直接使用script標(biāo)簽引用官方的版本
  3. 重新讀了一遍文檔,發(fā)現(xiàn)onMenuShareTimeline等方法即將廢棄,就把jsApiList改為jsApiList:['updateAppMessageShareData','updateTimelineShareData'],改后就變成了IOS可以成功,android分享失敗
  4. 百度updateAppMessageShareData安卓失敗原因,參考這個(gè)鏈接http://www.survivalescaperooms.com/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)....

參考鏈接

http://www.survivalescaperooms.com/article/158685.htm
http://www.survivalescaperooms.com/article/158693.htm
http://www.survivalescaperooms.com/article/158690.htm
https://github.com/vuejs/vue-router/issues/481

以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持武林網(wǎng)。

發(fā)表評(píng)論 共有條評(píng)論
用戶(hù)名: 密碼:
驗(yàn)證碼: 匿名發(fā)表
主站蜘蛛池模板: 仙游县| 乳源| 永昌县| 科技| 年辖:市辖区| 枞阳县| 苍南县| 华蓥市| 吕梁市| 汶上县| 钟山县| 高碑店市| 宁阳县| 永嘉县| 泽普县| 桑日县| 寿光市| 长泰县| 济阳县| 宁德市| 忻州市| 西安市| 阳东县| 辉南县| 石渠县| 鸡西市| 老河口市| 周口市| 郧西县| 隆尧县| 临邑县| 沧源| 北票市| 闽侯县| 肥西县| 分宜县| 邳州市| SHOW| 津南区| 九龙城区| 海晏县|