uniapp 开发app使用renderjs操作dom

Ho952024-07-25 12:10

需求：把页面中的对话内容另存为一张图片保存到手机相册。
解决方案 ：这时我们需要使用到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>

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