So implementieren Sie die WeChat-Freigabe in Moments und senden Freunde in Vue

Im Folgenden werde ich ein Beispiel für die Implementierung von WeChat zum Teilen von Freunden und zum Senden von Freunden mit Ihnen teilen. Es hat einen guten Referenzwert und ich hoffe, dass es für alle hilfreich ist.

Laden Sie zuerst das WeChat jssdk herunter und führen Sie es in das Projekt ein. Ich werde hier nicht näher darauf eingehen, wie man es installiert. Wenn Sie nicht wissen, wie, können Sie sich das npm-Tutorial und das es6 ansehen Tutorial.

Der erste Schritt: Einführung von WeChat jssdk Hier lade ich WeChat jssdk herunter und verwende es dann, um es in das Projekt einzuführen.

Im zweiten Schritt erhalten Sie detaillierte Daten und rendern Sie die Seite.

Der dritte Schritt, Nachdem die detaillierten Daten erfolgreich abgerufen wurden, erhalten Sie die WeChat-Signatur, das Token und andere Konfigurationsinformationen.

Der vierte Schritt, Konfigurieren Sie die gewünschte Funktion über die API

Code:

<template>
 <p class="details">
 <player :videoUrl="details.videoUrl" :coverUrl="details.coverUrl" :videoId="details.videoId"/>
 <p 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">简介</p>
  <p class="article ql-editor" v-html="details.videoDescription"></p>
 </p>
 </p>
</template>
<script>
import player from &#39;@/components/player&#39;
import { videoDtails, getApp } from &#39;@/config/api&#39;
/* eslint-disable no-undef */
export default {
 components: {
 player
 },
 data () {
 return {
  details: {},
  appId: &#39;&#39;,
  signature: &#39;&#39;,
  timestamp: &#39;&#39;,
  nonceStr: &#39;&#39;
 }
 },
 beforeDestroy () {
 document.querySelector(&#39;.htmlTitle&#39;).text = &#39;title&#39;
 },
 mounted () {
 // 获取详情数据<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(&#39;.htmlTitle&#39;).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, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
  appId: this.appId, // 必填，公众号的唯一标识
  timestamp: this.timestamp, // 必填，生成签名的时间戳
  nonceStr: this.nonceStr, // 必填，生成签名的随机串
  signature: this.signature, // 必填，签名，见附录1
  jsApiList: [&#39;onMenuShareTimeline&#39;, &#39;onMenuShareAppMessage&#39;] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
  })
  wx.onMenuShareTimeline({
  title: this.details.videoTitle, // 分享标题
  link: url+&#39;#/...&#39;, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
  imgUrl: this.details.coverUrl, // 分享图标
  success () {
   alert(&#39;分享朋友圈成功&#39;)
   // 用户确认分享后执行的回调函数
  },
  cancel () {
   // 用户取消分享后执行的回调函数
  }
  })
  wx.onMenuShareAppMessage({
  title: this.details.videoTitle, // 分享标题
  desc: this.details.videoTitle, // 分享描述
  link: url+&#39;#/...&#39;, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
  imgUrl: this.details.coverUrl, // 分享图标
  type: &#39;video&#39;, // 分享类型,music、video或link，不填默认为link
  dataUrl: this.details.videoUrl, // 如果type是music或video，则要提供数据链接，默认为空
  success: function () {
   alert(&#39;分享给朋友成功&#39;)
   // 用户确认分享后执行的回调函数
  },
  cancel: function () {
   // 用户取消分享后执行的回调函数
  }
  })
 }
 }
}
</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>

Ich habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

Umfassende Interpretation von CLI in Vue (ausführliches Tutorial)

Verwenden von Radio in AngularJS, um eine einzelne Auswahl zu erreichen zwei Optionen. Verwendung (ausführliches Tutorial)

Erhalten Sie die Wertmethode des standardmäßig ausgewählten Optionsfelds in AngularJS (ausführliches Tutorial)

Das obige ist der detaillierte Inhalt vonSo implementieren Sie die WeChat-Freigabe in Moments und senden Freunde in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!