WXML case of converting HTML to WeChat applet

angryTom
Release: 2020-03-06 10:57:15
Original
6387 people have browsed it

This article introduces how to convert HTML to WXML, which has certain reference value. I hope it will be helpful to friends who are learning WeChat applet development!

WXML case of converting HTML to WeChat applet

WXML case of converting HTML to WeChat mini program

Although WeChat mini program development is more towards front-end development , but their grammatical structures are different. For example, wxml is fundamentally different from html. Take the a tag as an example. Wxml does not support the a tag. Also, wxml is not compatible with html. The following editor will analyze this issue and analyze how to convert html. into wxml. The specific steps are as follows:

1. Download from https://github.com/icindy/wxParse

2.1 Introduce the WxParse module into the xxx.js file you need to use

var WxParse = require('../../wxParse/wxParse.js');
Copy after login

2.2 Introduce WxParse.css into the Wxss you are using, which can be in app.wxss. Note that it is the global app.wxss

@import "/wxParse/wxParse.wxss";
Copy after login

3. Data binding

var article = '
我是HTML代码
';/** * 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('article', 'html', article, that,5);
Copy after login

4. Template reference

//这里data中article为bindName