首先下载微信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实现微信分享朋友圈,发送朋友的示例讲解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。
标签:
vue,微信,分享,朋友圈
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件!
如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
暂无“vue实现微信分享朋友圈,发送朋友的示例讲解”评论...
《魔兽世界》大逃杀!60人新游玩模式《强袭风暴》3月21日上线
暴雪近日发布了《魔兽世界》10.2.6 更新内容,新游玩模式《强袭风暴》即将于3月21 日在亚服上线,届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。
艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕,并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时,他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中,玩家将会进入一个全新的海盗主题大逃杀式限时活动,其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场,作为一个独立于主游戏之外的活动,玩家可以用大逃杀的风格来体验《魔兽世界》,不分职业、不分装备(除了你在赛局中捡到的),光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式,玩家在加入海盗主题的预赛大厅区域前,可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹,《巨龙崛起》和《魔兽世界:巫妖王之怒 经典版》的玩家都可以获得奖励。
更新动态
2024年10月06日
2024年10月06日
- 群星《前途海量 电影原声专辑》[FLAC/分轨][227.78MB]
- 张信哲.1992-知道新曲与精丫巨石】【WAV+CUE】
- 王翠玲.1995-ANGEL【新艺宝】【WAV+CUE】
- 景冈山.1996-我的眼里只有你【大地唱片】【WAV+CUE】
- 群星《八戒 电影原声带》[320K/MP3][188.97MB]
- 群星《我的阿勒泰 影视原声带》[320K/MP3][139.47MB]
- 纪钧瀚《胎教古典音乐 钢琴与大提琴的沉浸时光》[320K/MP3][148.91MB]
- 刘雅丽.2001-丽花皇后·EMI精选王【EMI百代】【FLAC分轨】
- 齐秦.1994-黄金十年1981-1990CHINA.TOUR.LIVE精丫上华】【WAV+CUE】
- 群星.2008-本色·百代音乐人创作专辑【EMI百代】【WAV+CUE】
- 群星.2001-同步过冬AVCD【环球】【WAV+CUE】
- 群星.2020-同步过冬2020冀待晴空【环球】【WAV+CUE】
- 沈雁.1986-四季(2012梦田复刻版)【白云唱片】【WAV+CUE】
- 纪钧瀚《胎教古典音乐 钢琴与大提琴的沉浸时光》[FLAC/分轨][257.88MB]
- 《国语老歌 怀旧篇 3CD》[WAV/分轨][1.6GB]