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

311 阅读2分钟

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

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

首先使用已有公众号的appid,然后根据这个appid和url向后端发起请求,拿到配置所需要的参数:timestamp( 时间戳)、noncestr(随机字符串)和signature(签名)。
所有需要使用JS-SDK的页面必须先注入配置信息,否则将无法调用

二、项目引入微信jssdk

引入方式有两种,各取所需:
(1)、通过导入依赖包 首先通过npm 安装依赖 ```javascript npm i -S weixin-js-sdk ``` 然后在页面中引入 ```javascript 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加载尚未完成,用户就点击分享,这时分享出去的页面没有标题和内容
我有尝试在加载尚未完成时去禁止用户点击右上角分享按钮,但是用户体验很差,最后无疾而终