最新国产好看的视频,伊人天堂AV在线,国产Aaaaaa视频,蜜臀视频在线观看一区,人妻av色图,密臀久久久精品影片,青青视频免费观看毛片,久草在线观看视,国产三级精品色情在线

記錄vue做微信自定義分享的一些問(wèn)題

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

前言

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

然后每次遇到問(wèn)題都要度娘很久。

奇怪的是貌似和很多人遇到的問(wèn)題一樣,但是他們寫(xiě)的解決方案都沒(méi)辦法直接解決我遇到的問(wèn)題。

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

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

問(wèn)題及解決方式

hash模式

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

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

切換頁(yè)面簽名失效

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

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

// 微信自定義分享
Vue.prototype.wxShare = async function ({title , desc , link = window.location.href,imgUrl ,success}) {
  let that = this;
  // 當(dāng)前頁(yè)面地址
  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('請(qǐng)刷新當(dāng)前頁(yè)面后重試')
  });
}

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

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

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

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

后來(lái)越來(lái)越多的反饋..沒(méi)辦法了,必須得想想轍解決一下...

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

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

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

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

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

然后上線(xiàn),發(fā)現(xiàn)就沒(méi)有再出過(guò)問(wèn)題咯。

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

相關(guān)文章

  • Vue2.x中的Render函數(shù)詳解

    Vue2.x中的Render函數(shù)詳解

    通常開(kāi)發(fā)vue我們使用的是模板語(yǔ)法,其實(shí)還有和react相同的語(yǔ)法,那就是render函數(shù),同樣支持jsx語(yǔ)法。Vue 的模板實(shí)際是編譯成了 render 函數(shù)。
    2017-05-05
  • 解決Electron?store的commit和dispatch不好用問(wèn)題

    解決Electron?store的commit和dispatch不好用問(wèn)題

    這篇文章主要介紹了解決Electron?store的commit和dispatch不好用問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2023-01-01
  • Vue實(shí)現(xiàn)百度下拉提示搜索功能

    Vue實(shí)現(xiàn)百度下拉提示搜索功能

    這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)百度下拉提示搜索功能,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2017-06-06
  • vuejs2.0運(yùn)用原生js實(shí)現(xiàn)簡(jiǎn)單的拖拽元素功能示例

    vuejs2.0運(yùn)用原生js實(shí)現(xiàn)簡(jiǎn)單的拖拽元素功能示例

    本篇文章主要介紹了vuejs2.0運(yùn)用原生js實(shí)現(xiàn)簡(jiǎn)單的拖拽元素功能示例,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下。
    2017-02-02
  • vue 項(xiàng)目中使用websocket的正確姿勢(shì)

    vue 項(xiàng)目中使用websocket的正確姿勢(shì)

    這篇文章主要介紹了vue 項(xiàng)目中使用websocket的實(shí)例代碼,通過(guò)實(shí)例代碼給大家介紹了在utils下新建websocket.js文件的方法,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2022-01-01
  • vue如何實(shí)現(xiàn)簡(jiǎn)易的彈出框

    vue如何實(shí)現(xiàn)簡(jiǎn)易的彈出框

    這篇文章主要介紹了vue如何實(shí)現(xiàn)簡(jiǎn)易的彈出框,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-04-04
  • 淺談vue的幾種綁定變量的值 防止其改變的方法

    淺談vue的幾種綁定變量的值 防止其改變的方法

    下面小編就為大家分享一篇淺談vue的幾種綁定變量的值 防止其改變的方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
    2018-03-03
  • vue3使用element-plus再次封裝table組件的基本步驟

    vue3使用element-plus再次封裝table組件的基本步驟

    這篇文章主要介紹了vue3使用element-plus再次封裝table組件的基本步驟,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧
    2024-03-03
  • 簡(jiǎn)單了解vue.js數(shù)組的常用操作

    簡(jiǎn)單了解vue.js數(shù)組的常用操作

    這篇文章主要介紹了簡(jiǎn)單了解vue.js數(shù)組的常用操作,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,,需要的朋友可以參考下
    2019-06-06
  • vue 解決路由只變化參數(shù)頁(yè)面組件不更新問(wèn)題

    vue 解決路由只變化參數(shù)頁(yè)面組件不更新問(wèn)題

    今天小編就為大家分享一篇vue 解決路由只變化參數(shù)頁(yè)面組件不更新問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
    2019-11-11

最新評(píng)論

阿鲁科尔沁旗| 华坪县| 理塘县| 隆子县| 德格县| 温泉县| 张北县| 通辽市| 朝阳区| 五峰| 扎赉特旗| 建阳市| 双辽市| 高尔夫| 云龙县| 镇远县| 浏阳市| 成武县| 乌海市| 化州市| 岳阳市| 南投县| 岑巩县| 阳高县| 安福县| 准格尔旗| 呼伦贝尔市| 文登市| 佛坪县| 株洲县| 富蕴县| 义马市| 上思县| 周至县| 临西县| 新蔡县| 灌阳县| 清新县| 莱阳市| 郓城县| 孟津县|