sample-easyar-share

演示如何使用微信小程序xr-frame接口实现截图分享功能。

配置和运行

请参考 开发入门 进行配置和运行

如果想创建标准的xr-frame工程，请参考微信官方文档 开始

详解

sample-easyar-share使用xr-frame提供的ShareSystem制作而成，本身不使用插件功能。

ShareSystem文档API说明：https://developers.weixin.qq.com/miniprogram/dev/api/xr-frame/classes/ShareSystem.html

sample的运行流程基于小程序基本框架，目录pages中存放所有的页面逻辑，components中存放所有被页面使用的组件功能，xr-frame和AR功能的在component中加载和使用。

小程序的目录结构说明：https://developers.weixin.qq.com/miniprogram/dev/framework/structure.html

如何获取ShareSystem？

const share = scene.share;

所有的system都可以在xr-scene节点上直接获取。

如何截图并保存到手机相册？

截图功能分为2个部分：提取图片数据、保存本地文件并添加到相册。sample中可参考实现方法takePhoto()。

首先需要截图屏幕并获得base64数据。设置opts图片格式type以及质量quantity，调用share.captureToDataURL获取截图数据，并转换成可直接用来保存的数据内容。

const opts = {type: 'jpg', quantity: 0.8};
const data = this.scene.share.captureToDataURL(opts)?.split(',').pop();

图像保存相册的过程分为两个部分：文件写入和添加相册。使用微信接口wx.getFileSystemManager().writeFile(...)将图片文件保存在本地，保存成功之后使用wx.saveImageToPhotosAlbum(...)将图片添加到相册中。

wx.getFileSystemManager().writeFile({
    filePath: filename,
    data: data,
    encoding: 'base64',
    success: () => {
        wx.saveImageToPhotosAlbum({
            filePath: filename,
            success: () => wx.showToast({title: '已保存到相册'}),
            fail: (err) => {
                console.warn(err);
                wx.showToast({icon: 'error', title: '保存到相册失败'});
            },
        });
    },
    fail: (err) => {
        console.warn(err);
        wx.showToast({icon: 'error', title: '保存文件错误'});
    },
});

如何截屏并发送给好友？

ShareSystem提供了截图分享的接口，直接调用即可，需要在opts中设置图片格式type以及质量quantity，然后使用captureToFriends()截图并发送给好友。

const opts = {type: 'jpg', quantity: 0.8};
this.scene.share.captureToFriends(opts);