uniapp 开发app使用renderjs操作dom

需求：把页面中的对话内容另存为一张图片保存到手机相册。
解决方案：这时我们需要使用到document对象创建一个dom对象计算对话内容的宽高、位置等，再利用canvas能力将内容绘制绘制成一张图保存。
现状：总所周知，非H5端，不能使用浏览器自带对象，比如document、window、localstorage、cookie等，更不能使用jquery等依赖这些浏览器对象的框架。
uniapp解决方案：uniapp文档提示到App端若要使用操作window、document的库，需要通过renderjs来实现。

首先uniapp是不支持vue3的setup语法糖的，所以获取到图片后保存到相册逻辑需要这样写：

<script>
export default defineComponent({
    setup(props, context) {
        const saveImg = async (url) => {
            uni.saveImageToPhotosAlbum({
                filePath: url,
                success: (res) => {
                    console.log("保存图片成功");
                },
                fail: (err) => {
                    console.log("保存图片失敗");
                }
            });
        };
        return {
            saveImg
        };
    }
});
</script>

视图层中的保存按钮：

<template>
  <view class="save" @click="sharechat.generateImage">
    {{ t("share") }}
  </view>       
</template>

renderjs生成图片：

<script module="sharechat" lang="renderjs">  // sharechat和视图层调用的一致
export default {
  data(){
    return { }
  },
  computed: {},
  methods: {
    generateImage(event, ownerInstance) {
    // 计算内容宽高，位置
    // canvas dom生成图片
    // 利用uinapp保存图片到相册
    ownerInstance.callMethod('saveImg', {url: dataURL})
    }
  },
  mounted(){}
}
</script>

此致，就完成了所有的功能了。