首先下載微信jssdk引入項(xiàng)目中，這里我就不說(shuō)怎么去安裝了，如果不會(huì)的可以看一下npm教程和es6的教程。

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

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

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

第四步，通過(guò)api配置所想要的功能

代碼：

<template> <div class="details"> <player :videoUrl="details.videoUrl" :coverUrl="details.coverUrl" :videoId="details.videoId"/> <div class="description">  <span class="label" :style="{backgroundColor: details.videoLabelColor}">{{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">簡(jiǎn)介</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" style="white-space:pre;display:inline-block;text-indent:2em;line-height:inherit;">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, // 開(kāi)啟調(diào)試模式,調(diào)用的所有api的返回值會(huì)在客戶(hù)端alert出來(lái)，若要查看傳入的參數(shù)，可以在pc端打開(kāi)，參數(shù)信息會(huì)通過(guò)log打出，僅在pc端時(shí)才會(huì)打印。  appId: this.appId, // 必填，公眾號(hào)的唯一標(biāo)識(shí)  timestamp: this.timestamp, // 必填，生成簽名的時(shí)間戳  nonceStr: this.nonceStr, // 必填，生成簽名的隨機(jī)串  signature: this.signature, // 必填，簽名，見(jiàn)附錄1  jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage'] // 必填，需要使用的JS接口列表，所有JS接口列表見(jiàn)附錄2  })  wx.onMenuShareTimeline({  title: this.details.videoTitle, // 分享標(biāo)題  link: url+'#/...', // 分享鏈接，該鏈接域名或路徑必須與當(dāng)前頁(yè)面對(duì)應(yīng)的公眾號(hào)JS安全域名一致  imgUrl: this.details.coverUrl, // 分享圖標(biāo)  success () {   alert('分享朋友圈成功')   // 用戶(hù)確認(rèn)分享后執(zhí)行的回調(diào)函數(shù)  },  cancel () {   // 用戶(hù)取消分享后執(zhí)行的回調(diào)函數(shù)  }  })  wx.onMenuShareAppMessage({  title: this.details.videoTitle, // 分享標(biāo)題  desc: this.details.videoTitle, // 分享描述  link: url+'#/...', // 分享鏈接，該鏈接域名或路徑必須與當(dāng)前頁(yè)面對(duì)應(yīng)的公眾號(hào)JS安全域名一致  imgUrl: this.details.coverUrl, // 分享圖標(biāo)  type: 'video', // 分享類(lèi)型,music、video或link，不填默認(rèn)為link  dataUrl: this.details.videoUrl, // 如果type是music或video，則要提供數(shù)據(jù)鏈接，默認(rèn)為空  success: function () {   alert('分享給朋友成功')   // 用戶(hù)確認(rèn)分享后執(zhí)行的回調(diào)函數(shù)  },  cancel: function () {   // 用戶(hù)取消分享后執(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>