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

 更新时间:2018年05月28日 10:55:09   作者:web_xyk  
这篇文章主要介绍了vue-cli构建项目下使用微信分享功能,本文通过实例代码相结合的形式给大家介绍的非常详细,感兴趣的朋友跟随脚本之家小编一起学习吧

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


<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://www.jb51.net/article/141008.htm 配置vue-cli项目的axios


代码:

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的原型上


代码:

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

四、使用


代码:

this.WXConfig.wxShowMenu();

总结

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

相关文章

  • vue-cli使用stimulsoft.reports.js的详细教程

    vue-cli使用stimulsoft.reports.js的详细教程

    Stimulsoft Reports.JS是一个使用JavaScript和HTML5生成报表的平台。它拥有所有拥来设计,编辑和查看报表的必需组件。该报表工具根据开发人员数量授权而不是根据应用程序的用户数量。接下来通过本文给大家介绍vue-cli使用stimulsoft.reports.js的方法,一起看看吧
    2021-12-12
  • 解决安装vue3脚手架@vue/cli报4048错误问题

    解决安装vue3脚手架@vue/cli报4048错误问题

    这篇文章主要介绍了解决安装vue3脚手架@vue/cli报4048错误问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-07-07
  • 详解Vue中Axios封装API接口的思路及方法

    详解Vue中Axios封装API接口的思路及方法

    这篇文章主要介绍了详解Vue中Axios封装API接口的思路及方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-10-10
  • vue两个组件间值的传递或修改方式

    vue两个组件间值的传递或修改方式

    这篇文章主要介绍了vue两个组件间值的传递或修改的实现代码,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-07-07
  • Vuex中actions的使用教程详解

    Vuex中actions的使用教程详解

    actions作为Vuex的五大核心之一,它的属性是用来处理异步方法的,通过提交mutations实现。本文将具体介绍一下actions的使用教程,需要的可以参考一下
    2022-01-01
  • vue中正确使用jsx语法的姿势分享

    vue中正确使用jsx语法的姿势分享

    这篇文章主要给大家介绍了关于vue中正确使用jsx的相关资料,JSX就是Javascript和XML结合的一种格式,React发明了JSX,利用HTML语法来创建虚拟DOM,当遇到<,JSX就当HTML解析,遇到{就当JavaScript解析,需要的朋友可以参考下
    2021-07-07
  • vue中关于confirm确认框的用法

    vue中关于confirm确认框的用法

    这篇文章主要介绍了vue中关于confirm确认框的用法,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-08-08
  • 简单理解Vue条件渲染

    简单理解Vue条件渲染

    这篇文章主要帮助大家简单理解Vue条件渲染,什么是Vue条件渲染,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-12-12
  • vue中防抖和节流的使用方法

    vue中防抖和节流的使用方法

    防抖和节流是我们在开发过程中常用优化性能的方式,可以减少不必要的计算,不浪费资源,只在适合的时候再进行触发计算,这篇文章主要给大家介绍了关于vue中防抖和节流使用的相关资料,需要的朋友可以参考下
    2021-08-08
  • vue 使用html2canvas将DOM转化为图片的方法

    vue 使用html2canvas将DOM转化为图片的方法

    这篇文章主要介绍了vue 使用html2canvas将DOM转化为图片的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-09-09

最新评论