欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

記錄vue做微信自定義分享的一些問題

 更新時(shí)間:2019年09月12日 15:03:24   作者:嘟小乾  
這篇文章主要介紹了記錄vue做微信自定義分享的一些問題,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

前言

眾所周知,在使用vue做項(xiàng)目的時(shí)候,微信自定義分享一直是一個(gè)坑,只是ios上坑明顯的多。

然后每次遇到問題都要度娘很久。

奇怪的是貌似和很多人遇到的問題一樣,但是他們寫的解決方案都沒辦法直接解決我遇到的問題。

這里就記錄一下遇到過的一些坑,和解決方式。

目前項(xiàng)目里面,安卓和ios上面的自定義分享已經(jīng)沒有什么問題了。

問題及解決方式

hash模式

在微信的官方文檔中,提到關(guān)于jsapi_ticket的簽名算法中,生成簽名的時(shí)候,當(dāng)前網(wǎng)頁的URL,不包含#及其后面的部分;而且自定義分享出去的鏈接,微信也會主動(dòng)往鏈接的后面拼接一些參數(shù),比如from之類的;這也就造成了一些問題,比如要么簽名不正確,要么分析那個(gè)出去的鏈接,二次分享又回出問題。

那么我這里的解決方式就是直接不用hash模式了,問題又多,鏈接也不好看,直接使用mode: 'history'。

切換頁面簽名失效

這個(gè)在網(wǎng)上也有很多解決方案。由于我這里的項(xiàng)目里不需要細(xì)致到每個(gè)頁面都必須做自定義分享,只需要在觸發(fā)某些條件的時(shí)候觸發(fā)自定義分享,所以是這么做的。

在main.js文件中編寫自定義分享的函數(shù)邏輯;

// 微信自定義分享
Vue.prototype.wxShare = async function ({title , desc , link = window.location.href,imgUrl ,success}) {
  let that = this;
  // 當(dāng)前頁面地址
  let url = window.location.href;
  // 調(diào)用后端服務(wù)獲取微信簽名內(nèi)容
  let {data: wxCfg} = await that.ajax({api: that.api.wechatGetWxSdk, data: {url: url}})
  if (!wx || !wxCfg) return;
  wx.config({
    debug: false,
    appId: wxCfg.appId,
    timestamp: wxCfg.timestamp,
    nonceStr: wxCfg.nonceStr,
    signature: wxCfg.signature,
    jsApiList: ['updateAppMessageShareData', 'updateTimelineShareData', 'onMenuShareTimeline', 'onMenuShareAppMessage']
  });
  wx.ready(function () {
    wx.updateAppMessageShareData({
      title: title, desc: desc, link: link, imgUrl: imgUrl,
      success: function () {
        success ? success() : ''
      }
    })
    wx.updateTimelineShareData({
      title: title, link: link, imgUrl: imgUrl,
      success: function () {
        success ? success() : ''
      }
    })
    wx.onMenuShareTimeline({
      title: title, link: link, imgUrl: imgUrl,
      success: function () {
        success ? success() : ''
      }
    })
    wx.onMenuShareAppMessage({
      title: title, desc: desc, link: link, imgUrl: imgUrl,
      success: function () {
        success ? success() : ''
      }
    })
  })
  wx.error(function (res) {
    that.$toast('請刷新當(dāng)前頁面后重試')
  });
}

在需要調(diào)用自定義分享的時(shí)候,就這樣調(diào)用

await this.wxShare({
  title: '分享的標(biāo)題', 
  desc: '分享的摘要',
  link: '分享出去的鏈接地址',
  imgUrl: '分享的封面圖',
  success: function(){
    // 調(diào)用成功的回調(diào)
  }
})

IOS路由跳轉(zhuǎn)之后依然簽名失效

上面的問題解決之后,項(xiàng)目上線了,很多ios的用戶反饋個(gè)別頁面還是無法成功調(diào)用自定義分享,前期的解決方案很暴力...懟用戶,讓用戶刷新一下當(dāng)前頁面,誒不成想,就好了!

