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 相关文章推荐
用jscript启动sqlserver
Jun 21 Javascript
javascript将数组插入到另一个数组中的代码
Jan 10 Javascript
jQuery随机切换图片的小例子
Apr 18 Javascript
JavaScript自定义等待wait函数实例分析
Mar 23 Javascript
JS模拟简易滚动条效果代码(附demo源码)
Apr 05 Javascript
jQuery插件实现文件上传功能(支持拖拽)
Aug 27 Javascript
JavaScript学习小结之被嫌弃的eval函数和with语句实例详解
Aug 01 Javascript
微信小程序学习之数据处理详解
Jul 05 Javascript
Vue.js框架路由使用方法实例详解
Aug 25 Javascript
vue实现a标签点击高亮方法
Mar 17 Javascript
vue favicon设置以及动态修改favicon的方法
Dec 21 Javascript
jquery插件实现悬浮的菜单
Apr 24 jQuery
对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与浏览器缓存的分析
2013/06/03 PHP
浅析51个PHP处理字符串的函数
2013/08/02 PHP
php输出金字塔的2种实现方法
2014/12/16 PHP
php写入数据到CSV文件的方法
2015/03/14 PHP
PDO::commit讲解
2019/01/27 PHP
PHP var关键字相关原理及使用实例解析
2020/07/11 PHP
学习ExtJS form布局
2009/10/08 Javascript
JQuery与Ajax调用新浪API获取短网址的代码
2014/02/07 Javascript
js中实现多态采用和继承类似的方法
2014/08/22 Javascript
JavaScript实现计算字符串中出现次数最多的字符和出现的次数
2015/03/12 Javascript
JavaScript让Textarea支持tab按键的方法
2015/06/26 Javascript
jQuery提示插件qTip2用法分析(支持ajax及多种样式)
2016/06/08 Javascript
jsTree使用记录实例
2016/12/01 Javascript
Node.js连接postgreSQL并进行数据操作
2016/12/18 Javascript
JS字符串按逗号和回车分隔的方法
2017/04/25 Javascript
使用Vue.js和Element-UI做一个简单登录页面的实例
2018/02/23 Javascript
小程序实现展开/收起的效果示例
2018/09/22 Javascript
JavaScript中的"=、==、==="区别讲解
2019/01/22 Javascript
Vue文本模糊匹配功能如何实现
2020/07/30 Javascript
python使用matplotlib绘制折线图教程
2017/02/08 Python
python简单操作excle的方法
2018/09/12 Python
3分钟学会一个Python小技巧
2018/11/23 Python
pyqt5数据库使用详细教程(打包解决方案)
2020/03/25 Python
如何基于Python和Flask编写Prometheus监控
2020/11/25 Python
html5组织文档结构_动力节点Java学院整理
2017/07/11 HTML / CSS
eDreams巴西:廉价机票,酒店优惠和度假套餐
2017/04/14 全球购物
英国首屈一指的票务公司:See Tickets
2019/05/11 全球购物
全球工业:Global Industrial
2020/02/01 全球购物
System.Array.CopyTo()和System.Array.Clone()有什么区别
2016/06/20 面试题
装修五一活动策划案
2014/01/23 职场文书
2015年公共机构节能宣传周活动总结
2015/03/26 职场文书
卫生院义诊活动总结
2015/05/07 职场文书
运动会主持词大全
2015/07/02 职场文书
2015年全民创业工作总结
2015/07/23 职场文书
小学数学新课改心得体会
2016/01/22 职场文书
导游词之韩国济州岛
2019/10/28 职场文书