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

安装sdk

npm install weixin-js-sdk --save


引入sdk

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



import wx from 'weixin-js-sdk'



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



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，代码量巨大，建议封装全局变量。