后來越來越多的反饋..沒辦法了,必須得想想轍解決一下...

就開始找原因,發(fā)現(xiàn)android一點(diǎn)問題沒有。

但是在ios上,無論路由跳轉(zhuǎn)多少次,復(fù)制出來的鏈接都是首次進(jìn)入的頁面的鏈接,于是改造一下上面的調(diào)用函數(shù)。
首先記錄首次進(jìn)入頁面的url

Vue.prototype.firstUrl = window.location.href;

然后在wxShare函數(shù)中加了一個(gè)判斷。

大致意思就是判斷當(dāng)前設(shè)備是不是ios,如果是,簽名用的url就使用firstUrl,如果不是,就使用window.location.href

然后上線,發(fā)現(xiàn)就沒有再出過問題咯。

以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

  • 聊聊Vue 中 title 的動(dòng)態(tài)修改問題

    聊聊Vue 中 title 的動(dòng)態(tài)修改問題

    這篇文章主要介紹了 Vue 中 title 的動(dòng)態(tài)修改問題,文中通過兩種方案給大家介紹了title的傳遞問題 ,需要的朋友可以參考下
    2019-06-06
  • ElementUI radio組件選中小改造

    ElementUI radio組件選中小改造

    這篇文章主要介紹了ElementUI radio組件選中小改造,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2019-08-08
  • Vue項(xiàng)目中ESLint配置超全指南(VScode)

    Vue項(xiàng)目中ESLint配置超全指南(VScode)

    ESLint是一個(gè)代碼檢查工具,用來檢查你的代碼是否符合指定的規(guī)范,下面這篇文章主要給大家介紹了關(guān)于Vue項(xiàng)目中ESLint配置(VScode)的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
    2023-04-04
  • Vue深入理解插槽slot的使用

    Vue深入理解插槽slot的使用

    最近被問起是否了解vue的插槽(slot),咋一想發(fā)現(xiàn),似乎很少用到這玩意。所以整理了下slot的一些用法
    2022-08-08
  • Vee-Validate的使用方法詳解

    Vee-Validate的使用方法詳解

    本篇文章主要介紹了Vee-Validate的使用方法詳解,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2017-09-09
  • vue使用過濾器格式化日期

    vue使用過濾器格式化日期

    這篇文章主要為大家詳細(xì)介紹了vue使用過濾器格式化日期,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2021-01-01
  • 解決vuejs 使用value in list 循環(huán)遍歷數(shù)組出現(xiàn)警告的問題

    解決vuejs 使用value in list 循環(huán)遍歷數(shù)組出現(xiàn)警告的問題

    今天小編就為大家分享一篇解決vuejs 使用value in list 循環(huán)遍歷數(shù)組出現(xiàn)警告的問題,具有很好的參考價(jià)值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2018-09-09
  • Vue編譯器源碼分析compileToFunctions作用詳解

    Vue編譯器源碼分析compileToFunctions作用詳解

    這篇文章主要為大家介紹了Vue編譯器源碼分析compileToFunctions作用詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2022-07-07
  • vue3中安裝并使用CSS預(yù)處理器Sass的方法詳解

    vue3中安裝并使用CSS預(yù)處理器Sass的方法詳解

    Sass是一種CSS預(yù)處理器,它擴(kuò)展了CSS的功能,提供了更高級的語法和特性,例如變量、嵌套、混合、繼承和顏色功能等,這些特性可以幫助開發(fā)者更高效地管理和維護(hù)樣式表,本文介紹vue3中安裝并使用CSS預(yù)處理器Sass的方法,感興趣的朋友一起看看吧
    2024-01-01
  • vue時(shí)間線組件的使用方法

    vue時(shí)間線組件的使用方法

    這篇文章主要為大家詳細(xì)介紹了vue時(shí)間線組件的使用方法,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2021-08-08

最新評論