vue 项目如何使用微信分享接口

首先做微信网页都要接入微信sdk；

安装sdk

 npm install weixin-js-sdk --save

具体可以查看微信公众平台技术文档：https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115

引入sdk

vue是单页面项目，比如你想要接入微信分享功能，分享功能在每个路由地址都要有，因为每个路由的url是不一样的，就需要在每个路由地址都引入一遍。

import wx from 'weixin-js-sdk'

在组建的生命周期creatd()和mounted()里面放代码

//通过config接口注入权限验证配置  只要调后端接口就可以了。后端会把那些信息处理好，然后通过一个接口返给你这些参数

wx.config({    
　　debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。　　
　　appId: '', // 必填，公众号的唯一标    
　　timestamp: , // 必填，生成签名的时间戳
　　nonceStr: '', // 必填，生成签名的随机串
　　signature: '',// 必填，签名
　　jsApiList: [] // 必填，需要使用的JS接口列表
});

//通过error接口处理失败验证

wx.error(function(res){
    // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
});

//通过ready接口处理成功验证

wx.ready(function () {   //需在用户可能点击分享按钮前就先调用
    wx.updateAppMessageShareData({ 
　　　　title: '', // 分享标题
　　　　desc: '', // 分享描述
　　　　link: '', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
　　　　imgUrl: '', // 分享图标
       success: function () {          
          // 设置成功
 　　　　}
});

坑点：url这里要注意的就是url的问题，如果url没有正确传递，后端也会返回信息，但是签名信息会是错误的。上面提到的完整url指的是：’http(s)://’部分，以及’？’后面的GET参数部分,

但不包括’#’hash后面的部分。可以通过location.href来获取。

注意： 如果你的vue项目，路由没有开启history 模式,也就是你的url上面包含“#”，这个时候要从后端正确获取签名，就需要去掉url上#后面的字符。（url去掉’#’hash部分，可用encodeURIComponent(location.href.split('#')[0]），先编码再传递）

封装调用

因为每个页面都要注入sdk，代码量巨大，建议封装全局变量。