How to make WeChat applets parse H5 files

Some netizens often ask how to let small programs parse H5 files or encapsulate H5 web pages into apps? I initially thought this was impossible, because the official answer was like this: each applet page consists of four different suffix files with the same name in the same path, such as index. js, index. wxm ..., Summary: Some netizens often ask how to make small programs parse H5 files or encapsulate H5 web pages into apps? I initially thought this was impossible, because the official answer was like this: each applet page consists of four different suffix files with the same name in the same path, such as index. js, index. wxm...

Some netizens often ask how to let small programs parse H5 files or encapsulate H5 web pages into apps? At first, I thought this was impossible, because the official answer was as follows: Each applet page is composed of four different suffix files with the same name in the same path, such as index. js, index. wxml, index. wxss, index. json .. The file with the js suffix is a script file, the file with the. json suffix is a configuration file, the file with the. wxss suffix is a style table file, and the file with the. wxml suffix is a page structure file. The above meaning is clear. The translation is: . Js is javascript . Wxss is equivalent to css . Wxml is equivalent to html However, the syntax of wxml and wxss is defined by itself, different from that of html and css. Since the syntax is different, the applet naturally cannot load the H5 page. Only pages registered in the project can be loaded, external links cannot be opened, and data can only be crawled from the server Some time ago, because the file writing is no longer in html format, html code cannot be parsed. this is really sad. when I used the online API interface to retrieve data, I encountered a big pitfall, that is, the data returned by the API was actually a string containing tags, which left me unable to start. after trying regular expressions, I have been checking whether there are any plug-ins that can be parsed on the Internet and finally found them. The wxParse-small program rich text parsing component supports Html and markdown conversion to wxml visualization, code contribution: Data returned by the API: [AppleScript]View plain text Copy code "Material \ n Sydney, ICE sugar, toothpicks Practice \ n 1. wash Sydney, use a knife to cut the tail, and use a spoon to dig out the pear core. it is best to dig it clean, otherwise it will affect the taste. \ N 2. put a few pieces of sugar into it, insert a few toothpicks, and steam them for about 30 minutes. "," Name ":" Rock sugar Sydney" This small program cannot be parsed, so the point is. WxParse-the small program rich text parsing component. through this component, the small program can parse some html files and also include a table package. The following is a big gift bag. I will demonstrate how to use it: Download the official demo Copy folder wxParse, which is the same as the pages file directory // WxParse Directory-wxParse/-wxParse. js (required)-html2json. js (required)-htmlparser. js (required)-showdown. js (required)-wxDiscode. js (required)-wxParse. wxml (required)-wxParse. wxss (required)-emojis (optional) 3. introduce necessary files 3.1 add the following code to the target wxml file: 3.2 add the following code to the wxss File (it can be a global wxss or a target wxss file) @import "/wxParse/wxParse.wxss"; 3.3 Data binding (add in the target js file) // Add it to the onLoad function, var article =' I am an HTML code ';/*** WxParse. wxParse (bindName, type, data, target, imagePadding) * 1. data name bound to bindName (required) * 2. type can be html or md (required) * 3. data is the specific data passed in (required) * 4.tar get is the Page object, generally this (required) * 5. imagePadding: When the adaptive orientation of an image is a single padding (0 by default, optional) */var that = this; WxParse. wxParse ('article', 'html', article, that, 5 ); 4. you have succeeded. Believe it or not, watch the simulator.

The above is how to make the applet parse the detailed content of the H5 file. For more information, please follow other related articles in the first PHP community!