参考:https://www.cnblogs.com/goloving/p/9256212.html

1. main.js

import WXConfig from '../../assets/js/wx.jsapi';

2. wx.jsapi.js

import axios from 'axios'

export default {
wxShowMenu: function(shareData) {
  var localURL = location.href.split('#')[0];   var param = {
  'url': localURL
  };
   var wxData = shareData.wxData;//分享配置信息
   var Param1= shareData.param1;//假设需传参数1
   var Param2= shareData.param2;//假设需传参数2
     var ifshare = shareData.ifshare;//是否开启分享
   var _this = shareData.that;
  axios.get('*****', {//获取config信息链接
  params: param
  }).then(function(res) {
  if (res.status == 200 && res.data.result == 0) {
  var getMsg = res.data.message.ticket;
  wx.config({
  debug: false, //生产环境需要关闭debug模式
   appId: getMsg.appId, //appId通过微信服务号后台查看
  timestamp: getMsg.timestamp, //生成签名的时间戳
  nonceStr: getMsg.nonceStr, //生成签名的随机字符串
  signature: getMsg.signature, //签名
   jsApiList: [ //需要调用的JS接口列表
  'onMenuShareTimeline', //分享给好友
  'onMenuShareAppMessage', //分享到朋友圈
         'hideMenuItems'
  ]
  });    wx.ready(function() { /* wx.checkJsApi({
jsApiList: ["showMenuItems"],
success: function(res) {
wx.showMenuItems({
menuList: [
'menuItem:share:appMessage', //发送给朋友
'menuItem:share:timeline' //分享到朋友圈
]
});
}
});*/

        if (ifshare == '1') {//后端未开启分享则屏蔽分享菜单
          wx.hideAllNonBaseMenuItem();
          return;
        }

          //分享到朋友圈
wx.onMenuShareTimeline({
title: wxData.title, // 分享标题
desc: wxData.info, //分享描述
link: wxData.shareurl, // 分享链接
imgUrl: wxData.img, // 分享图标
success: function(res) {
// 用户确认分享后执行的回调函数
var param = {
param: {
param1: Param1,
param2: Param2
}
}
_this.axios.get('****', {//分享回调链接,用于自行记录判断之类
params: param
}).then(function(res) {
if (res.status == 200 && res.data.result == 0) {
console.log('分享成功');
}
}).catch(function(err) {
console.log(err);
})
console.log("分享朋友圈成功返回的信息为:", res);
},
cancel: function(res) {
// 用户取消分享后执行的回调函数
console.log("取消分享朋友圈返回的信息为:", res);
}
}); //分享给朋友
wx.onMenuShareAppMessage({
title: wxData.title, // 分享标题
desc: wxData.info, //分享描述
link: wxData.shareurl, // 分享链接
imgUrl: wxData.img, // 分享图标 success: function(res) {
// 用户确认分享后执行的回调函数
var param = {
param: {
param1: Param1,
param2: Param2
}
}
_this.axios.get('****', {//分享回调链接,用于自行记录判断之类
params: param
}).then(function(res) {
if (res.status == 200 && res.data.result == 0) {
console.log('分享成功');
}
}).catch(function(err) {
console.log(err);
})
console.log("分享朋友圈成功返回的信息为:", res);
},
cancel: function(res) {
// 用户取消分享后执行的回调函数
console.log("取消分享给朋友返回的信息为:", res);
}
});
});
}
})
},
}

3. vue中

activated(){
this.getShare();//放在这里获取是因为我用了keep-alive(在组件切换过程中将状态保留在内存中,防止重复渲染DOM),而此方法需要“每次进入组件都调用,从而初始化微信分享配置等”——关键,否则分享会出问题。
},
methods(){
  getShare(){
let _this = this,
shareData = {
     wxData: wxShareInfo,//分享配置信息
     param1: _this.param1,
      param2: _this.param2,
      ifshare: _this.ifshare,
     that: _this
     };
    _this.WXConfig.wxShowMenu(shareData);
  }
}

