当前位置： 移动技术网 > IT编程>脚本编程>vue.js > vue实现微信分享朋友圈,发送朋友的示例讲解

vue实现微信分享朋友圈,发送朋友的示例讲解

2018年02月16日  | 移动技术网IT编程  | 我要评论

山东女主播电台,麓山名园房屋出租,天然气加气机

首先下载微信jssdk引入项目中，这里我就不说怎么去安装了，如果不会的可以看一下npm教程和es6的教程。

第一步，引入微信jssdk，此处我是通过下载微信jssdk，然后用webpack引入进项目的。

第二步，获取详情数据，渲染页面。

第三步，获取详情数据成功后再获取微信签名，token等配置信息。

第四步，通过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">简介</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 () {
 // 获取详情数据<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, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
  appid: this.appid, // 必填，公众号的唯一标识
  timestamp: this.timestamp, // 必填，生成签名的时间戳
  noncestr: this.noncestr, // 必填，生成签名的随机串
  signature: this.signature, // 必填，签名，见附录1
  jsapilist: ['onmenusharetimeline', 'onmenushareappmessage'] // 必填，需要使用的js接口列表，所有js接口列表见附录2
  })
  wx.onmenusharetimeline({
  title: this.details.videotitle, // 分享标题
  link: url+'#/...', // 分享链接，该链接域名或路径必须与当前页面对应的公众号js安全域名一致
  imgurl: this.details.coverurl, // 分享图标
  success () {
   alert('分享朋友圈成功')
   // 用户确认分享后执行的回调函数
  },
  cancel () {
   // 用户取消分享后执行的回调函数
  }
  })
  wx.onmenushareappmessage({
  title: this.details.videotitle, // 分享标题
  desc: this.details.videotitle, // 分享描述
  link: url+'#/...', // 分享链接，该链接域名或路径必须与当前页面对应的公众号js安全域名一致
  imgurl: this.details.coverurl, // 分享图标
  type: 'video', // 分享类型,music、video或link，不填默认为link
  dataurl: this.details.videourl, // 如果type是music或video，则要提供数据链接，默认为空
  success: function () {
   alert('分享给朋友成功')
   // 用户确认分享后执行的回调函数
  },
  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实现微信分享朋友圈,发送朋友的示例讲解就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持移动技术网。

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网