vue實現微信分享朋友圈和朋友功能

時間 2019-12-13

標籤 vue 實現微信分享朋友功能简体版

原文原文鏈接

vue實現微信分享朋友圈和朋友功能

A-A+

haibao 2018-10-25 11 21 6.2 k 百度已收錄前端開發

舒適提示：本文共3536個字，讀完預計9分鐘。html

這兩天在開發一個雙十一的活動頁，前端用的是Vue，因爲活動的性質須要傳播分享，因此在項目中也集成了微信JS-SDK自定義的功能，下面來講一下實現的思路和方法。前端

前提：要有公衆號，須要在其後臺添加一個安全域名，安全域名用於微信的驗證，沒有這一步操做，下面的都白搭。通常還須要後端提供一個獲取appid，timestamp，簽名等信息的接口給你ajax請求用。若是你本身用nodejs啥的實現，那麼也是棒棒的。vue

下面說一下具體的步驟：node

一、經過npm 安裝微信的js-sdk，固然你也能夠在index.html頁面中直接加script標籤來引用，哪一種方式均可以。命令以下：ios

1	npm install weixin-js-sdk --save-dev

二、在Vue目錄下，好比：common文件夾，新建一個js文件，起名你隨意，我這邊叫wxapi.js，貼入下面代碼(PS: Axios根據實際狀況來使用)：ajax

/**
 * 微信js-sdk
 * 參考文檔：https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115
 */
import wx from 'weixin-js-sdk'
import Axios from 'axios'
const wxApi = {
  /**
  * [wxRegister 微信Api初始化]
  * @param  {Function} callback [ready回調函數]
  */
  wxRegister (callback) {
    // 這邊的接口請換成大家本身的
    Axios.post('/api/wechat/shares', { reqUrl: window.location.href }, { timeout: 5000, withCredentials: true }).then((res) => {
      let data = JSON.parse(res.data.data) // PS: 這裏根據你接口的返回值來使用
      wx.config({
        debug: false, // 開啓調試模式
        appId: data.appId, // 必填，公衆號的惟一標識
        timestamp: data.timestamp, // 必填，生成簽名的時間戳
        nonceStr: data.noncestr, // 必填，生成簽名的隨機串
        signature: data.signature, // 必填，簽名，見附錄1
        jsApiList: data.jsApiList // 必填，須要使用的JS接口列表，全部JS接口列表見附錄2
      })
    }).catch((error) => {
      console.log(error)
    })
    wx.ready((res) => {
      // 若是須要定製ready回調方法
      if (callback) {
        callback()
      }
    })
  },
  /**
  * [ShareTimeline 微信分享到朋友圈]
  * @param {[type]} option [分享信息]
  * @param {[type]} success [成功回調]
  * @param {[type]} error   [失敗回調]
  */
  ShareTimeline (option) {
    wx.onMenuShareTimeline({
      title: option.title, // 分享標題
      link: option.link, // 分享連接
      imgUrl: option.imgUrl, // 分享圖標
      success () {
        // 用戶成功分享後執行的回調函數
        option.success()
      },
      cancel () {
        // 用戶取消分享後執行的回調函數
        option.error()
      }
    })
  },
  /**
  * [ShareAppMessage 微信分享給朋友]
  * @param {[type]} option [分享信息]
  * @param {[type]} success [成功回調]
  * @param {[type]} error   [失敗回調]
  */
  ShareAppMessage (option) {
    wx.onMenuShareAppMessage({
      title: option.title, // 分享標題
      desc: option.desc, // 分享描述
      link: option.link, // 分享連接
      imgUrl: option.imgUrl, // 分享圖標
      success () {
        // 用戶成功分享後執行的回調函數
        option.success()
      },
      cancel () {
        // 用戶取消分享後執行的回調函數
        option.error()
      }
    })
  }
}
export default wxApi

三、如何使用呢？npm

在Vue頁面，好比首頁，先引入剛剛的js文件：json

1	import wxapi from '@/common/wxapi.js'

在mounted()中加入調用的代碼：axios

1	wxapi.wxRegister(this.wxRegCallback)

而後再methods中加入下面3個方法：後端

wxRegCallback () {
  // 用於微信JS-SDK回調
  this.wxShareTimeline()
  this.wxShareAppMessage()
},
wxShareTimeline () {
  // 微信自定義分享到朋友圈
  let option = {
    title: '限時團購周 挑戰最低價', // 分享標題, 請自行替換
    link: window.location.href.split('#')[0], // 分享連接，根據自身項目決定是否須要split
    imgUrl: 'logo.png', // 分享圖標, 請自行替換，須要絕對路徑
    success: () => {
      alert('分享成功')
    },
    error: () => {
      alert('已取消分享')
    }
  }
  // 將配置注入通用方法
  wxapi.ShareTimeline(option)
},
wxShareAppMessage () {
  // 微信自定義分享給朋友
  let option = {
    title: '限時團購周 挑戰最低價', // 分享標題, 請自行替換
    desc: '限時團購周 挑戰最低價', // 分享描述, 請自行替換
    link: window.location.href.split('#')[0], // 分享連接，根據自身項目決定是否須要split
    imgUrl: 'logo.png', // 分享圖標, 請自行替換，須要絕對路徑
    success: () => {
      alert('分享成功')
    },
    error: () => {
      alert('已取消分享')
    }
  }
  // 將配置注入通用方法
  wxapi.ShareAppMessage(option)
}

以上幾步即實現了微信的分享功能，若是期間遇到問題，請本身開啓debug調試模式，並根據錯誤提示的內容去解決。通常若是後端接口沒問題的話，前端通常只會遇到：簽名驗證失敗或者URL的問題。😆

config:fail,Error: AppID 不合法

因爲後端返回的是json, 我前臺沒有將json轉爲對象，因此致使一直報appID不合法。這個細心點就不會遇到了。

補充說明：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

以上有些權限菜單可能會被廢棄，請自行查看微信官方文檔：https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115

寫在最後

好了，本文到此結束！

若是還有什麼疑問或者建議，歡迎多多交流，原創文章，文筆有限，文中如有不正之處，萬望告知。

若是以爲文章對你有幫助，打個賞，讓我有更大的動力去創做，謝謝！