Comment implémenter le partage WeChat dans Moments et envoyer des amis dans Vue

Ci-dessous, je vais partager avec vous un exemple de Vue implémentant le cercle d'amis de partage WeChat et l'envoi d'amis. Il a une bonne valeur de référence et j'espère qu'il sera utile à tout le monde.

Téléchargez d'abord le jssdk WeChat et introduisez-le dans le projet. Je n'entrerai pas dans les détails de son installation ici. Si vous ne savez pas comment, vous pouvez jeter un œil au tutoriel npm et à l'es6. tutoriel.

La première étape, présente WeChat jssdk Ici, je télécharge WeChat jssdk puis j'utilise webpack pour l'introduire dans le projet.

La deuxième étape, obtenir des données détaillées et afficher la page.

La troisième étape, Après avoir obtenu avec succès les données détaillées, obtenez la signature WeChat, le jeton et d'autres informations de configuration.

La quatrième étape, Configurer la fonction souhaitée via l'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>

J'ai compilé ce qui précède pour vous, j'espère que cela vous sera utile à l'avenir.

Articles associés :

Interprétation complète de cli dans vue (tutoriel détaillé)

Utiliser la radio dans angulaireJS pour obtenir un choix unique de deux options Comment utiliser (tutoriel détaillé)

Obtenir la méthode de valeur du bouton radio sélectionné par défaut dans angulairejs (tutoriel détaillé)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!