微信H5分享(朋友圈、好友)

258 阅读2分钟

微信h5分享很多细节坑且目前有一个无法解决的问题:

目前(2022年8月6日)除了以下三种情况,其他即使配置成功仍只显示链接!各位不要怀疑自己代码能力~

1.公众号菜单或者回复连接点击访问后分享

2.生成页面二维码,识别二维码后分享

3.访问页面后添加到收藏,从微信收藏中进入后分享

除了上述说的还有IOS二次分享此类头疼的问题,本文不赘述,网上资料一堆~

虽然目前来说太局限了,但还是简单从0-1介绍下一个微信H5如何配置分享

1、引入微信JS文件

 <script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>

vue同学可在index.html中,引入上述文件,并注册到window对象下:

<script>
   window.$wx=wx
</script>

2、绑定安全域名

前往微信公众号后台;公众号设置-功能设置-JS接口安全域名

也就是说只有在你配置的安全域名下才能进行自定义分享

3、注入权限验证

   window.$wx.config({
            debug: true,
            appId: '',
            timestamp: '',
            nonceStr: configParams.noncestr,
            signature: '',
            jsApiList: ["updateAppMessageShareData", "updateTimelineShareData"] 
        });

    其中signature细说一下
    

4、其中config中的signature需要后端配合生成

1、后端 通过 https请求方式: 
GET https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=APPID&secret=APPSECRET
获取到access_token,关于它的刷新机制以及保存机制自行观看文档,不赘述了~

2、根据 access_token 通过请求:
GET https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=jsapi
获取jsapi_ticket

3、同样的jsapi_ticket有着与access_token几乎一样的刷新机制,同时也有调用次数限制,所以后端想着小方法自行保存~

4、将 jsapi_ticket 返回到前端

5、根据 jsapi_ticket 生成signature

1、必备四个参数,timestamp, noncestr, jsapi_ticket, url;
    
    其中url获取分享时所处页面的url
    
2、对上述四个参数进行字典序(学名:ASCII 码从小到大排序)
    
    方法:[四个参数的键与值].sort()

3、然后通过&进行字符串拼接如:jsapi_ticket=xx&noncestr=xx .......

4、sha1加密;google一个sha1加密库或者js文件;直接:
    
    sha1(步骤3中拼接好的字符串)
    
至此signature算是完成了,将其填充到步骤3中config对象中

6、到这步代表注入权限验证已经走完了,如果没报错啥的代表成功80%了~

7、通过 ready 接口处理成功验证

 window.$wx.ready(function () {
     //分享到朋友
    window.$wx.updateAppMessageShareData({
        title: "", // 分享标题
        desc: "", // 分享描述
        link: window.location.href,
        imgUrl: "", // 分享图标
        success: function (res) {
            // 设置成功
            console.log(res);
        },
        fail: err => {
            console.log(err);
        }
    });
  window.$wx.updateTimelineShareData({
        title: "", // 分享标题
        link: window.location.href,
        imgUrl: "", // 分享图标
        success: function (res) {
            console.log(res);
            // 设置成功
        },
        fail: err => {
            console.log(err);
        }
     });
  })

8、至此已经全部完成了~,至于中间可能出现的很多错误,100%都是某个细节没处理好,自行谷歌~

   到这里,如果打开debug会发现提示
   
   config:ok;
   
   updateAppMessageShareData:ok;
   
   updateTimelineShareData
   
   如果没有提示或者报错,那就是有问题;
 
   如果全都ok但是直接分享没有效果的,回到文章顶部,尝试提到的三种方法,你会发现整个人又好了起来~