手机网页版微信分享以及微信授权

微信分享，第一次接触会发现很多坑。网页版微信分享是不支持按钮去分享的，只能通过微信右上角的按钮去分享。通过按钮分享的目前只支持APP。其实这样一来H5的分享就简单了很多。只需要调用微信官方出的微信jssdk，加上些许配置，就可以实现h5页面在微信上的分享，点击进入官方api文档;
注意：这里使用的都是微信官方最新的文档

一、首先获取配置所需要的参数

首先使用已有公众号的appid，然后根据这个appid和url向后端发起请求，拿到配置所需要的参数：timestamp( 时间戳)、noncestr(随机字符串)和signature(签名)。

所有需要使用JS-SDK的页面必须先注入配置信息，否则将无法调用

二、项目引入微信jssdk

引入方式有两种，各取所需：

(1)、通过导入依赖包
首先通过npm 安装依赖

npm i -S weixin-js-sdk

然后在页面中引入

import wx from 'weixin-js-sdk'

(2)通过script标签，引入微信官网的JS-SDK文件

<script src="http://res.wx.qq.com/open/js/jweixin-1.4.0.js" type="text/javascript"></script>

三、通过config接口注入权限验证配置

wx.config({
     debug: false, // 开启调试模式
     appId: data.appId, // 必填，公众号的唯一标识
     timestamp: data.timestamp, // 必填，生成签名的时间戳
     nonceStr: data.nonceStr, // 必填，生成签名的随机串
     signature: data.signature, // 必填，签名
     jsApiList: [
         'updateTimelineShareData',//自定义“分享到朋友圈”及“分享到QQ空间”按钮的分享内容（1.4.0）
         'updateAppMessageShareData',//自定义“分享给朋友”及“分享到QQ”按钮的分享内容（1.4.0）
     ] // 必填
 })

四、分享

原有的 wx.onMenuShareTimeline、wx.onMenuShareAppMessage、wx.onMenuShareQQ、wx.onMenuShareQZone 接口，即将废弃。这里只介绍最新的 wx.updateAppMessageShareData、wx.updateTimelineShareData接口。

(1)自定义“分享给朋友”及“分享到QQ”按钮的分享内容（1.4.0）

wx.ready(function(){
     wx.updateAppMessageShareData({
         title: option.title, // 分享标题
         desc: option.desc, // 分享描述
         link: option.link, // 分享链接
         imgUrl: option.imgUrl, // 分享图标
         success: function(res){
         }
     })
 })

(2)自定义“分享到朋友圈”及“分享到QQ空间”按钮的分享内容（1.4.0）

wx.ready(function(){
     wx.updateTimelineShareData({
         title: option.title, // 分享标题
         link: option.link, // 分享链接
         imgUrl: option.imgUrl, // 分享图标
         desc: option.desc, // 分享描述
         success: function(res){
             // 用户成功分享后执行的回调函数
             _this.$http.post(_this.$conf.env.updateShareCount, params).then(res =>{
                 alert('成功')
             }).catch(err =>{    
             })
         }
     });
 })

五、遇到的问题

(1)微信分享途中如果取消分享后走的成功回调,无法识别是否分享成功

这个问题确实是存在的，最后发现是微信官方做出的调整，本题无解，官方也有给出解释点击查看

(2)微信JS-SDK加载尚未完成，用户就点击分享，这时分享出去的页面没有标题和内容

我有尝试在加载尚未完成时去禁止用户点击右上角分享按钮，但是用户体验很差，最后无疾而终