vue 如何调用微信分享_vue项目做微信分享总结

在做微信分享，也是遇到了许多的坑，记录一下流程，以后做到可以直接用。

安装sdk

npm install weixin-js-sdk --save

整体步骤

1.我是新建了一个js文件wxapi.js。

2.在wxapi.js中引入sdk以及配置一些基本信息(相关的配置内容是后台返的)

3.在需要做分享的页面引入wxapi.js，调用里面的方法

大概代码如下：

wxapi.js中：

/**

* 微信js-sdk

* 参考文档：https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115*/import wx from'weixin-js-sdk'import Axios from'axios'const wxApi={/**

* [wxRegister 微信Api初始化]

* @param {Function} callback [ready回调函数]*/wxRegister(data,option) { //data是微信配置信息，option是分享的配置内容

wx.config({

debug:false, //开启调试模式

appId: data.appId, //必填，公众号的唯一标识

timestamp: data.timestamp, //必填，生成签名的时间戳

nonceStr: data.nonceStr, //必填，生成签名的随机串

signature: data.signature, //必填，签名，见附录1

jsApiList: ['checkJsApi','updateTimelineShareData','updateAppMessageShareData','onMenuShareQQ','onMenuShareWeibo']//必填，需要使用的JS接口列表，所有JS接口列表见附录2

})

wx.ready(function(){

wx.updateTimelineShareData({

title: option.title,//分享标题

link: option.link, //分享链接

imgUrl: option.imgUrl, //分享图标

desc: option.desc, //分享描述

success() {//用户成功分享后执行的回调函数

option.success()

},

cancel() {//用户取消分享后执行的回调函数

option.error()

}

});

wx.updateAppMessageShareData({

title: option.title,//分享标题

desc: option.desc, //分享描述

link: option.link, //分享链接

imgUrl: option.imgUrl, //分享图标

success() {//用户成功分享后执行的回调函数

option.success()

},

cancel() {//用户取消分享后执行的回调函数

option.error()

}

})

})

}

}

exportdefault wxApi

需要分享的页面，如：index.vue

1.引入wxapi.js

import wxapi from '@/assets/js/wxapi.js';

2.页面请求完接口之后，获取配置信息，调用wxapi.js中的方法(可以写在created中，也可以写在初始化调用的犯法里面，具体根据实际项目而定)

wxapi.wxRegister(data,option);//data是微信配置信息，option是分享要配置的内容

上面的步骤就已经完成了，但是还是有一些坑，分享出去图片跟说明老是没有，后来开启了调试模式，微信返回信息是签名错了。所以这里就要注意了，我们是vue做的项目，而且路由还是用的hash，所以url上面包含"#"，这个时候后端返回的信息，签名一直都是错的。解决方案有两个：

1：router.js中路由配置换成history模式

2：url去掉’#’hash部分，可用location.href.split('#')[0]

踩完坑之后自己做一下总结：

1、一开始说要以这种点击的方式触发分享，其实目前是实现不了的

2、浏览器中的分享，其实用的是浏览器自带的，这个分享他就没办法按照你的配置来，试了一下之后发现，浏览器中自带的分享：

标题会取你页面的title

图片会取你页面的img，没有的话就是去页面截图

地址会取你当前页面的url