vue微信分享鏈接添加動態參數

来源:https://www.cnblogs.com/jjlinsblog/archive/2019/04/28/10784319.html
-Advertisement-
Play Games

微信分享時 分享鏈接攜帶參數可能不是固定的 需要在分享的前一刻才知道 這裡就是動態設置分享鏈接的基本寫法 代碼不是那麼詳盡 但大致流程如下 1.安裝引用jssdk 2.通過config介面註入配置信息 ...


微信分享時 分享鏈接攜帶參數可能不是固定的 需要在分享的前一刻才知道 這裡就是動態設置分享鏈接的基本寫法 代碼不是那麼詳盡 但大致流程如下 

1.安裝引用jssdk

npm install --save weixin-js-sdk

const wx=require('weixin-js-sdk')

 

2.通過config介面註入配置信息

const jsApiList = ['onMenuShareQQ', 'onMenuShareAppMessage', 'onMenuShareTimeline', 'updateAppMessageShareData', 'updateTimelineShareData']

 



methods中的方法
getUrl () {
  if (window.entryUrl === '') {
    window.entryUrl = location.href.split('#')[0]
  }
  var u = navigator.userAgent
  var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1 // g
  return isAndroid ? location.href.split('#')[0] : window.entryUrl
},
getConfig () {
  var url = this.getUrl()
  return new Promise((resolve, reject) => {
    this.$axios.get('your requestUrl', {
      params: {
        url: url
      }
    }).then((response) => {
      var data = response.data.data
      var appId = data.appId
      var noncestr = data.nonceStr
      // var jsapi_ticket = res.jsapi_ticket;
      var timestamp = data.timestamp
      var signature = data.signature
      wx.config({
        debug: false, // 開啟調試模式,調用的所有api的返回值會在客戶端alert出來,若要查看傳入的參數,可以在pc端打開,參數信息會通過log打出,僅在pc端時才會列印。
        appId: appId, // 必填,公眾號的唯一標識
        timestamp: timestamp, // 必填,生成簽名的時間戳
        nonceStr: noncestr, // 必填,生成簽名的隨機串
        signature: signature, // 必填,簽名,見附錄1
        jsApiList: jsApiList // 必填,需要使用的JS介面列表,所有JS介面列表 見附錄2
      })
      wx.error(function (res) {
        console.log(JSON.stringify(res))
      })
      resolve()
    })
  })
},
shareToFriendsCircle () {
  wx.ready(() => {
    wx.onMenuShareTimeline({
      title: this.title,
      link: this.link,
      imgUrl: this.imgUrl,
      success: function () {
      }
    })
  })
},
shareToFriends () {
  wx.ready(() => {
    wx.onMenuShareAppMessage({
      title: this.title,
      desc: this.desc,
      link: this.link,
      imgUrl: this.imgUrl,
      success: function () {

      }
    })
  })
},

 


在mounted中調用 getConfig方法
調用分享方法的位置代碼大致如下
this.link = location.origin + '/****/index.html#/share?openId=' + this.openId + '&shareId=' + shareId
this.desc = '分享鏈接添加動態參數'
this.shareToFriends()
this.shareToFriendsCircle()

 




您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • Code Splitting是webpack的一個重要特性,他允許你將代碼打包生成多個bundle。對多頁應用來說,它是必須的,因為必須要配置多個入口生成多個bundle;對於單頁應用來說,如果只打包成一個bundle可能體積很大,導致無法利用瀏覽器並行下載的能力,且白屏時間長,也會導致下載很多可能... ...
  • 一、rem佈局基本原理 原理:rem可以理解為一個長度單位,單位rem的值等於網頁font-size的值。如果網頁的字體大小為預設值16px,那麼1rem就等於16px,0.5rem等於8px。 根據這個原理,如果網頁預設的字體大小改變,那麼單位rem的大小也會改變,我們使用rem做單位的HTML元 ...
  • 近期由於業務的需求,讓我這從未想過要碰Web Gis的業餘前端開發者,走了Web Gis的開發道路。功能需求很簡單,但卻也是讓自己難為了好幾天。如,應該選擇那個Gis框架,Gis框架的相容性如何,直接Ie哪些版,能不能簡單到只有一張圖片就行解決問題,等等。。。。。。 在如此多的技術盲點,以及不確定的 ...
  • this一般運用場景: 1.位於函數中,誰調用指向誰 var make = "Mclaren"; var model = "720s" function fullName() { console.log(this.make + " " + this.model); } var car = { mak ...
  • 因為IT互聯網發展的非常迅速,而web前端這塊很火,目前工資水平給的很高,在市場上也是非常的稀缺人才,現在各個行業轉行做web前端的很多,今天給大家一些建議,希望新手少走點彎路吧! 建議一:有一個比較適合自己系統的學習方案,系統的學習教程,很多人在開始學習web前端的時候都不知道如何規劃,也不知道w ...
  • Node.js安裝和簡單使用 1. 安裝方法 簡單的安裝方式是直接官網下載,然後本地安裝即可。官網地址:nodejs.org Windows系統下,選擇和系統版本匹配的.msi尾碼的安裝文件。Mac OS X系統下,選擇.pkg尾碼的安裝文件。 2. 測試是否安裝成功 打開終端,鍵入命令 ,如果進入 ...
  • FullCalendar Timeline View(v4) The Scheduler add-on provides a new view called “timeline view” with a customizable horizontal time-axis and resources ...
  • canvas實現畫板 主要用到知識點: 滑鼠事件onmousedown() onmousemove() onmouseup() onmouseleave() 事件委托 canvas的一些方法 如:繪製線條moveTo() lineTo() stroke() 撤銷功能getImageData() pu ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...