亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

vue項目中實現的微信分享功能示例

 更新時間:2019年01月21日 10:47:19   作者:黎成訶月  
這篇文章主要介紹了vue項目中實現的微信分享功能,結合實例形式分析了基于vue.js實現的微信分享功能具體定義與使用方法,需要的朋友可以參考下

本文實例講述了vue項目中實現的微信分享功能。分享給大家供大家參考,具體如下:

/* 微信分享 */
Vue.prototype.wechatShare = (shareData) => {
 let resource = {
  title: '隨我心愿!',
  desc: '體驗優(yōu)質服務',
  link: 'https://www.abc.cn/',
  img: 'https://www.abc.cn/images/share_logo.jpg'
 }
 let obj = Object.assign({}, resource, shareData)
 let params = {url: window.location.href}
 $post('/vue/weixinjiekou', params).then(data => {
  // 分享標題等參數
  const shareTitle = obj.title
  const shareDesc = obj.desc
  const shareLink = obj.userShare ? obj.link + data.flag : obj.link
  const shareImgUrl = obj.img
  const config = {
   title: shareTitle, // 分享標題
   desc: shareDesc, // 分享描述
   link: shareLink, // 分享鏈接
   imgUrl: shareImgUrl, // 分享圖標
   type: '', // 分享類型,music、video或link,不填默認為link
   dataUrl: '', // 如果type是music或video,則要提供數據鏈接,默認為空
   success: function () {},
   cancel: function () {}
  }
  wechat.config({
   debug: false,
   appId: data.appid, // 和獲取Ticke的必須一樣------必填,公眾號的唯一標識
   timestamp: data.timestamp, // 必填,生成簽名的時間戳
   nonceStr: data.noncestr, // 必填,生成簽名的隨機串
   signature: data.signature, // 必填,簽名,見附錄1
   // 需要分享的列表項:發(fā)送給朋友,分享到朋友圈,分享到QQ,分享到QQ空間
   jsApiList: [
    'onMenuShareTimeline', 'onMenuShareAppMessage', 'onMenuShareQQ', 'onMenuShareWeibo',
    'onMenuShareQZone', 'startRecord', 'stopRecord', 'onVoiceRecordEnd', 'playVoice',
    'pauseVoice', 'stopVoice', 'onVoicePlayEnd', 'uploadVoice', 'downloadVoice',
    'chooseImage', 'previewImage', 'uploadImage', 'downloadImage', 'translateVoice',
    'getNetworkType', 'openLocation', 'getLocation', 'hideOptionMenu', 'showOptionMenu',
    'hideMenuItems', 'showMenuItems', 'hideAllNonBaseMenuItem', 'showAllNonBaseMenuItem',
    'closeWindow', 'scanQRCode', 'chooseWXPay', 'openProductSpecificView', 'addCard',
    'chooseCard', 'openCard'
   ]
  })
  // 處理驗證失敗的信息
  wechat.error(function (res) {
   console.log('驗證失敗返回的信息:', res)
  })
  // 處理驗證成功的信息
  wechat.ready(function () {
   // 分享給朋友
   wechat.onMenuShareAppMessage(config)
   // 分享到朋友圈
   wechat.onMenuShareTimeline(config)
   // 分享到qq
   wechat.onMenuShareQZone(config)
   // 分享到微博
   wechat.onMenuShareWeibo(config)
   // 分享到qq空間
   wechat.onMenuShareQZone(config)
  })
 })
}

微信接口信息

{
 "result": {
  "appid": "appid",
  "noncestr": "隨機串",
  "signature": "簽名",
  "timestamp": 時間戳,
  "flag": 6
 },
 "status": "y"
}

希望本文所述對大家vue.js程序設計有所幫助。

相關文章

  • vue3.2自定義彈窗組件結合函數式調用示例詳解

    vue3.2自定義彈窗組件結合函數式調用示例詳解

    這篇文章主要為大家介紹了vue3.2自定義彈窗組件結合函數式調用示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2022-09-09
  • Vue.js中的綁定樣式實現

    Vue.js中的綁定樣式實現

    這篇文章主要介紹了Vue.js中的綁定樣式實現,展開的內容呦style綁定樣式和綁定class樣式,具體相關內容需要的小伙伴可以參考下面文章介紹
    2022-05-05
  • django簡單的前后端分離的數據傳輸實例 axios

    django簡單的前后端分離的數據傳輸實例 axios

    這篇文章主要介紹了django簡單的前后端分離的數據傳輸實例 axios,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2020-05-05
  • Element-ui Image圖片按需引入大圖預覽

    Element-ui Image圖片按需引入大圖預覽

    這篇文章主要為大家介紹了Element-ui Image圖片按需引入大圖預覽實現詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2023-07-07
  • vue動態(tài)綁定多個class以及帶上三元運算或其他條件

    vue動態(tài)綁定多個class以及帶上三元運算或其他條件

    這篇文章主要介紹了vue動態(tài)綁定多個class以及帶上三元運算或其他條件,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-04-04
  • vuex 的簡單使用

    vuex 的簡單使用

    vuex是一個專門為vue.js設計的集中式狀態(tài)管理架構。這篇文章主要介紹了vuex 的簡單使用,需要的朋友可以參考下
    2018-03-03
  • Vue學習筆記進階篇之vue-router安裝及使用方法

    Vue學習筆記進階篇之vue-router安裝及使用方法

    本篇文章主要介紹了Vue學習筆記進階篇之vue-router安裝及使用方法,具有一定的參考價值,有興趣的可以了解一下
    2017-07-07
  • 一步步教你用Vue.js創(chuàng)建一個組件(附代碼示例)

    一步步教你用Vue.js創(chuàng)建一個組件(附代碼示例)

    組件(Component)是Vue.js最強大的功能之一,組件可以擴展HTML元素,封裝可重用的代碼,下面這篇文章主要給大家介紹了關于如何一步步用Vue.js創(chuàng)建一個組件的相關資料,需要的朋友可以參考下
    2022-12-12
  • Vue自定義圖片懶加載指令v-lazyload詳解

    Vue自定義圖片懶加載指令v-lazyload詳解

    這篇文章主要為大家詳細介紹了Vue自定義圖片懶加載指令v-lazyload,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2017-04-04
  • 分分鐘玩轉Vue.js組件(二)

    分分鐘玩轉Vue.js組件(二)

    這篇文章教大家如何分分鐘玩轉Vue.js組件,完善了vue.js組件的學習資料,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2017-03-03

最新評論