下面我就为大家分享一篇vue实现微信分享朋友圈,发送朋友的示例讲解，具有很好的参考价值，希望对大家有所帮助。
首先下载微信jssdk引入项目中，这里我就不说怎么去安装了，如果不会的可以看一下npm教程和es6的教程。
第一步，引入微信jssdk，此处我是通过下载微信jssdk，然后用webpack引入进项目的。
第二步，获取详情数据，渲染页面。
第三步，获取详情数据成功后再获取微信签名，token等配置信息。
立即学习“前端免费学习笔记（深入）”；
第四步，通过api配置所想要的功能
思乐微信商城微分销系统
下载
思乐微信商城微分销系统是以.net+access/mssql进行开发的微信分销系统。基于微信朋友圈的传播，是打造以分销商为中心的全新微信分销体验。让粉丝实时有效的获取朋友圈流量并快速分享购买分佣。因为是基于微信，所以要在微信上体验才更好。关注我们的微信核心功能：1、自动提示用户关注微信，解决一般程序无关注微信公众号的过程2、只要通过链接进一次，不过好久注册，什么方面注册，只要是用微信注册的，都会算
代码：
<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 '@/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>上面是我整理给大家的，希望今后会对大家有帮助。
相关文章：