vue 配置微信分享的更多相关文章

  1. [转]Vue项目全局配置微信分享思路详解

    这篇文章给大家介绍了vue项目全局配置微信分享思路讲解,使用vue作为框架,使用vux作为ui组件库,具体内容详情大家跟随脚本之家小编一起学习吧 这个项目为移动端项目,主要用于接入公众号服务.项目采用 ...

  2. vue实现微信分享朋友圈和朋友功能

    vue实现微信分享朋友圈和朋友功能 A-A+ haibao  2018-10-25  11  21  6.2 k  百度已收录  前端开发 温馨提示:本文共3536个字,读完预计9分钟. 这两天在开发 ...

  3. Vue+Vue-router微信分享功能

    在使用vue和vue-router路由框架已经开发过好几个项目了,其中也遇到不少坑,有些坑各种搜也没有找到非常理想的答案. vue学习相对来说还是比较简单,官方文档说明非常清楚(https://cn. ...

  4. vue项目微信分享之后路由链接被破坏怎么办

    异常现象: 多页面应用,路由采用hash模式,链接带有"#". 在微信中分享到朋友圈或好友时,分享出去的路由被破坏,打开分享的链接,路由中的“#”会被去掉并追加?fromTimel ...

  5. Vue项目history模式下微信分享总结

    原文 : http://justyeh.top/post/39/ 2019-07-02 Vue微信分享 每回遇到微信分享都是一个坑,目前的商城项目使用Vue开发,采用history的路由模式,配置微信 ...

  6. VUE使用微信JDK(附踩坑记录)

    VUE使用微信分享SDK(附踩坑记录) 微信分享官方文档 安装JS-SDK npm i -S weixin-jsapi 引入包 ES5 写法 const wx = require('weixin-js ...

  7. React Native微信分享 朋友圈分享 Android/iOS 通用

    超详细React Native实现微信好友/朋友圈分享功能-Android/iOS双平台通用   2016/06/16 |  React Native技术文章 |  Sky丶清|  暂无评论 |  1 ...

  8. 一篇搞定微信分享和line分享

    前言 在h5的页面开发中,分享是不可或缺的一部分,对于一些传播性比较强的页面,活动页之类的,分享功能极为重要.例如,京东等电商年末时会有一系列的总结h5在微信中传播,就不得不提到微信的分享机制. 微信 ...

  9. React Native实现微信分享

    (一)前言 现阶段大家在使用React Native开发项目的时候,基本都会使用到微信好友或者微信朋友圈分享功能吧,那么今天我就带大家实现以下RN微信好友以及朋友圈的分享功能. 刚创建的React N ...

随机推荐

  1. Socket通信1.0

    Socket通信1.0 服务器端: package page; import java.io.BufferedReader; import java.io.IOException; import ja ...

  2. 3. 初识jmeter及JDK安装

    jmeter 介绍 Apache JMeter™应用程序是开源软件,100%纯Java应用程序,旨在加载测试功能行为和测量性能.它最初是为测试Web应用程序而设计的,但后来扩展到其他测试功能. Jme ...

  3. shell 检查文件夹是否包含文件,或者只是空文件

    empty_dir_check(){ check_dir=$ if [ -d $check_dir ];then file_list=` -maxdepth -type f` if [ $file_l ...

  4. C语言——二维数组

    目录 二维数组 一.二维数组的定义 二.二维数组的初始化 三.通过赋初值定义二维数组的大小 四.二维数组与指针 二维数组 一.二维数组的定义 类型名 数组名[ 常量表达式1 ][ 常量表达式2 ] i ...

  5. Java缓冲区读写

    缓冲区读 有两种方法从缓冲区读取数据: 绝对位置 相对位置 使用四个版本重载的get()方法用于从缓冲区读取数据. get(int index)返回给定索引处的数据. get()从缓冲区中的当前位置返 ...

  6. Ibatis sql语句1

    <?xml version="1.0" encoding="UTF-8" ?><!DOCTYPE sqlMap PUBLIC "-/ ...

  7. java-day25

    . 标签学习:         1. 文件标签:构成html最基本的标签             * html:html文档的根标签             * head:头标签.用于指定html文档 ...

  8. 长度为x的本质不同的串的出现次数 SPOJ - NSUBSTR 后缀自动机简单应用

    题意: 长度为x的本质不同的串的出现次数 题解: 先处理出每一个节点所对应的子串出现的次数 然后取max就好了 #include <set> #include <map> #i ...

  9. 编写一个简单的内核驱动模块时报错 “/lib/modules/3.13.0-32-generic/bulid: 没有那个文件或目录。 停止。”

    编写一个简单的内核驱动模块 static int hello_init() { printk(“hello,I am in kernel now\n”); ; } void addfunc(int a ...

  10. 借用数组对象的prototype给数组扩充降维方法

    原理:只要是一个对象,他都有一个prototype原型对象,保存共有的属性和方法. <!DOCTYPE html> <html lang="en"> < ...