Vue 应用中结合vux使用微信 jssdk的方法


Posted in Javascript onAugust 28, 2018

vux微信分享说明

分享接口只有认证公众号才能使用,域名必须备案且在微信后台设置。

先确认已经满足使用jssdk的要求再进行开发。

引入

在 main.js 中全局引入:

import { WechatPlugin } from 'vux'
Vue.use(WechatPlugin)

console.log(Vue.wechat) // 可以直接访问 wx 对象。

组件外使用

考虑到你需要在引入插件后调用config方法进行配置,你可以通过 Vue.wechat 在组件外部访问wx对象。

jssdk需要请求签名配置接口,你可以直接使用 VUX 基于 Axios 封装的 AjaxPlugin

import { WechatPlugin, AjaxPlugin } from 'vux'
Vue.use(WechatPlugin)
Vue.use(AjaxPlugin)

Vue.http.get('/api', ({data}) => {
 Vue.wechat.config(data.data)
})

组件中使用

那么之后任何组件中都可以通过 this.$wechat 访问到 wx 对象。

export default {
 created () {
 this.$wechat.onMenuShareTimeline({
  title: 'hello VUX'
 })
 }
}

我所使用的是组件外定义,组件内调用

引入对应的文件

import Vue from 'vue'
import { WechatPlugin } from 'vux'
Vue.use(WechatPlugin)//使用微信插件
//微信分享
const wxShare = (obj,callback)=>{
 // console.log(obj,callback);
 function getUrl(){
  var url = window.location.href;
  var locationurl = url.split('#')[0];
  //console.log(locationurl);

  return locationurl;
 }
 if(obj){
  var title = obj.title==undefined||obj.title==null?'泉水系统':obj.title;
  var link = obj.link==undefined||obj.link==null?window.location.href:obj.link;
  var desc = obj.desc==undefined||obj.desc==null?'泉水系统':obj.desc;
  var imgUrl = obj.imgUrl==undefined||obj.imgUrl==null?'src/img/share.png':obj.imgUrl;
  var debug = obj.debug==true?true:false;
 }else{
  alert('请传分享参数');
 }
 //微信分享
 Vue.http.get("http://获取wx_token地址").then(response => response.json()).then(data => {
  // console.log('微信微信',data)
  var wxdata = data;
  wxdata.debug = debug;
  wxdata.jsApiList= [
   // 所有要调用的 API 都要加到这个列表中
   'onMenuShareTimeline',//分享到朋友圈
   'onMenuShareAppMessage',//分享给朋友
   'onMenuShareQQ',//分享到QQ
   'onMenuShareQZone',//分享到QQ空间
   'onMenuShareWeibo'//分享到腾讯微博
  ];
  Vue.wechat.config(wxdata);


  Vue.wechat.ready(function () {
   //分享到朋友圈
   Vue.wechat.onMenuShareTimeline({
    title:title, // 分享标题
    link: link, // 分享链接
    desc: desc, // 分享描述
    imgUrl:imgUrl, // 分享图标
    success: function () {
     callback && callback();
     // 用户确认分享后执行的回调函数
    },
    cancel: function () {
     // 用户取消分享后执行的回调函数
    }
   });
   //分享到朋友
   Vue.wechat.onMenuShareAppMessage({
    title: title, // 分享标题
    desc: desc, // 分享描述
    link: link, // 分享链接
    imgUrl: imgUrl, // 分享图标
    type: '', // 分享类型,music、video或link,不填默认为link
    dataUrl: '', // 如果type是music或video,则要提供数据链接,默认为空
    success: function () {
     // 用户确认分享后执行的回调函数
     callback && callback();
    },
    cancel: function () {
     // 用户取消分享后执行的回调函数
    }
   });
   //分享到QQ
   Vue.wechat.onMenuShareQQ({
    title: title, // 分享标题
    desc: desc, // 分享描述
    link: link, // 分享链接
    imgUrl: imgUrl, // 分享图标
    success: function () {
     // 用户确认分享后执行的回调函数
     callback && callback();
    },
    cancel: function () {
     // 用户取消分享后执行的回调函数
    }
   });

   //分享到QQ空间
   Vue.wechat.onMenuShareQZone({
    title: title, // 分享标题
    desc: desc, // 分享描述
    link: link, // 分享链接
    imgUrl: imgUrl, // 分享图标
    success: function () {
     // 用户确认分享后执行的回调函数
     callback && callback();
    },
    cancel: function () {
     // 用户取消分享后执行的回调函数
    }
   });

   //分享到腾讯微博
   Vue.wechat.onMenuShareWeibo({
    title: title, // 分享标题
    desc: desc, // 分享描述
    link: link, // 分享链接
    imgUrl: imgUrl, // 分享图标
    success: function () {
     // 用户确认分享后执行的回调函数
     callback && callback();
    },
    cancel: function () {
     // 用户取消分享后执行的回调函数
    }
   });
  })
 })
}

输出

export {wxShare}

