How to implement WeChat sharing in Moments and send friends in Vue

Below I will share with you an example of Vue implementing WeChat sharing circle of friends and sending friends. It has a good reference value and I hope it will be helpful to everyone.

First download the WeChat jssdk and introduce it into the project. I won’t go into how to install it here. If you don’t know how, you can take a look at the npm tutorial and the es6 tutorial.

The first step is to introduce WeChat jssdk. Here I download WeChat jssdk and then use webpack to introduce it into the project.

The second step, Get detailed data and render the page.

The third step, After successfully obtaining the detailed data, obtain the WeChat signature, token and other configuration information.

The fourth step, Configure the desired function through the 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>

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

Comprehensive interpretation of cli in vue (detailed tutorial)

Use radio in angularJS to achieve a single choice of two options How to use (detailed tutorial)

Get the value method of the default selected radio button in angularjs (detailed tutorial)

The above is the detailed content of How to implement WeChat sharing in Moments and send friends in Vue. For more information, please follow other related articles on the PHP Chinese website!