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 相关文章推荐
js 完美图片新闻轮转效果,腾讯大粤网首页图片轮转改造而来
Nov 21 Javascript
JavaScript中的值是按值传递还是按引用传递问题探讨
Jan 30 Javascript
Markdown+Bootstrap图片自适应属性详解
May 21 Javascript
浅谈JavaScript 函数参数传递到底是值传递还是引用传递
Aug 23 Javascript
jQuery通过ajax方法获取json数据不执行success的原因及解决方法
Oct 15 Javascript
js实现HashTable(哈希表)的实例分析
Nov 21 Javascript
利用jQuery插件imgAreaSelect实现获得选择域的图像信息
Dec 02 Javascript
利用node.js制作命令行工具方法教程(一)
Jun 22 Javascript
微信小程序module.exports模块化操作实例浅析
Dec 20 Javascript
layui中select,radio设置不生效的解决方法
Sep 05 Javascript
15分钟学会vue项目改造成SSR(小白教程)
Dec 17 Javascript
JS如何实现在弹出窗口中加载页面
Dec 03 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中对缓冲区的控制实现代码
2013/09/29 PHP
PHP不用递归实现无限分级的例子分享
2014/04/18 PHP
PHP常用函数之根据生日计算年龄功能示例
2019/10/21 PHP
js 多种变量定义(对象直接量,数组直接量和函数直接量)
2010/05/24 Javascript
JQuery自定义事件的应用 JQuery最佳实践
2010/08/01 Javascript
JQuery创建DOM节点的方法
2015/06/11 Javascript
简述AngularJS相关的一些编程思想
2015/06/23 Javascript
JS简单生成两个数字之间随机数的方法
2016/08/03 Javascript
jQuery实现右键菜单、遮罩等效果代码
2016/09/27 Javascript
jQuery插件Echarts实现的渐变色柱状图
2017/03/23 jQuery
js防刷新的倒计时代码 js倒计时代码
2017/09/06 Javascript
JS实现移动端触屏拖拽功能
2018/07/31 Javascript
小程序红包雨的实现示例
2019/02/19 Javascript
mpvue实现左侧导航与右侧内容的联动
2019/10/21 Javascript
jQuery AJAX应用实例总结
2020/05/19 jQuery
[00:50]深扒TI7聊天轮盘语音出处6
2017/05/11 DOTA
Python3.x和Python2.x的区别介绍
2013/02/12 Python
Python脚本实现虾米网签到功能
2016/04/12 Python
Mac中Python 3环境下安装scrapy的方法教程
2017/10/26 Python
Python使用matplotlib模块绘制图像并设置标题与坐标轴等信息示例
2018/05/04 Python
Python返回数组/List长度的实例
2018/06/23 Python
Python实现App自动签到领取积分功能
2018/09/29 Python
PyQt5+requests实现车票查询工具
2019/01/21 Python
python三引号输出方法
2019/02/27 Python
python处理excel绘制雷达图
2019/10/18 Python
python 实现return返回多个值
2019/11/19 Python
TensorFlow 读取CSV数据的实例
2020/02/05 Python
基于python tkinter的点名小程序功能的实例代码
2020/08/22 Python
python网络爬虫实现发送短信验证码的方法
2021/02/25 Python
css 元素选择器的简单实例
2016/05/23 HTML / CSS
LightInTheBox法国站:中国跨境电商
2020/03/05 全球购物
《太阳》教学反思
2014/02/21 职场文书
规划编制实施方案
2014/03/15 职场文书
教师师德师风个人整改方案
2014/09/18 职场文书
商业用房租赁协议书
2014/10/13 职场文书
Python编写车票订购系统 Python实现快递收费系统
2022/08/14 Python