组件内调用

import { wxShare } from '封装wxShare函数的js路径'
 export default {
  name:'Home',
  data() { //选项 / 数import { ViewBox } from 'vux'
 export default {
  name:'Home',
  data() { //选项 / 数据
   return {

   }
  },
  methods: { //事件处理器

  },
  components: { //定义组件

  },
  created() { //生命周期函数
   wxShare({
    title: '分享标题', // 分享标题
    desc: '分享描述', // 分享描述
    link: window.location.href, // 分享链接
    imgUrl: 'http://图片地址share.png', // 分享图标
   // debug:true
   },function(){//分享成功后的回调函数

   });
  }

 }

以上这篇Vue 应用中结合vux使用微信 jssdk的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
解决IE下select标签innerHTML插入option的BUG(兼容IE,FF,Opera,Chrome,Safari)
May 13 Javascript
实例说明为什么不要行内使用javascript
Apr 18 Javascript
JavaScript避免内存泄露及内存管理技巧
Sep 05 Javascript
Bootstrap每天必学之进度条
Nov 30 Javascript
JavaScript判断按钮被点击的方法
Dec 13 Javascript
JavaScript Split()方法
Dec 18 Javascript
ES6概念 ymbol.for()方法
Dec 25 Javascript
微信小程序 地图map详解及简单实例
Jan 10 Javascript
微信小程序之数据缓存的实例详解
Sep 29 Javascript
jquery 获取索引值在一定范围的列表方法
Jan 25 jQuery
JS将指定的某个字符全部转换为其他字符实例代码
Oct 13 Javascript
js加减乘除精确运算方法实例代码
Jan 17 Javascript
对vux点击事件的优化详解
Aug 28 #Javascript
使用D3.js构建实时图形的示例代码
Aug 28 #Javascript
微信小程序手机号码验证功能的实例代码
Aug 28 #Javascript
AngularJS 事件发布机制
Aug 28 #Javascript
vue.js 添加 fastclick的支持方法
Aug 28 #Javascript
深入理解JavaScript 中的匿名函数((function() {})();)与变量的作用域
Aug 28 #Javascript
对vue事件的延迟执行实例讲解
Aug 28 #Javascript
You might like
PHP二维数组的去重问题解析
2011/07/17 PHP
php获得用户ip地址的比较不错的方法
2014/02/08 PHP
php实现文件下载实例分享
2014/06/02 PHP
typecho插件编写教程(六):调用接口
2015/05/28 PHP
php实现数组中索引关联数据转换成json对象的方法
2015/07/08 PHP
php微信公众平台示例代码分析(二)
2016/12/06 PHP
PHP对象实例化单例方法
2017/01/19 PHP
使用JQuery和CSS模拟超链接的用户单击事件的实现代码
2012/05/23 Javascript
jQuery Chart图表制作组件Highcharts用法详解
2016/06/01 Javascript
AngularJS中的缓存使用
2017/01/11 Javascript
函数四种调用模式以及其中的this指向
2017/01/16 Javascript
浅谈js函数三种定义方式 & 四种调用方式 & 调用顺序
2017/02/19 Javascript
jQuery插件FusionCharts绘制2D柱状图和折线图的组合图效果示例【附demo源码】
2017/04/10 jQuery
VueJs 搭建Axios接口请求工具
2017/11/20 Javascript
JS实现将二维数组转为json格式字符串操作示例
2018/07/12 Javascript
微信用户访问小程序的登录过程详解
2019/09/20 Javascript
jquery实现烟花效果(面向对象)
2020/03/10 jQuery
小程序瀑布流组件实现翻页与图片懒加载
2020/05/19 Javascript
JavaScript 防抖和节流遇见的奇怪问题及解决
2020/11/20 Javascript
Python3基础之输入和输出实例分析
2014/08/18 Python
Python中使用PDB库调试程序
2015/04/05 Python
Python与shell的3种交互方式介绍
2015/04/11 Python
Python之虚拟环境virtualenv,pipreqs生成项目依赖第三方包的方法
2019/07/23 Python
python框架django项目部署相关知识详解
2019/11/04 Python
Python之指数与E记法的区别详解
2019/11/21 Python
tensorflow dataset.shuffle、dataset.batch、dataset.repeat顺序区别详解
2020/06/03 Python
python 使用elasticsearch 实现翻页的三种方式
2020/07/31 Python
Python 在 VSCode 中使用 IPython Kernel 的方法详解
2020/09/05 Python
Mio Skincare英国官网:身体紧致及孕期身体护理
2018/08/19 全球购物
自荐信包含哪些内容
2013/10/30 职场文书
全神贯注教学反思
2014/02/03 职场文书
总裁助理岗位职责
2014/02/17 职场文书
2015年重阳节主持词
2015/07/04 职场文书
初中军训感言
2015/08/01 职场文书
2016年端午节校园广播稿
2015/12/18 职场文书
浅谈Redis缓冲区机制
2022/06/05 Redis