How to make WeChat applet parse H5 files

Abstract: Netizens often ask how to let WeChat applet parse H5 files or encapsulate H5 web pages into APP? I thought this was impossible at first, because the official answer is this: Each mini program page is composed of four different suffix files with the same name in the same path, such as: index.js, index.wxm...

##

Netizens often ask how to let WeChat applet parse H5 files or encapsulate H5 web pages into APP? I thought this was impossible at first, because the official answer is this:

##Every The mini program page is composed of four different suffix files with the same name in the same path, such as: index.js, index.wxml, index.wxss, and index.json. Files with the .js suffix are script files, files with the .json suffix are configuration files, files with the .wxss suffix are style sheet files, and files with the .wxml suffix are page structure files.

The above meaning is already very clear. Translated:

• .js is javascript

##.wxss is equivalent to css
.wxml is equivalent to html

However, the syntax of wxml and wxss is defined by WeChat itself, which is different from the syntax of html and css. Since the syntax is different, the WeChat applet cannot load the H5 page. WeChat can only load pages that have been registered in the project, cannot open external links, and can only grab data from the server

Previous paragraph Time,

Because the files written by WeChat are no longer in html format, so the html code cannot be parsed, which is really sad. When I used the online API interface to obtain data, I encountered a big pit, that The data returned by the API turned out to be a string containing tags, which made me unable to start. After trying regular expressions and failing, I kept looking online to see if there were any plug-ins that could be parsed, and finally I found it, which is wxParse - WeChat applet rich text parsing component , it supports Html and markdown conversion to wxml visualization, not much to say below, code contribution:

Data returned by API :

Note: The value corresponding to

message is

[AppleScript]

Plain text view

Copy code

"<h2 id="材料-nbsp">材料 </h2><hr>  \n<p>雪梨一个、冰糖适量、牙签几根</p>   <h2 id="做法-nbsp">做法 </h2><hr>  \n<p>1、雪梨洗好，用刀切去尾部，用勺子挖出梨核，最好挖干净，不然影响口感。 </p> \n<p>2、放几颗冰糖进去，插几根牙签，隔水蒸30分钟左右就OK了。</p>",
      "name": "冰糖雪梨"

This small program cannot be parsed, so, Here comes the key point.

wxParse-WeChat applet rich text parsing component. Through this component, the applet can parse some html files including emoticons. Here is the gift package. I will demonstrate how to use it:

Download the official demo
Copy folder wxParse, which is at the same level as the pages file directory

//wxParse目录
- wxParse/
  -wxParse.js(必须存在)
  -html2json.js(必须存在)
  -htmlparser.js(必须存在)
  -showdown.js(必须存在)
  -wxDiscode.js(必须存在)
  -wxParse.wxml(必须存在)
  -wxParse.wxss(必须存在)
  -emojis(可选)

3.Introduce necessary files

3.1 Add the following code in the target wxml file

<import src="../../wxParse/wxParse.wxml"/> 
<view class="wxParse">
    <template is="wxParse" data="{{wxParseData:article.nodes}}"/>
</view>

3.2 Add the following code in the wxss file (can be the global wxss or the target wxss file)

@import "/wxParse/wxParse.wxss";

3.3 Data binding (add in the target js file)

//在 onLoad 函数里添加哦,
var article = &#39;<p>我是HTML代码</p>&#39;;
/**
* WxParse.wxParse(bindName , type, data, target,imagePadding)
* 1.bindName绑定的数据名(必填)
* 2.type可以为html或者md(必填)
* 3.data为传入的具体数据(必填)
* 4.target为Page对象,一般为this(必填)
* 5.imagePadding为当图片自适应是左右的单一padding(默认为0,可选)
*/
var that = this;
WxParse.wxParse(&#39;article&#39;, &#39;html&#39;, article, that,5);

4. You have succeeded. If you don’t believe it, look at the simulator

The above is the detailed content of How to make WeChat applet parse H5 files. For more information, please follow other related articles on the PHP Chinese website!