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

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

发布: 2023年2月14日 10:17:50

问题环境：
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.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 = /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
  },

以上为核心代码，不是项目相关的全部代码。大家可以参考思路自定义。

相关文章