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

问题环境：
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数据。

<p wx:nodeid="6"><img src="wxfile://tmp_81d85ae876cd5047fc1c3b015e2d552dcfb1e362e5a867d3.jpg" data-local="wxfile://tmp_81d85ae876cd5047fc1c3b015e2d552dcfb1e362e5a867d3.jpg" alt="img" width="80%" height="80%" data-custom="id=1" wx:nodeid="24"></p><p wx:nodeid="28"><br wx:nodeid="29"></p>

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

<p wx:nodeid="6"><img data-local="wxfile://tmp_8e86548d90a909f5747e0b2d1db7d0d0.jpg" alt="img" width="80%" height="80%" data-custom="id=1" wx:nodeid="24" src="data:image/jpg;base64,/9j/4AAQSkZ30r0rU/+QBb/wDAq8rDV5qejPRxdKLiro/BL9on9gbxH4A0S98ZeH/Fsep6TafvTFe+ZHcIjYAwY1aNj7YQD1OePzzstIMCFHYOPxr+kX9rX/kiWvf9eyfzr+daPoa+xoVZNas+YlTV3of/2Q=="></p><p wx:nodeid="28"><br wx:nodeid="29"></p>

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

<p wx:nodeid="6"><img src="http://tmp/ExKeGXC5Hmv8ac8f8a3bc94034e61164a2a9d253a4a5.png" alt="img" width="80%" height="80%" data-custom="id=1" wx:nodeid="26"></p><p wx:nodeid="30"><br wx:nodeid="31"></p>

这些不同，导致后端服务器收到的html信息或属性是不一样的，后端不好标准化的处理这些信息。

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

getEditorContent(e){var htmlStr_full = e.detail.htmlconsole.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 = /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效果不一致问题相关推荐

微信开发者工具登录后无法预览和真机调试？无语解决
记录一次无语解决微信开发者工具登录后无法预览和真机调试的经历. 众所周知众所周知,我们在开发小程序时常在微信开发者工具编写代码,而如果不是开发者(小程序后台中没有添加过为该项目开发者),则会在编辑代 ...
【uni-app】微信开发者工具注意点（微信小程序）
目录一.微信小程序的appid 二.真机调试不让调,报体积过大三.echarts用真机调试会出错但上线时就完好四.真机调试image不显示,但是电脑上显示正常五.uni-app使用appid和 ...
微信小程序开发自学笔记 —— 九、微信开发者工具
微信开发者工具介绍由于小程序渲染和逻辑分离的运行机制与传统的网页存在差异,所以无法使用传统的网页的开发调试工具. 开发者可以借助微信开发者工具完成小程序的代码开发.编译运行.界面和逻辑调试.真机预 ...
HBuilderX 连接微信开发者工具
前言上篇配置了夜神模拟器,本篇就来看看怎么运行到微信开发者工具吧. 一.打开微信开发者工具第一次连接至微信开发者工具之前,需要先启动微信开发者工具,在工具栏,依次点击设置 -> 安全设置, ...
微信开发者工具-HBuilderX
环境 HBuilderX.2.0.0.20190610.full.zip Windows10 微信开发者工具1.02.1905151 配置解压运行 HBuilderX运行后,点击工具-设置-运行配置 ...
uniapp如何在真机、手机模拟器、微信开发者工具中运行调试
在之前先讲下一个uniapp的坑: 1.在HBuilderx导入项目时,直接导入项目即可,不要在项目文件夹下导入父目录,这样会识别不到项目类型,就无法用项目相应的运行方式运行了.如下:加了这层父级&q ...
微信开发者工具-真机调试
如何想再手机上预览小程序,微信扫一扫,就可以实现预览,前提是手机和电脑在同一局域网. 方法一:微信开发者真机调试(推荐) 1. 用[微信开发者工具]打开该文件包 2. 然后选择[真机调试]-[二维码真 ...
微信开发者工具-真机调试，可查看接口信息
之前测试小程序查看接口信息,是需要打开调试模式,手机界面小,看着多多少少有点不方便. 现在发现了可以直接找前端要文件包,用[微信开发者工具]打开该文件包,然后选择[真机调试]-[二维码真机调试],生产 ...
微信开发者工具真机调试一直提示：已结束，请重新开始
前言 (解决方案在最后一句话,可以直接跳过前面的废话)在做一个小功能,智能识别图片上的数字文字,本来真机调试一切正常.后面在调试的过程中,真机连上一段时间没有管它,这段时间过程中,微信开发者工具会自动 ...

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

微信开发者工具模拟器、IOS真机调试、Android真机调试中Editor效果不一致问题相关推荐

最新文章

热门文章