h5页面在微信端的分享

上个月做了一个h5活动页面，涉及微信分享，需要调用微信官方jssdk，加上一些配置
官方文档地址：https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115

一、获取基本信息

找到已有公众号的appid,根据这个appid和url向后端发起请求，拿到配置所需要的参数：timestamp( 生成签名的时间戳)、nonceStr(生成签名的随机串)、signature(签名)

二、实现

1.页面引入JS-SDK文件

1	<script src="//res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>

2.基本配置

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

3.使用

 wx.ready(() => {
    // 分享到朋友圈
    wx.onMenuShareTimeline({
        title: title, // 分享标题
        link: link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
        imgUrl: imgUrl, // 分享图标
        success: () => {console.log('分享成功')}, // 用户点击了分享后执行的回调函数
        cancel:  () => {console.log('取消分享')}
   })
   // 分享给好友
   wx.onMenuShareAppMessage({
        title: title, // 分享标题
        desc: desc, // 分享描述
        link: link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
        imgUrl: imgUrl, // 分享图标
        success: () => {console.log('分享成功')}, // 用户点击了分享后执行的回调函数
        cancel:  () => {console.log('取消分享')}
  })
})

三、调试

wx.config里的debug字段设置为true时，就可以进行调试。
到微信开发者工具选择公众号网页项目，输入页面地址就可以了。

四、遇到的问题及解决方案

微信JS-SDK说明文档的附录5里有大部分问题的解决方案。
https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115