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


Posted in Javascript onFebruary 10, 2018

首先下载微信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实现微信分享朋友圈,发送朋友的示例讲解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Gird事件机制初级读本
Mar 10 Javascript
JS onmousemove鼠标移动坐标接龙DIV效果实例
Dec 16 Javascript
jQuery中[attribute*=value]选择器用法实例
Dec 31 Javascript
javascript与Python快速排序实例对比
Aug 10 Javascript
基于jquery实现一个滚动的分步注册向导-附源码
Aug 26 Javascript
jQuery EasyUI Dialog拖不下来如何解决
Sep 28 Javascript
Jquery基础之事件操作详解
Jun 14 Javascript
html判断当前页面是否在iframe中的实例
Nov 30 Javascript
jquery实现左右轮播图效果
Sep 28 jQuery
关于vue单文件中引用路径的处理方法
Jan 08 Javascript
Vue自定义过滤器格式化数字三位加一逗号实现代码
Mar 23 Javascript
使用Angular 6创建各种动画效果的方法
Oct 10 Javascript
使用 vue.js 构建大型单页应用
Feb 10 #Javascript
javascript中的隐式调用
Feb 10 #Javascript
VUEJS 2.0 子组件访问/调用父组件的实例
Feb 10 #Javascript
webpack之devtool详解
Feb 10 #Javascript
React组件refs的使用详解
Feb 09 #Javascript
详解vue-cli项目中的proxyTable跨域问题小结
Feb 09 #Javascript
使用express搭建一个简单的查询服务器的方法
Feb 09 #Javascript
You might like
php+mysql分页代码详解
2008/03/27 PHP
PHP安全技术之 实现php基本安全
2010/09/04 PHP
PHP循环遍历数组的3种方法list()、each()和while总结
2014/11/19 PHP
php约瑟夫问题解决关于处死犯人的算法
2015/03/23 PHP
PHP中实现Bloom Filter算法
2015/03/30 PHP
PHP整合PayPal支付
2015/06/11 PHP
thinkphp框架实现数据添加和显示功能
2016/06/29 PHP
PHP实现的字符串匹配算法示例【sunday算法】
2017/12/19 PHP
php中输出json对象的值(实现方法)
2018/03/07 PHP
jquery.tmpl JQuery模板插件
2011/10/10 Javascript
基于jquery DOM写的类似微博发布的效果
2012/10/20 Javascript
jquery插件jquery倒计时插件分享
2013/12/27 Javascript
在css加载完毕后自动判断页面是否加入css或js文件
2014/09/10 Javascript
JavaScript中检查对象property的存在性方法介绍
2014/12/30 Javascript
Javascript实现飞动广告效果的方法
2015/05/25 Javascript
微信小程序实现页面跳转传值的方法
2017/10/12 Javascript
微信小程序HTTP接口请求封装的实现
2019/02/21 Javascript
Vue移动端右滑屏幕返回上一页附源码下载
2019/06/26 Javascript
[36:16]完美世界DOTA2联赛PWL S3 access vs Rebirth 第一场 12.19
2020/12/24 DOTA
Python lambda和Python def区别分析
2014/11/30 Python
Python实现将DOC文档转换为PDF的方法
2015/07/25 Python
Python使用面向对象方式创建线程实现12306售票系统
2015/12/24 Python
Python selenium 父子、兄弟、相邻节点定位方式详解
2016/09/15 Python
python实现redis三种cas事务操作
2017/12/19 Python
详解Django解决ajax跨域访问问题
2018/08/24 Python
在python2.7中用numpy.reshape 对图像进行切割的方法
2018/12/05 Python
python yield关键词案例测试
2019/10/15 Python
django之从html页面表单获取输入的数据实例
2020/03/16 Python
Selenium 滚动页面至元素可见的方法
2020/03/18 Python
CAT鞋加拿大官网:CAT Footwear加拿大
2020/08/05 全球购物
写给女朋友的道歉信
2014/01/12 职场文书
司机职责范本
2014/03/08 职场文书
企业出纳岗位职责
2014/03/12 职场文书
反对形式主义、官僚主义、享乐主义和奢靡之风整改措施
2014/09/17 职场文书
2015年见习期工作总结
2014/12/12 职场文书
基于Nginx实现限制某IP短时间访问次数
2021/03/31 Servers