uni-app开发APP的问题

一、uni-app中在H5或者app中获取不到node

问题描述

uni-app中，在H5或者app获取不到node节点，没法获取整个html（仅限H5和app,官方文档上有写）

解决方法

renderjs发起document.getElement()来获取
新建一个script标签，module属性指的是renderjs的名称，在为元素绑定方法的时候可以使用

二、普通js和renderjs之间的通信

问题描述

使用了renderjs之后，与普通的js通信就需要特殊处理，在renderjs中不能直接用this调用普通js中的方法和data数据，因为在renderjs和普通js中它们拥有各自的this

解决方法

新建一个script标签，module指的是renderjs的名称，在为元素绑定方法的时候可以使用
1. renderjs调用普通js中的方法：ownerVm.callMethod(普通js中的方法名称, 方法需要用到的参数（可选）)； 
2. 普通js调用renderjs中的方法：this.renderjsFn() // renderjsFn代表写在renderjs中的方法
3. renderjs调用普通js中的data数据：绑定在标签上，然后在renderjs方法中获取通过e.currentTarget.dataset.xxx
4. 普通js调用renderjs中的data数据：this.canvas.xxx  //  canvas指的是module属性

三、renderjs中点击的方法不能传递参数

问题描述

在renderjs中定义的函数不能在调用的时候直接传入参，如下图，如果传入参数则该方法在APP上无法调用

解决方法

 1. 在某一个标签上（我现在示例是在button上写属性，注意：在button上写属性必须要data-开头，表单除外的其他标签则不需要）
 2. 添加完属性之后，在方法中调用（比如我在button上定义了data-postid和data-item这两个），然后我在方法downImg中通过获取e.currentTarget.dataset.item，因为downImg方法中自己有两个参数一个是e，一个是ownerVm（可以叫其他名称），其中的e可以通过
// 获取对象的所有属性和方法
const keys = Object.getOwnPropertyNames(obj); 来获取e中的属性和方法去获取你需要的方法或者属性

四、html2canvas生成图片保存至手机相册

问题描述

使用html2canvas，必须跟image-tools搭配使用

解决方法

npm install image-tools --save
页面中引入：
 import { base64ToPath } from "image-tools";
 在图片转换为base64的时候使用

五、IOS兼容问题（html2canvas导出图片为空白）

问题描述

使用html2canvas在IOS中图片不展示问题

解决方法

1. 修改html2canvas的安装包：
2. 找到node_modules/html2canvas/dist/html2canvas.js下,img.src=src后面添加一个动态的随机数，我们这里就添加一个时间戳：img.src = src+'?t='+new Date().getTime();该方法是为了防止浏览器以为图片地址没有发生变化，所以浏览器也不会重新加载图片

六、IOS兼容问题（html2canvas中导出图片中的文字超出两行出现省略号）

问题描述

html2canvas中导出图片中的文字超出两行出现省略号，使用display:-webkit-box时，导出的时候文字消失

解决方法

不限制

七、对npm依赖的源码进行自定义修改

问题描述

当我们安装的依赖包不能满足我们的需求时，我们需要在依赖包中添加一些需求或者修改源码，但是我们修改了之后，别的小伙伴拉你的代码需要自己手动再次去修改node_modules中的文件，这样操作起来非常麻烦

解决方法

1. 步骤：
   npm install patch-package postinstall-postinstall --save
   在package.json的script中添加："postinstall":"patch-package"
2. 使用方法：
  (1) 在修改完node_modules源码之后，运行命令：npx patch-package xxx xxx代表你修改的包名，也可以具体到某一个文件名称
  (2)走完上一步之后，会生成一个文件夹patches
  (3) 如果发现npm install后依赖恢复为没改之前，可以执行命令：npm run postinstall

八、patch-package postinstall-postinstall安装包的注意事项

1. 要求node版本18.17.0，npm版本：10.2.3
2. 在安装依赖时，由于"patch-package": "^8.0.0","postinstall-postinstall": "^2.1.0"这两个插件的影响，需要先将package.json里script中的"postinstall": "patch-package"先删除掉
3. 然后npm install 等安装完成后，加上"postinstall": "patch-package"，再次运行npm install

九、uniapp利用H5+截图制作海报

问题描述

使用canvas2html制作海报会有以下问题：
    1. 生成海报中的图片模糊
    2. 生成海报速度慢且没有办法处理异步操作（结果就导致：图片中需要异步操作获取的内容未获取到海报就已经生成）
    3. canvas2html生成海报需要获取dom来设置区域, 然而用uniapp制作的APP利用document.documentElement是获取不到的，因为在app中是没有node节点的，所以需要用到renderjs，但是renderjs有很多限制（因为它本身就是一个绘图层，不是逻辑层，且它不能直接调用逻辑层的方法和数据）

解决方法

使用H5+的WebviewObject中的draw()  截屏绘制
   1. 生成图片清晰（要是文字不清晰，设置图片格式为.png即可）
   2. 生成海报速度快且可以处理异步操作（跟正常的js写法一样）
   3. 可设置截屏的区域，且有截图成功和失败的回调

参考资料

  https://uniapp.dcloud.net.cn/api/
  https://blog.csdn.net/continue_fight/article/details/129988866
  https://www.html5plus.org/doc/zh_cn/webview.html#plus.webview.WebviewObject.draw