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

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

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

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

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

第四步，通过api配置所想要的功能

代码：

{{details.videoLabel}}

{{details.videoTitle}}

{{details.mtime}}

{{details.videoPlayTimes}}

简介

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 () {

// 获取详情数据let url = window.location.href.split("#")[0]

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 () {

// 用户取消分享后执行的回调函数

}

})

}

}

}

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

}

}

}

以上这篇vue实现微信分享朋友圈,发送朋友的示例讲解就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。