微信H5页面分享

微信H5页面分享微信分享乍看复杂，其实很简单。只需要调用微信官方发布的微信jssdk，添加一些配置就可以在微信上分享h5页面了。官方文档地址为：https://mp.weixin.qq.com/wiki...1.获取基本信息找到公众号已有的appid，根据appid和url向后台发起请求，并获取配置所需的参数：时间戳、noncestr和签名。二、实现1、页面导入JS-SDK文件通过script标签，从微信官网导入JS-SDK文件2.基础配置wx.config({debug:false,//是否开启调试模式appId:appid,//appidtimestamp:timestamp,//时间戳nonceStr:noncestr,//随机字符串signature:signature,//签名jsApiList:['onMenuShareTimeline','onMenuShareAppMessage','onMenuShareQQ','onMenuShareWeibo','onMenuShareQZone']//JS接口列表被使用})3.使用wx.ready(function(){//分享给朋友wx.onMenuShareAppMessage({title:title,//分享标题desc:desc,//分享描述link:link,//分享链接imgUrl:imgUrl,//分享图标success:function(){doShareDone()},cancel:function(){doShareCancel()}})//分享到朋友圈wx.onMenuShareTimeline({title:title,//分享标题link:link,//分享链接imgUrl:imgUrl,//分享图标success:function(){doShareDone()},cancel:function(){doShareCancel()}})})//分享成功回调函数ondoShareDone(){console.log('分享成功')}//取消分享回调函数doShareCancel(){console.log('取消分享')}3.当wx.config中的debug字段设置为true时进行调试，可以使用微信开发者工具调试调试，选择公众号网页项目，输入页面地址。4.遇到的问题及解决方案微信JS-SDK文档的附录5中有大部分问题的解决方案。这里我列出一些我遇到的没有提供解决方案的问题。1.UncaughtTypeError:Cannotreadproperty'config'ofundefined解决方法：html页面单独引入sdk，组件也引入一次sdk，造成问题，删除其中一个。2.Uncaught(inpromise)TypeError:Cannotreadproperty'ready'ofundefined解决方法：同问题1。3.Invalidsignature解决方法：如果文档中的方法都不能解决这个问题，还有一种方法，先set一个最基本的配置，把它configok，然后设置好你需要的各种参数的分享副本，这样就可以绕过配置分享成功了。说起来可能有点啰嗦，简单理解就是只要页面上有config配置成功，就可以继续配置其他的共享，即使这个共享配置的签名无效。