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 相关文章推荐
如何实现浏览器上的右键菜单
Jul 10 Javascript
用JS控制回车事件的代码
Feb 20 Javascript
使用jQuery清空file文件域的解决方案
Apr 12 Javascript
JavaScript实现梯形乘法表的方法
Apr 25 Javascript
JavaScript实现经典排序算法之选择排序
Dec 28 Javascript
AngularJS表格添加序号的方法
Mar 03 Javascript
AngualrJs清除定时器遇到的坑
Oct 13 Javascript
Vue.js上传图片到阿里云OSS存储的方法示例
Dec 13 Javascript
JavaScript继承的特性与实践应用深入详解
Dec 30 Javascript
在Vue项目中使用snapshot测试的具体使用
Apr 16 Javascript
使用vue-cli3新建一个项目并写好基本配置(推荐)
Apr 24 Javascript
JavaScript常用工具函数大全
May 06 Javascript
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
PHP实现设计模式中的抽象工厂模式详解
2014/10/11 PHP
php+xml实现在线英文词典之添加词条的方法
2015/01/23 PHP
windows平台中配置nginx+php环境
2015/12/06 PHP
基于win2003虚拟机中apache服务器的访问
2017/08/01 PHP
Laravel 队列使用的实现
2019/01/08 PHP
jQuery 使用手册(七)
2009/09/23 Javascript
jQuery学习笔记(3)--用jquery(插件)实现多选项卡功能
2013/04/08 Javascript
使用js正则控制input标签只允许输入的值
2013/07/29 Javascript
js 去掉空格实例 Trim() LTrim() RTrim()
2014/01/07 Javascript
EasyUI在表单提交之前进行验证的实例代码
2016/06/24 Javascript
Node.js实现兼容IE789的文件上传进度条
2016/09/02 Javascript
Javascript oop设计模式 面向对象编程简单实例介绍
2016/12/13 Javascript
js中实例与对象的区别讲解
2019/01/21 Javascript
vue-cli4.x创建企业级项目的方法步骤
2020/06/18 Javascript
vue集成openlayers加载geojson并实现点击弹窗教程
2020/09/24 Javascript
[45:16]完美世界DOTA2联赛PWL S3 Magma vs Phoenix 第一场 12.12
2020/12/16 DOTA
linux系统使用python监测网络接口获取网络的输入输出
2014/01/15 Python
Python字符串详细介绍
2015/05/09 Python
python 链接和操作 memcache方法
2017/03/04 Python
Python实现将sqlite数据库导出转成Excel(xls)表的方法
2017/07/17 Python
Python求两个圆的交点坐标或三个圆的交点坐标方法
2018/11/07 Python
解决Python中pandas读取*.csv文件出现编码问题
2019/07/12 Python
python检测服务器端口代码实例
2019/08/31 Python
基于ccs3的timeline时间线实现方法
2020/04/30 HTML / CSS
日本运动品牌美津浓官方购物网站:MIZUNO SHOP
2016/08/21 全球购物
RetroStage德国:复古服装
2019/02/03 全球购物
香港连卡佛百货官网:Lane Crawford
2019/09/04 全球购物
办公室打字员岗位职责
2014/04/16 职场文书
2014年接待工作总结
2014/11/26 职场文书
办公经费申请报告
2015/05/15 职场文书
大学生实习证明
2015/06/16 职场文书
商业计划书如何写?关键问题有哪些?
2019/07/11 职场文书
当你找不到方向的时候,不妨读读刘备的一生
2019/08/05 职场文书
Oracle 临时表空间SQL语句的实现
2021/09/25 Oracle
nginx中proxy_pass各种用法详解
2021/11/07 Servers
关于maven依赖 ${xxx.version}报错问题
2022/01/18 Java/Android