vue-cli构建项目下使用微信分享功能


Posted in Javascript onMay 28, 2018

一、index.html中引入微信官方分享js

vue-cli构建项目下使用微信分享功能

<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>

二、在src下的assets/js文件夹下新建wx.jsapi.js文件,把分享做成公用方法

使用axios来发送请求,参照 https://3water.com/article/141008.htm 配置vue-cli项目的axios

vue-cli构建项目下使用微信分享功能

代码:

import axios from 'axios'
export default {
 wxShowMenu : function() {
 axios.post('http://test.youxue.pxjy.com/wxtest').then(function(res){
  var getMsg = res.data.data;
  wx.config({
  debug: false,  //生产环境需要关闭debug模式
  appId: getMsg.appId, //appId通过微信服务号后台查看
  timestamp: getMsg.timestamp, //生成签名的时间戳
  nonceStr: getMsg.noncestr, //生成签名的随机字符串
  signature: getMsg.signature, //签名
  jsApiList: [ //需要调用的JS接口列表
   'onMenuShareTimeline', //分享给好友
   'onMenuShareAppMessage', //分享到朋友圈
   'showMenuItems',
   'hideMenuItems'
  ]
  });
  wx.ready(function() {
  wx.checkJsApi({
   jsApiList: ["showMenuItems"],
   success: function(res) {
    wx.showMenuItems({
     menuList: [
      'menuItem:share:appMessage', //发送给朋友
      'menuItem:share:timeline' //分享到朋友圈
     ]
    });
   }
  });
  //分享到朋友圈
  wx.onMenuShareTimeline({
   title: "分享描述", // 分享标题
   desc: "分享描述", //分享描述
   link: getMsg.shareLink,// 分享链接
   imgUrl: getMsg.imgUrl // 分享图标
  });
  //分享给朋友
  wx.onMenuShareAppMessage({
   title: "分享描述", // 分享标题
   desc: "分享描述", // 分享描述
   link: getMsg.shareLink, // 分享链接
   imgUrl: getMsg.imgUrl // 分享图标
  });
  });
 })
 }
}

其中分享链接和图片地址要用绝对地址,图片用方形,大小至少200*200px以上

6月份新版微信客户端发布后,用户从微信内的网页分享消息给微信好友,以及分享到朋友圈,开发者将无法获知用户是否分享完成。所以不再写成功和失败的回调方法。查看具体公告

三、main.js中引入并挂在vue的原型上

vue-cli构建项目下使用微信分享功能

代码:

import WXConfig from './assets/js/wx.jsapi' // 微信分享Vue.prototype.WXConfig = WXConfig;

四、使用

vue-cli构建项目下使用微信分享功能

代码:

this.WXConfig.wxShowMenu();

总结

以上所述是小编给大家介绍的vue-cli构建项目下使用微信分享功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
input+select(multiple) 实现下拉框输入值
May 21 Javascript
使用CSS和jQuery模拟select并附提交后取得数据的代码
Oct 18 Javascript
JQuery节点元素属性操作方法
Jun 11 Javascript
基于jQuery实现的打字机效果
Jan 16 Javascript
JavaScript获取中英文混合字符串长度的方法示例
Feb 04 Javascript
详解angularjs结合pagination插件实现分页功能
Feb 10 Javascript
js 调用百度分享功能
Feb 27 Javascript
js实现年月日表单三级联动
Apr 17 Javascript
AngularJS下$http服务Post方法传递json参数的实例
Mar 29 Javascript
angularjs使用div模拟textarea文本框的方法
Oct 02 Javascript
JavaScript代码调试方法实例小结
Jan 05 Javascript
jQuery HTML设置内容和属性操作实例分析
May 20 jQuery
vue2.0学习之axios的封装与vuex介绍
May 28 #Javascript
vue-cli项目中使用公用的提示弹层tips或加载loading组件实例详解
May 28 #Javascript
jQuery实现图片上传预览效果功能完整实例【测试可用】
May 28 #jQuery
JavaScript继承定义与用法实践分析
May 28 #Javascript
关于jquery中attr()和prop()方法的区别
May 28 #jQuery
JS数组去重常用方法实例小结【4种方法】
May 28 #Javascript
jQuery中将json数据显示到页面表格的方法
May 27 #jQuery
You might like
sqlyog 中文乱码问题的设置方法
2008/10/19 PHP
php第一次无法获取cookie问题处理
2014/12/15 PHP
变量在 PHP7 内部的实现(一)
2015/12/21 PHP
关于Laravel Route重定向的一个注意点
2017/01/16 PHP
PHP实现的下载远程文件类定义与用法示例
2017/07/05 PHP
Gambit vs ForZe BO3 第三场 2.13
2021/03/10 DOTA
IE不出现Flash激活框的小发现的js实现方法
2007/09/07 Javascript
javascript 浏览器判断 绑定事件 arguments 转换数组 数组遍历
2009/07/06 Javascript
javascript中的array数组使用技巧
2010/01/31 Javascript
动态调用CSS文件的JS代码
2010/07/29 Javascript
基于jquery的动态创建表格的插件
2011/04/05 Javascript
javascript从右边截取指定字符串的三种实现方法
2013/11/29 Javascript
node.js中的fs.realpathSync方法使用说明
2014/12/16 Javascript
javascript关于继承的用法汇总
2014/12/20 Javascript
js图片轮播插件的封装
2017/07/21 Javascript
vue-router路由懒加载和权限控制详解
2017/12/13 Javascript
[08:40]Navi Vs Newbee
2018/06/07 DOTA
python根据出生日期返回年龄的方法
2015/03/26 Python
python获得一个月有多少天的方法
2015/06/04 Python
基于Python的接口测试框架实例
2016/11/04 Python
python爬虫入门教程--快速理解HTTP协议(一)
2017/05/25 Python
让Python更加充分的使用Sqlite3
2017/12/11 Python
查找python项目依赖并生成requirements.txt的方法
2018/07/10 Python
基于python生成器封装的协程类
2019/03/20 Python
python实现爬取百度图片的方法示例
2019/07/06 Python
详解Selenium+PhantomJS+python简单实现爬虫的功能
2019/07/14 Python
Pytorch中膨胀卷积的用法详解
2020/01/07 Python
VIVOBAREFOOT赤脚鞋:让您的脚做自然的事情
2017/06/01 全球购物
Canal官网:巴西女性时尚品牌
2019/10/16 全球购物
中专毕业自我鉴定
2013/10/16 职场文书
打架检讨书100字
2014/01/08 职场文书
机械个人求职信范文
2014/01/24 职场文书
重阳节标语大全
2014/10/07 职场文书
省级三好学生主要事迹材料
2015/11/03 职场文书
MySQL中几种插入和批量语句实例详解
2021/09/14 MySQL
golang生成并解析JSON
2022/04/14 Golang