刚开始做前端的时候写了很多微信H5页面。现将本次开发过程中遇到的问题以及解决方法记录下来。希望对前端小伙伴有所帮助。一、微信分享文档及配置（基础）1、微信分享官网文档重要说明：分享接口：请注意不得有诱导分享等违法行为。为诱导分享行为，公众号的接口权限将被永久撤销。详细规则请查看：朋友圈管理常见问题解答。请注意，原来的wx.onMenuShareTimeline（分享给朋友圈）、wx.onMenuShareAppMessage（分享给朋友）、wx.onMenuShareQQ、wx.onMenuShareQZone接口即将被废弃。请尽快迁移使用客户端6.7.2和JSSDK1.4.0及以上版本支持的wx.updateAppMessageShareData（分享给朋友）和wx.updateTimelineShareData（分享给朋友圈）接口。微信官网文档：https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html。2.appid对应的公众号是否有分享接口的权限？获取到接口状态，说明有权限。如下图（重要）。3.设置白名单并绑定域名(1)共享服务器的外网ip地址需要加入白名单，如下图：(2)绑定域名，首先登录微信公众平台进入“公众号设置”，在“功能设置”中填写“JS接口安全域名”。备注：登录后可在“开发者中心”查看相应接口权限。二、JSSDK使用步骤（进阶）正常流程按照官方文档中的步骤进行。1、绑定域名，首先登录微信公众平台，进入“公众号设置”的“功能设置”，填写“JS接口安全域名”。备注：登录后可在“开发者中心”查看相应接口权限。2、导入JS文件在需要调用JS接口的页面导入如下JS文件，（支持https）：http://res.wx.qq.com/open/js/jweixin-1.6.0.js如果需要进一步提高服务稳定性，以上资源无法访问时，可以访问：http://res2.wx.qq.com/open/js/jweixin-1.6.0.js（支持https）。备注：支持使用AMD/CMD标准模块加载方式加载。3、通过config接口注入权限验证配置。所有需要使用JS-SDK的页面必须先注入配置信息，否则无法调用（同一个url只需要调用一次，换url的SPA的webapp每次都可以换url变化，目前安卓微信客户端不支持pushState新的H5特性，所以使用pushState实现webapp的页面会导致签名失败，Android6.2会修复这个问题）.wx.config({debug:true,//开启调试模式，所有API调用的返回值都会显示在客户端alert上，如果要查看传入的参数，可以在PC端开启，并且参数信息会通过日志打印出来，只会在pc端打印。generatednonceStr:'',//必填，签名生成随机字符串signature:'',//必填，签名jsApiList:[]//必填，要使用的JS接口列表});4、通过ready接口验证成功wx.ready(function(){//config信息验证通过后，会执行ready方法，所有接口调用必须在config接口得到结果后，config是一个异步客户端的操作，所以如果需要在页面加载时调用相关接口，必须将相关接口放在ready函数中调用，以保证正确执行。对于只有在用户触发时才调用的接口，直接调用即可，不需要放在ready函数中。});三、vue分享好友和朋友圈（实践）项目场景：一个h5界面需求点击右上角三个点，点击微信好友，分享标题和图片给好友。在vue项目中，共享headertitle、introduction、thumbnail等信息。操作流程1、下载weixin-js-sdknpminstallweixin-js-sdk--save2、在需要分享的页面引入importwxfrom'weixin-js-sdk'；//引入wxjsimport{shares}from'@/api/index';//分享接口传给后台，地址（与域名一致）3.在methods中写调用方法//vue调用微信自定义分享getShareInfo(){this.save={url:location.href.split('#')[0]//只需要传当前页地址};shares(this.save).then(res=>{constconfig=res.data;wx.config({appId:config.appId,//appID唯一标识符公众号timestamp:config.timestamp,//时间戳生成签名nonceStr:config.nonceStr,//生成签名的随机字符串signature:config.signature,//生成签名jsApiList:['updateAppMessageShareData',//分享给好友'updateTimelineShareData',//分享到朋友圈]});wx.ready(()=>{varshareData={title:'王者归来-王者闯关特训营',desc:'助力青铜王者之路',link:https://www.baidu.com/,//分享后地址imgUrl:'分享图片地址'};//点击分享wx.updateAppMessageShareData(shareData);wx.updateTimelineShareData(shareData);});});}4。调用mounted()中的共享方法{this.getShareInfo();//调用分享事件},5.判断微信浏览器打开分享时，需要判断微信浏览器是否打开，如果没有则提示无法分享varbroser=window.navigator.userAgent.toLowerCase();//通过正则表达式检查broser是否包含微信字符串if(broser.match(/MicroMessenger/i)=='micromessenger'){console.log('微信浏览器');//this.weixin();this.showContent=true;}else{this.$toast.warn('请使用微信浏览器打开');}重要提示：注意h5分享是通过微信浏览器右上角的三个点完成的，在点击右上角分享之前先Injectconfig/ready，官网有说明。自定义“分享给朋友”和“分享给QQ”按钮的分享内容(1.4.0)*需要在用户点击分享按钮前调用。wx.ready(function(){//需要调用wx.updateAppMessageShareData({title:'',//分享标题desc:'',//分享描述link:'',/在用户点击分享按钮之前/分享链接，链接域名或路径必须与当前页面对应的公众号JS安全域名一致imgUrl:'',//分享图标成功:function(){//设置成功}})});扩展知识点//使用从后端获取的数据配置wxconfigwx.config({debug:true,//开启debug模式，调用的所有API的返回值都会在客户端告警.查看传入的参数，可以在PC端打开，参数信息会通过log打印出来，只有在PC端才会打印出来。appId:res.appId,//必填，公众号的唯一标识，自己填！timestamp:res.timestamp,//必填，生成签名的时间戳，刚才接口获取的数据nonceStr:res.nonceStr,//必填，生成签名的随机字符串signature:res.signature,//Mandatory,Signature,见附录1jsApiList:['onMenuShareTimeline','onMenuShareAppMessage']});wx.ready(function(){//如果wx.config配置正常，会自动到这里console.log('readycompleted')//自定义“分享给朋友”和“分享到QQ”按钮的分享内容wx.updateAppMessageShareData({title:option.shareTitle,//分享标题desc:option.shareDesc,//描述sharinglink:option.shareUrl,//分享urlimgUrl:option.shareImg//分享图片});//自定义“分享到朋友圈”和“分享到QQ空间”按钮的点wx.updateTimelineShareData({title:option.shareTitle,desc:option.shareDesc,链接:option.shareUrl,imgUrl:option.shareImg,});});四、要点和踩坑日志（深度和广度）1、H5微信分享，点击分享无法开启微信分享？（自己写的分享按钮）解决方法：H5无法发起微信分享，H5需要引导用户点击右上角分享。2、测试账号在调用js接口前需要注意什么？解决方法：设置好JS接口的安全域后，开发者可以通过关注测试账号，调用该域名下微信打开的JS接口。请阅读微信JSDK开发文档。3、wx.config初始化失败的情况有很多，主要有以下几种：（1）Java后台前面的url和共享的url不一致，需要完全一致。比如后台是http，分享地址是https。(2)参数错误。4、分享界面没有权限的错误有两种情况。一是参数不对；另一种是没有获取公众号中分享界面的状态。5、短链接导致系统无法使用微信分享分析。原因：因为初始化的时候进来的是短链接，一开始是通过脚本引入的，所以微信sdk已经监听到了，但是我们wxsdk配置里面的链接是针对我们要的长链接分享，微信会认为是无效配置，所以微信分享不会生效。6、微信分享链接出现config:invalidsignature错误的解决方法。分享时提示错误“{"errMsg":"config:invalidsignature"}"。一般这个错误多是因为获取签名失败，获取签名失败的原因是多种多样的。子秦在开发的时候也遇到过这种情况，网上找了很多教程，自己解决了问题。签名无效签名错误。建议按照以下顺序检查：确认签名算法正确，使用http://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=jsapisign页面的工具进行验证.确认config中的nonceStr（js中标准大写S）和timestamp与签名中使用的对应noncestr和timestamp一致。确认url为页面的完整url（请在当前页面alert(location.href.split('#')[0])确认），包括'http(s)://'部分，以及这'？'在GET参数部分后面，但不包括'#'hash之后的部分。确保config中的appid与获取jsapi_ticket的appid相同。确保缓存access_token和jsapi_ticket。请确保您获取的用于签名的url是动态获取的。动态页面请参考示例代码中php的实现方法。如果是html的静态页面，前端通过ajax将url传给后台签名，前端需要用js获取当前页面除'#'hash部分的链接（可以通过location.href.split('#')[0]获取，需要encodeURIComponent），因为页面一旦被分享，微信客户端会在你的链接末尾添加其他参数。如果当前链接不是动态获取的，共享页面的签名就会失败。相关技术点：https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html。查找：附录5-常见错误和解决方案。
