国产99久久精品_欧美日本韩国一区二区_激情小说综合网_欧美一级二级视频_午夜av电影_日本久久精品视频

最新文章專題視頻專題問答1問答10問答100問答1000問答2000關鍵字專題1關鍵字專題50關鍵字專題500關鍵字專題1500TAG最新視頻文章推薦1 推薦3 推薦5 推薦7 推薦9 推薦11 推薦13 推薦15 推薦17 推薦19 推薦21 推薦23 推薦25 推薦27 推薦29 推薦31 推薦33 推薦35 推薦37視頻文章20視頻文章30視頻文章40視頻文章50視頻文章60 視頻文章70視頻文章80視頻文章90視頻文章100視頻文章120視頻文章140 視頻2關鍵字專題關鍵字專題tag2tag3文章專題文章專題2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章專題3
問答文章1 問答文章501 問答文章1001 問答文章1501 問答文章2001 問答文章2501 問答文章3001 問答文章3501 問答文章4001 問答文章4501 問答文章5001 問答文章5501 問答文章6001 問答文章6501 問答文章7001 問答文章7501 問答文章8001 問答文章8501 問答文章9001 問答文章9501
當前位置: 首頁 - 科技 - 知識百科 - 正文

Vue項目history模式下微信分享爬坑總結

來源:懂視網(wǎng) 責編:小采 時間:2020-11-27 21:59:29
文檔

Vue項目history模式下微信分享爬坑總結

Vue項目history模式下微信分享爬坑總結:每回遇到微信分享都是一個坑,目前的商城項目使用Vue開發(fā),采用history的路由模式,配置微信分享又遇到了很多問題,最后終于解決了,現(xiàn)將解決的過程分享一下。 技術要點 Vue,history 常見問題及說明 debug模式下報false 這個沒得說,就是調(diào)用wx.con
推薦度:
導讀Vue項目history模式下微信分享爬坑總結:每回遇到微信分享都是一個坑,目前的商城項目使用Vue開發(fā),采用history的路由模式,配置微信分享又遇到了很多問題,最后終于解決了,現(xiàn)將解決的過程分享一下。 技術要點 Vue,history 常見問題及說明 debug模式下報false 這個沒得說,就是調(diào)用wx.con

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

技術要點

Vue,history

常見問題及說明

debug模式下報false

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

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

debug返回ok,分享不成功

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

單頁項目(SPA)中的一些要點

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

上面那段話摘自官方文檔

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

  1. android和ios需要分開處理
  2. 需要在頁面url變化的時候重新調(diào)用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);
 }
});

代碼要點:

  1. meta中的allowShare用于判斷頁面是否可分享
  2. window.__wxjs_is_wkwebview可用來判斷是否是微信IOS瀏覽器
  3. entryUrl是項目第一次進入的頁面的地址,將其緩存在window對象上
  4. 為什么安卓的時候要增加一個延時器,因為安卓會存在一些情況,就是即便簽名成功,但是還是會喚不起功能,這個貌似是一個比較穩(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一站式服務平臺",
 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:顯示按鈕的頁面切換的影藏按鈕的頁面,分享按鈕有時依然存在,刷新就沒問題,估計又是一個深坑,沒精力在折騰了,就改為隱私頁面分享到首頁,公共頁面分享原地址,如果有什么好的解決辦法,請聯(lián)系我!

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

  1. 一開始以為是異步喚起沒成功的問題,就和android一樣給IOS調(diào)用wechatAuth方法也加了個定時器,測了一遍沒效果,放棄
  2. 起始js-sdk是通過npm安裝的,版本上帶了個test,有點不放心,改為直接使用script標簽引用官方的版本
  3. 重新讀了一遍文檔,發(fā)現(xiàn)onMenuShareTimeline等方法即將廢棄,就把jsApiList改為jsApiList:['updateAppMessageShareData','updateTimelineShareData'],改后就變成了IOS可以成功,android分享失敗
  4. 百度updateAppMessageShareData安卓失敗原因,參考這個鏈接https://www.gxlcms.com/article/158690.htm,把老的api也加到jsApiList中,仔細、反復試了試兩種設備都ok,好像是成功了,說"好像"是因為心里沒底啊,各種“魔法”代碼!

最后,在這里希望騰訊官方能不能走點心,更新文檔及時點,demo能不能提供完整點....

參考鏈接

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

聲明:本網(wǎng)頁內(nèi)容旨在傳播知識,若有侵權等問題請及時與本網(wǎng)聯(lián)系,我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

文檔

Vue項目history模式下微信分享爬坑總結

Vue項目history模式下微信分享爬坑總結:每回遇到微信分享都是一個坑,目前的商城項目使用Vue開發(fā),采用history的路由模式,配置微信分享又遇到了很多問題,最后終于解決了,現(xiàn)將解決的過程分享一下。 技術要點 Vue,history 常見問題及說明 debug模式下報false 這個沒得說,就是調(diào)用wx.con
推薦度:
標簽: 微信 VUE 微信分享
  • 熱門焦點

最新推薦

猜你喜歡

熱門推薦

專題
Top
主站蜘蛛池模板: 7777精品伊人久久久大香线蕉 | 久久综合社区 | 一级成人a毛片免费播放 | 亚洲欧美日韩在线播放 | 九九爱精品视频 | 亚洲 欧美 自拍 另类 欧美 | 日韩中文在线观看 | 欧美多p | 精品国产亚洲一区二区三区 | 无遮挡在线观看 | 国产午夜高清一区二区不卡 | 亚洲视频在线免费看 | 91久久国产| 日韩第四页 | 国产成人一区二区三区免费观看 | 亚洲欧洲日本在线观看 | 在线观着免费观看国产黄 | 国产欧美精品综合一区 | 国产资源在线播放 | 99精品高清视频一区二区 | 久久精品无遮挡一级毛片 | 欧美αv日韩αv另类综合 | 免费一区二区三区免费视频 | 一区二区三区高清不卡 | 日韩高清专区 | 亚洲欧美日韩中文字幕在线不卡 | 91精品国产91热久久p | 91久久国产综合精品女同我 | 国产成人青青热久免费精品 | 欧美日韩网 | 中文国产成人精品少久久 | 日本成人一区 | 久久无码精品一区二区三区 | 99精品国产成人一区二区 | 欧美亚洲视频一区 | 亚洲香蕉久久综合网 | 亚洲男同在线观看 | 欧美日本免费一区二区三区 | 亚洲 欧美 日韩 小说 另类 | 美女视频黄a视频全免费应用 | 就爱啪啪网站 |