Moments で WeChat 共有を実装し、Vue で友達を送信する方法

ここで、Vue を使用して WeChat モーメントを共有し、友達を送信する方法の例を共有します。これは非常に参考になるものであり、皆さんの役に立つことを願っています。

まず WeChat jssdk をダウンロードしてプロジェクトに導入します。インストール方法がわからない場合は、npm チュートリアルと es6 チュートリアルを参照してください。

最初のステップは WeChat jssdk を導入することです。ここでは WeChat jssdk をダウンロードし、webpack を使用してプロジェクトに導入します。

2 番目のステップ、詳細データを取得してページをレンダリングします。

3番目のステップ詳細データの取得に成功したら、WeChatの署名、トークン、その他の構成情報を取得します。

4番目のステップ、APIを介して必要な機能を設定します

コード:

<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>

上記は、私が皆さんのためにまとめたものです。将来的に皆さんのお役に立てれば幸いです。

関連記事:

vue での cli の包括的な解釈 (詳細なチュートリアル)

angularJS でラジオを使用して 2 つのうち 1 つの選択肢を実装する方法 (詳細なチュートリアル)

angularjs でデフォルトの選択を取得するラジオボタンの値のメソッド (詳細なチュートリアル)

以上がMoments で WeChat 共有を実装し、Vue で友達を送信する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。