(Taro、原生)微信小程序分享页

先来看下分享页的功能，包括：

分享到微信好友
分享到朋友圈
生成分享链接
生成分享二维码
发送到电脑
如何通知原页面分享成功

分享好友

默认不展示，需要单独配置，原生中可通过wx.showShareMenu，将分享好友在右上角更多中显示出来。Taro中有两种方式可配置:

第一种：Taro.showShareMenu，需要注意Taro中该函数与原生的参数有不同。
第二种：通过在页面下的appl.config.js中添加 enableShareAppMessage:true

另外小程序官方不提供action主动调起分享好友，只能通过设置button的open-type: share来实现。当用户点击该按钮时，会调起好分享好友页面。

typescript 复制代码

    // Taro，使用nut组件库
    <nut-button open-type="share">分享好友</nut-button>
    
    // 原生
    <button open-type="share">分享好友</button>

自定义分享卡片的标题、路径和图片

可以通过监听onShareAppMessage(Taro使用useShareAppMessage)来实现。在用户进行分享操作时，您可以修改分享内容。请注意，onShareAppMessage函数必须返回一个对象；如果返回Null或者不返回，则会终止分享操作，不调起分享交互。

javascript 复制代码

// Taro
useShareAppMessage((res) => {
    if (res.from === 'button') {
        // 来自页面内分享按钮
    } else {
        // 右上角分享好友
    }

    return {
        title: '', // 分享卡片的title
        path: '', // 分享卡片的小程序路径
        imageUrl: '' // 分享卡片的图片链接
    };
});


// 原生开发小程序
onShareAppMessage((res)=> {
    // 用法和Taro一致
    ...
})

注意点：

如果只想通过页面内的按钮进行默认分享，可以不进行任何配置，直接通过按钮的open-type="share"唤起分享，但是不能够使用onShareAppMessage进行自定义。使用onShareAppMessage自定义必须先配置showShareMenu()

分享到朋友圈

从基础库 [2.11.3]
支持平台：Android、iOS：微信8.0.24及以上版本

默认不展示，需要单独配置，原生中可通过wx.showShareMenu，将分享好友在右上角更多中显示出来。Taro中有两种方式可配置:

第一种：Taro.showShareMenu，需要注意Taro中该函数与原生的参数有不同。
第二种：通过在页面下的appl.config.js中添加 enableShareTimeline:true

自定义分享到朋友圈的标题、图片

分享到朋友圈无法自定义路径，只支持分享当前页面；不支持主动调起，只能通过右上角点击朋友圈分享

javascript 复制代码

    // Taro用法
    useShareTimeline(res => {
        return {
            title: '',
            query: '',
            imageUrl: ''
        }
    })
    // 原生用法
    onShareAppMessage(res => {
        // 用法和Taro一致
        ...
    })

那么分享到朋友圈时，无法主动调起，那么其交互怎么设计？

引导用户点击右上角的朋友圈进行分享。

分享到朋友圈不支持自定义分享path，那么如何分享其它页面？

生成分享链接

目前微信小程序生成短链有三种

获取Url Schema
- 限量：每天限量50万
- URL Schema有效期最长 30 天，不支持永久Url
- 每个独立的URL Scheme被用户访问后，仅此用户可以再次访问并打开对应小程序，其他用户无法再次通过相同URL Scheme打开该小程序
- 获取Url Schema文档
获取Url Link
- 限量：每天限量50万
- URL Link有效期最长 30 天，不支持永久Url
- 每个独立的URL Scheme被用户访问后，仅此用户可以再次访问并打开对应小程序，其他用户无法再次通过相同URL Scheme打开该小程序
- 获取Url Link文档
获取Shot Link
- 目前只开放给电商类目小程序，具体包含以下一级类目：电商平台、商家自营、跨境电商。
- 支持短期、长期两种Link
- 获取Shot Link文档

获取步骤

拿到Access Token。
根据Token、小程序路径参数去请求后端接口得到分享链接。

注意事项：

Access Token是小程序全局唯一后台接口调用凭据, 重复请求会导致之前的access token失效。
api.weixin.qq.com域名的接口不能够在小程序内直接调用，必须在服务端调用，需要后端同学配合。

生成分享二维码

根据小程序链接生成二维码有三种方式

获取小程序码(太阳码)
- 和获取二维码总共限量10W，注意：不是每天，所以谨慎调用
- 路径以及参数的长度不受限制，小程序码永久有效
- 获取小程序码文档
获取二维码
- 和获取小程序码总共限量10W，注意：不是每天，所以谨慎调用
- 路径以及参数的长度不受限制，二维码永久有效
- 获取二维码文档
获取不限量小程序码
- 永久有效并且数量不受限制
- 参数长度不能超过32个字符，适合分享的小程序路径没有大量参数的页面。
- 获取不限量小程序码文档

1、通过接口拿到的图片默认是Buffer格式问题，需要转成ArrayBuffer，涉及一个问题，怎么转成ArrayBuffer

生成二维码接口返回默认是Buffer格式。然后我们请求时,responseType默认是text，这样会是Buffer格式强制转成文本导致图片失效。所以我们需要配置用ArrayBuffer格式去接受图片。可以配置responseType值为ArrayBuffer。wx.request支持配置responseType

注意：如果页面的参数非常多并且还想要不限量的二维码，官方提供的二维码生成接口肯定是不满足的，需要我们自己生成普通二维码，再去小程序管理后台进行配置扫普通二维码跳转小程序页面

发送到电脑

这个功能其实相对比较水的。参考了下腾讯文档的分享页，其是通过公众号的形式进行分享到电脑的。金山文档则是点击时，直接给出一个引导弹框，提示用户发送到 文件助手，从而发送到电脑。

这个我们最终和金山的保持一致。

如何通知原页面分享成功

如果唤起该分享页的页面是小程序页面，那么分享页和唤起页是可以进行通信的，通过EventChannel进行通信。
- 我们通过官方文档和示例，实际可以发现EventChannel借助wx.navigateTo方法，在两个页面之间构建起了数据通道，互相可以通过"派发事件"及"注册这些事件的监听器"来实现基于事件的页面通信。
如果唤起页是H5页面，H5页面和小程序页通信只能通过webview的url，无法通过一些事件进行通信，这里应该吐槽下sdk的navigateTo的events无法通信。