Editor inconsistency in WeChat developer tool simulator, IOS real-time debugging, Android real-time debugging

Problem environment:
1. WeChat Developer Tools 1.05.2110290 (hereinafter referred to as "Tools")
2. True machine debugging version 1.0 (does not distinguish between IOS and Android)
3. WeChat's editor component for rich text input (including pictures, multiple formats, etc.) in your own projects
The Editor interface effect is shown in the figure (the two buttons are added later, not by editor)
Problems that arise:
In the simulator of the tool, insert a picture in the editor, click Submit, and the data will be sent to the back end normally.
But every time you use an Iphone real-time simulation, the pictures you insert in the editor cannot reach the back-end server. Since the author usually does not use an android phone, at that time, he did not know the effect of the android phone's real-time debugging.

The cause of the problem was found:
After editor inserts a picture with console.log output, the output html of the inserted picture is different:
Android Debugging:
Paste a picture in the Editor editor to get the HTML data.

<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 real-time debugging:
Paste a picture in the Editor editor to get the HTML data.
Note that unlike Android debugging, the src attribute in the picture html generated by Editor in the IOS system is not the same as the data-local attribute value, which is base64 encrypted data up to hundreds of lines (these long encrypted data are deleted as described below).

<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>

Simulator for WeChat Developer Tools
Paste a picture in the Editor editor to get the HTML data.
You can see that first the src value is different from that of the real machine (the src formed in the simulator starts with http), and then there is no data-local attribute.

<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>

These differences result in different html information or attributes being received by the back-end server, which does not standardize the processing of this information.

Ways to solve problems:
Personal solutions for your reference.
In all three cases, they need to be able to function properly.
The author's back-end to the graphics html information sent by editor, focuses on obtaining the location information stored by the graphics img. In the above cases, the SRC attribute of tool simulator and android can provide correct information, but the SRC of ios is base64 encrypted information, and the location information is in the data-local attribute. The author decides to discard the SRC information in ios and replace the data-local attribute name with 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//Get the contents of the src attribute
    var imgHtmlStr_changed = imgHtmlStr.replace(reg_imgSrc,'')
    var reg_imgDataLocal = /data-local/gi//Get the contents of the data-local property
    imgHtmlStr_changed = imgHtmlStr_changed.replace(reg_imgDataLocal,'src')
    return imgHtmlStr_changed
  },

The above is the core code, not all the code related to the project. You can use ideas to customize.

Keywords: iOS Android Mini Program wechat

Added by limitphp on Fri, 03 Dec 2021 20:50:46 +0200