微信H5分享 | OneYoung's Blog

1.相关链接

一个宝藏网址，可以用来调试所有的微信JS-SDK功能

微信JS-SDK官网文档网址

2.介绍

公司启动了裂变活动，主要目的嘛，就是引流。

前端这方面的需求，H5 链接配置在公众号内，另外由于在微信内的普通链接分享不能自定义文本和图片，所以需要引入微信JS-SDK。所有需求，总结如下：

自定义分享朋友
自定义分享朋友圈
生成海报，自动分享朋友圈

1.获取sdk签名操作步骤

1-1.自定义分享

自定义分享朋友与自定义分享朋友圈主要利用到了两个 API：updateAppMessageShareData 和 updateTimelineShareData。具体步骤如下（生产环境要将测试公众号的配置修改为正式公众号）：

先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。
在 JS 文件内引入微信的 JS-SDK。http://res2.wx.qq.com/open/js/jweixin-1.6.0.js(支持 https)。它会暴露出 wx 这个全局对象。
开发环境下，先获取测试公众号的 appID 以及 appSecrect。
获取 access_token。
TIP
GET请求方式：https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=XXX&secret=XXX
记得将 XXX 替换为对应的 appID 和 appSecrect。
access_token 有效期为 7200s。开发者必须在自己的服务全局缓存 access_token。
获取 jsapi_ticket。
TIP
GET请求方式：https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=XXX&type=jsapi
记得将 XXX 替换为上面获取到的 access_token。
jsapi_ticket 是公众号用于调用微信JS接口的临时票据。正常情况下，jsapi_ticket的有效期为 7200s，通过 access_token 来获取。由于获取 jsapi_ticket 的 api 调用次数非常有限，频繁刷新jsapi_ticket 会导致 api 调用受限，影响自身业务，开发者必须在自己的服务全局缓存 jsapi_ticket 。
根据 location.href.split('#')[0] 获取到前端 URL，该 URL 需要用来生成 signature。
利用该网址生成 signature。 注意，在该网址配置的参数与后面 api 中的配置参数需要保持一致。
至此，已经可以获取到所有参数，配置具体 wx.config 即可。

TIP

实际开发过程中，后端同事需要根据参数将 signature 生成，返回给前端，这里可见具体的生成算法。可以理解为，上面的操作都是需要后端同事进行的。

一个简单的🌰代码如下：

window.onload = function () {
  // 1.利用该 api 确定生成签名时需要定义好的 url
  // alert(location.href.split('#')[0])
  wx.config({
    // debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
    appId: '', // 必填，公众号的唯一标识
    timestamp: 1617330761, // 必填，生成签名的时间戳
    nonceStr: 'nova', // 必填，生成签名的随机串
    signature: '069cbd827636ce74bc1fb40c1b927875ddad56f0',// 必填，签名
    jsApiList: ['updateAppMessageShareData', 'updateTimelineShareData', 'hideMenuItems', 'showMenuItems', 'hideAllNonBaseMenuItem', 'showAllNonBaseMenuItem'] // 必填，需要使用的JS接口列表
  })

  // 分享给“朋友”
  const updateAppMessageShareData = function () {
    wx.updateAppMessageShareData({ 
      title: '分享给朋友', // 分享标题
      desc: '这是用来测试微信分享给朋友的例子', // 分享描述
      link: 'http://10.0.40.151:8084/', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
      imgUrl: 'http://jsgoshu.cn/blog/avatar.jpeg', // 分享图标
      success: function () {
        // 设置成功
      }
    })
  }

  // 分享给“朋友圈”
  const updateTimelineShareData = function () {
    wx.updateTimelineShareData({ 
      title: '分享到朋友圈', // 分享标题
      link: 'http://10.0.40.151:8084/', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
      imgUrl: 'http://jsgoshu.cn/blog/avatar.jpeg', // 分享图标
      success: function () {
        // 设置成功
      }
    })
  }
  wx.ready(function(){
    // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
    updateAppMessageShareData()
    updateTimelineShareData()

    // 隐藏所有的非基础类操作菜单 想要显示的话调用：wx.showAllNonBaseMenuItem()
    wx.hideAllNonBaseMenuItem()
    // 显示 分享给朋友 和 分享到朋友圈
    wx.showMenuItems({
      menuList: ['menuItem:share:appMessage', 'menuItem:share:timeline'],
    })
  })

  wx.error(function(res){
    // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
    alert(JSON.stringify(res))
  })
}

