vue如何實現(xiàn)微信分享朋友圈發(fā)送朋友的功能

小編給大家分享一下vue如何實現(xiàn)微信分享朋友圈發(fā)送朋友的功能，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！

vue是什么

Vue是一套用于構(gòu)建用戶界面的漸進(jìn)式JavaScript框架，Vue與其它大型框架的區(qū)別是，使用Vue可以自底向上逐層應(yīng)用，其核心庫只關(guān)注視圖層，方便與第三方庫和項目整合，且使用Vue可以采用單文件組件和Vue生態(tài)系統(tǒng)支持的庫開發(fā)復(fù)雜的單頁應(yīng)用。

首先下載微信jssdk引入項目中，這里我就不說怎么去安裝了。

第一步，引入微信jssdk，此處我是通過下載微信jssdk，然后用webpack引入進(jìn)項目的。

第二步，獲取詳情數(shù)據(jù)，渲染頁面。

第三步，獲取詳情數(shù)據(jù)成功后再獲取微信簽名，token等配置信息。

第四步，通過api配置所想要的功能

代碼：

<template>
 <div class="details">
 <player :videoUrl="details.videoUrl" :coverUrl="details.coverUrl" :videoId="details.videoId"/>
 <div class="description">
  <span class="label" :>{{details.videoLabel}}</span>
  <p class="title">{{details.videoTitle}}</p>
  <p class="info">
  <span>{{details.mtime}}</span>
  <i class="iconfont icon--"></i>
  {{details.videoPlayTimes}}
  </p>
  <p class="summary">簡介</p>
  <p class="article ql-editor" v-html="details.videoDescription"></p>
 </div>
 </div>
</template>
<script>
import player from '@/components/player'
import { videoDtails, getApp } from '@/config/api'
/* eslint-disable no-undef */
export default {
 components: {
 player
 },
 data () {
 return {
  details: {},
  appId: '',
  signature: '',
  timestamp: '',
  nonceStr: ''
 }
 },
 beforeDestroy () {
 document.querySelector('.htmlTitle').text = 'title'
 },
 mounted () {
 // 獲取詳情數(shù)據(jù)<span class="space" >let url = window.location.href.split("#")[0]</span>
 this.$http.get(this, videoDtails, {videoId: this.$route.query.id}, res => {
  this.details = res
  document.querySelector('.htmlTitle').text = this.details.videoTitle
  this.$http.get(this, getApp, {url: url, refresh: true}, res => {
  this.appId = res.appId
  this.signature = res.signature
  this.timestamp = res.timestamp
  this.nonceStr = res.nonceStr
  this.shard(url)
  })
 })
 },
 methods: {
 shard (url) {
  wx.config({
  debug: true, // 開啟調(diào)試模式,調(diào)用的所有api的返回值會在客戶端alert出來，若要查看傳入的參數(shù)，可以在pc端打開，參數(shù)信息會通過log打出，僅在pc端時才會打印。
  appId: this.appId, // 必填，公眾號的唯一標(biāo)識
  timestamp: this.timestamp, // 必填，生成簽名的時間戳
  nonceStr: this.nonceStr, // 必填，生成簽名的隨機(jī)串
  signature: this.signature, // 必填，簽名，見附錄1
  jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage'] // 必填，需要使用的JS接口列表，所有JS接口列表見附錄2
  })
  wx.onMenuShareTimeline({
  title: this.details.videoTitle, // 分享標(biāo)題
  link: url+'#/...', // 分享鏈接，該鏈接域名或路徑必須與當(dāng)前頁面對應(yīng)的公眾號JS安全域名一致
  imgUrl: this.details.coverUrl, // 分享圖標(biāo)
  success () {
   alert('分享朋友圈成功')
   // 用戶確認(rèn)分享后執(zhí)行的回調(diào)函數(shù)
  },
  cancel () {
   // 用戶取消分享后執(zhí)行的回調(diào)函數(shù)
  }
  })
  wx.onMenuShareAppMessage({
  title: this.details.videoTitle, // 分享標(biāo)題
  desc: this.details.videoTitle, // 分享描述
  link: url+'#/...', // 分享鏈接，該鏈接域名或路徑必須與當(dāng)前頁面對應(yīng)的公眾號JS安全域名一致
  imgUrl: this.details.coverUrl, // 分享圖標(biāo)
  type: 'video', // 分享類型,music、video或link，不填默認(rèn)為link
  dataUrl: this.details.videoUrl, // 如果type是music或video，則要提供數(shù)據(jù)鏈接，默認(rèn)為空
  success: function () {
   alert('分享給朋友成功')
   // 用戶確認(rèn)分享后執(zhí)行的回調(diào)函數(shù)
  },
  cancel: function () {
   // 用戶取消分享后執(zhí)行的回調(diào)函數(shù)
  }
  })
 }
 }
}
</script>
<style lang="less" scoped>
.details {
 overflow: hidden;
 .description {
 padding: 10px;
 .label {
  display: inline-block;
  padding:0 10px;
  height: 22px;
  line-height: 22px;
  color: #fff;
  font-size: 12px;
  text-align: center;
 }
 .title {
  line-height: 30px;
  font-size: 18px;
 }
 .info {
  line-height: 26px;
  color: #949494;
  span {
  margin-right: 15px;
  }
  .iconfont {
  font-size: 12px;
  }
 }
 .summary {
  margin-top: 20px;
  color: #4b4b4b;
  font-size: 16px;
 }
 .article {
  margin-top: 10px;
 }
 }
}
</style>

看完了這篇文章，相信你對“vue如何實現(xiàn)微信分享朋友圈發(fā)送朋友的功能”有了一定的了解，如果想了解更多相關(guān)知識，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！