介绍 vue是什么 & lt; template>
,& lt; div 类=癲etails"比;
,& lt; player : videoUrl=癲etails.videoUrl",: coverUrl=癲etails.coverUrl",: videoId=癲etails.videoId"/比;
,& lt; div 类=癲escription"比;
& lt;才能span 类=發abel",:在{{details.videoLabel}} & lt;/span>
& lt;才能p 类=皌itle"在{{details.videoTitle}} & lt;/p>
& lt;才能p 类=癷nfo"比;
& lt;才能span> {{details.mtime}} & lt;/span>
& lt;才能小姐:类=癷confont 图标——“祝辞& lt;/i>
,,{{details.videoPlayTimes}}
& lt;才能/p>
& lt;才能p 类=皊ummary"在简介& lt;/p>
& lt;才能p 类=癮rticle ql-editor", v-html=癲etails.videoDescription"祝辞& lt;/p>
,& lt;/div>
,& lt;/div>
& lt;/template>
& lt; script>
import player 得到& # 39;@/组件/球员# 39;
import {videoDtails的不同之处是,getApp },得到& # 39;@/config/api # 39;/*,eslint-disable no-undef */export default {
,组件:{
,球员
},
,data (), {
,return {
,,细节:{},
appId才能:& # 39;& # 39;
签名:才能,& # 39;& # 39;
,,时间戳:& # 39;& # 39;
nonceStr才能:& # 39;& # 39;
,}
},
,beforeDestroy (), {
,document.querySelector (& # 39; .htmlTitle& # 39;) .text =, & # 39;标题# 39;
},
,mounted (), {
,//获取详情数据& lt; span 类=皊pace",祝辞let url =, window.location.href.split (“#”) [0] & lt;/span>
这。http.get美元(这,videoDtails,, {videoId:,这个。$ route.query.id},, res =祝辞,{
this.details 才能=res
document.querySelector才能(& # 39;.htmlTitle& # 39;) .text =this.details.videoTitle
这个。才能http.get美元(这,getApp,, {url: url,,刷新:,真正},,res =祝辞,{
this.appId 才能=res.appId
this.signature 才能=res.signature
this.timestamp 才能=res.timestamp
this.nonceStr 才能=res.nonceStr
this.shard才能(url)
})才能
,})
},
,方法:{
,shard (url), {
wx.config({才能
调试才能:真的,,//,开启调试模式,调用的所有api的返回值会在客户端提醒出来,若要查看传入的参数,可以在pc端打开,参数信息会通过日志打出,仅在pc端时才会打印。
appId才能:this.appId,,//,必填,公众号的唯一标识
时间戳:才能,this.timestamp,,//,必填,生成签名的时间戳
,,nonceStr: this.nonceStr,,//,必填,生成签名的随机串
签名:才能,this.signature,,//,必填,签的名,见附录1
jsApiList才能:[& # 39;onMenuShareTimeline& # 39;,, & # 39; onMenuShareAppMessage& # 39;],//,必填,需要使用的JS接口列表,所有JS接口列表见附录2
})才能
wx.onMenuShareTimeline({才能
标题:才能,this.details.videoTitle,,//,分享标题
链接才能:url + & # 39; #/? # 39;,,//,分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
,,imgUrl: this.details.coverUrl,,//,分享图标
success 才能;(),{
,,警报(& # 39;分享朋友圈成功& # 39;)//,,,用户确认分享后执行的回调函数
,,},
cancel 才能;(),{//,,,用户取消分享后执行的回调函数
,,}
})才能
wx.onMenuShareAppMessage({才能
标题:才能,this.details.videoTitle,,//,分享标题
描述:,才能this.details.videoTitle,,//,分享描述
链接才能:url + & # 39; #/? # 39;,,//,分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
,,imgUrl: this.details.coverUrl,,//,分享图标
类型:才能,& # 39;视频# 39;,,//,分享类型,音乐、视频或链接,不填默认为链接
,,dataUrl: this.details.videoUrl,,//,如果类型是音乐或视频,则要提供数据链接,默认为空
,,成功:function (), {
,,警报(& # 39;分享给朋友成功& # 39;)//,,,用户确认分享后执行的回调函数
,,},
,,取消:function (), {//,,,用户取消分享后执行的回调函数
,,}
})才能
,}
,}
}
& lt;/script>
& lt; style lang=發ess", scoped>
.details {
,溢出:隐藏;
,.description {
,填充:10 px;
,.label {
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
小编给大家分享一下vue如何实现微信分享朋友圈发送朋友的功能,希望大家阅读完这篇文章之后都有所收获、下面让我们一起去探讨吧!
vue是一套用于构建用户界面的渐进式JavaScript框架,vue与其它大型框架的区别是,使用vue可以自底向上逐层应用,其核心库只关注视图层,方便与第三方库和项目整合,且使用vue可以采用单文件组件和vue生态系统支持的库开发复杂的单页应用。
首先下载微信jssdk引入项目中,这里我就不说怎么去安装了。
<强>第一步,强引入微信jssdk,此处我是通过下载微信jssdk,然后用webpack引入进项目的。
<强>第二步,获取详情数据,渲染页面。
<强>第三步,获取详情数据成功后再获取微信签的名,令牌等配置信息。
<强>第四步,强通过api配置所想要的功能
<强>代码:
