微信小程序|微信开发者工具模拟器、IOS真机调试、Android真机调试中Editor效果不一致问题微信|ios|微信小程序|测试工具

问题环境：
1、微信开发者工具1.05.2110290（以下简称“工具”）
2、真机调试1.0版本（不区分IOS与Android）
3、微信的editor component，用于在自己的项目中，作为富文本的输入（包括图片、多种格式文字等）
Editor的界面效果如图（两个按钮是后期加的，不是editor自带的）
文章图片

产生的问题：
在工具的模拟器中，在editor中插入图片，点击提交，数据能够正常的发送到后端。
但每次用Iphone真机模拟，在editor中插入的图片，每次都无法到后端服务器。由于笔者平时不用android手机，所以当时并不知晓android手机的真机调试效果。
发现出现问题的原因：
通过console.log输出在editor插入图片后，输出的该插入图片的html，发现各自有不同：
Android真机调试：
在Editor编辑器里面贴图片，获取到的HTML数据。

文章图片

IOS真机调试：
在Editor编辑器里面贴图片，获取到的HTML数据。
注意，与Android真机调试不同的是，IOS系统中Editor形成的图片html里面的src属性，与data-local属性值是不一样的，是base64加密的、长达上百行的数据（以下便于介绍，删除了这些长的加密数据）。

文章图片

微信开发者工具的模拟器进行模拟
在Editor编辑器里面贴图片，获取到的HTML数据。
可以看到，首先src的值，与真机是不一样的（在模拟器里形成的src是http开头），再就是没有data-local属性。

文章图片

这些不同，导致后端服务器收到的html信息或属性是不一样的，后端不好标准化的处理这些信息。
解决问题的方式：
个人解决方式，供大家参考。
以上三种情形，都需要让他们能够正常运行。
笔者后端对editor发送过来的图形html信息，重点要获得图形img所存储的位置信息，在以上情形中，工具模拟器、android的src属性都能提供正确的信息，但ios的src则是base64加密信息，位置信息在data-local属性中。笔者决定放弃ios中的src信息，并将data-local的属性名替换为src。

getEditorContent(e){ var htmlStr_full = e.detail.html console.log(htmlStr_full) if((htmlStr_full).indexOf('img')!=-1){ if(htmlStr_full.indexOf('data-local')!=-1){ console.log('Need to change image html string:') var editor_input_htmlStr = this._real_phone_image_html_translate(htmlStr_full) }else{var editor_input_htmlStr = htmlStr_full} console.log(editor_input_htmlStr) this.setData({'editor_input_htmlStr': editor_input_htmlStr})}else{ if((e.detail.text).length <= 1){}else{ this.setData({'editor_input_htmlStr':htmlStr_full})} } }, , _real_phone_image_html_translate(imgHtmlStr){ var reg_imgSrc = https://www.it610.com/src="(.*?)"/gi//获取出src属性的内容 var imgHtmlStr_changed = imgHtmlStr.replace(reg_imgSrc,'') var reg_imgDataLocal = /data-local/gi//获取出data-local属性的内容 imgHtmlStr_changed = imgHtmlStr_changed.replace(reg_imgDataLocal,'src') return imgHtmlStr_changed },

【微信小程序|微信开发者工具模拟器、IOS真机调试、Android真机调试中Editor效果不一致问题】以上为核心代码，不是项目相关的全部代码。大家可以参考思路自定义。