额外注意的一点是，如果 jsApiList 列表中没有配置对应的 api，那么在调用该 api 时可能会报错 permission denied。

1-2.海报分享

我们的需求，没有根据页面，绘制出来海报。而只是一张本地图片的分享。所以没有用到 html2canvas 这个库。

主要研究了下，微信浏览器中的 H5 是否能够主动调起微信的 分享朋友圈 功能。

答案是不能。除非该 H5 套着原生的壳。 归根接底，是微信浏览器本身不支持，而且 JS-SDK 也没有提供方法。

而 QQ 浏览器和 UC 浏览器则是支持的。

如果你的需求不局限于微信浏览器，可以考虑做个向下的兼容方案。譬如：

在微信浏览器中引导用户进行分享，在其他支持主动分享的浏览器中，监听分享事件，主动触发调起。

我们的这部分需求后来砍掉了~ 😂

推荐几个链接提供思路，以防后面需要：

浏览器的分享兼容库，NativeShare。我个人调试的时候，发现不是特别好用。Demo 在我的手机运行不了。
segmentfault 关于 H5 分享的一个帖子

2.界面操作

关闭当前网页窗口接口
js
```
wx.closeWindow()
```
右上角菜单（实际操作中发现是，微信底部弹窗操作栏中的上半部分，跟下面的 hideAllNonBaseMenuItem 效果类似）
js
```
// 隐藏
wx.hideOptionMenu()
// 显示
wx.showOptionMenu()
```

批量隐藏功能按钮接口

wx.hideMenuItems({
  menuList: [] // 要隐藏的菜单项，只能隐藏“传播类”和“保护类”按钮，所有menu项见下
});

批量显示功能按钮接口

wx.showMenuItems({
  menuList: [] // 要显示的菜单项，所有menu项见下
});

隐藏所有非基础按钮接口

wx.hideAllNonBaseMenuItem();
// “基本类”按钮详见下

显示所有功能按钮接口
js
```
wx.showAllNonBaseMenuItem()
```

3.菜单项列表

基本类

举报: "menuItem:exposeArticle"
调整字体: "menuItem:setFont"
日间模式: "menuItem:dayMode"
夜间模式: "menuItem:nightMode"
刷新: "menuItem:refresh"
查看公众号（已添加）: "menuItem:profile"
查看公众号（未添加）: "menuItem:addContact"

传播类

发送给朋友: "menuItem:share:appMessage"
分享到朋友圈: "menuItem:share:timeline"
分享到QQ: "menuItem:share:qq"
分享到Weibo: "menuItem:share:weiboApp"
收藏: "menuItem:favorite"
分享到FB: "menuItem:share:facebook"
分享到 QQ 空间 "menuItem:share:QZone"

保护类

编辑标签: "menuItem:editTag"
删除: "menuItem:delete"
复制链接: "menuItem:copyUrl"
原网页: "menuItem:originPage"
阅读模式: "menuItem:readMode"
在QQ浏览器中打开: "menuItem:openWithQQBrowser"
在Safari中打开: "menuItem:openWithSafari"
邮件: "menuItem:share:email"
一些特殊公众号: "menuItem:share:brand"

1.相关链接 ​

2.介绍 ​

1.获取sdk签名操作步骤 ​

1-1.自定义分享 ​

1-2.海报分享 ​

2.界面操作 ​

3.菜单项列表 ​

基本类 ​

传播类 ​

保护类 ​