怎么才能将html转换成wxml？-文中介绍

菏泽炫佑科技 菏泽炫佑小程序开发 菏泽炫佑app制作 炫佑科技

怎么才能将html转换成wxml？-文中介绍

HTML转微信小程序的WXML案例

虽然微信小程序开发更偏向前端开发，但它们的语法结构不同。 例如，wxml 与 html 有着根本的不同。 以a标签为例。 Wxml 不支持 a 标记。 另外，wxml 与 html 不兼容。 下面小编就来分析一下这个问题，分析一下如何转换html。 到 wxml 中。 具体步骤如下：

1.前往下载

2.1 将模块引入到你需要使用的xxx.js文件中

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

2.2 在你使用的Wxss中引入.css，可以在app.wxss中。 注意怎么才能将html转换成wxml？-文中介绍，它是全局的app.wxss。

@import "/wxParse/wxParse.wxss";

3. 数据绑定

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

4. 模板参考

//这里data中article为bindName

接下来我就按照上面的步骤来分析一下我为个人博客制作的微信小程序案例。 这里我以下载部分为例。

我的下载部分是索引微信盲盒小程序开发，我点击进入的详情部分是入口。 正是因为当我点击输入详细信息时，我落下的数据是我的html格式。 详细信息会有一些标签，例如 p、div 和 a。 这不是我们需要的效果。 我需要的全部转换成对应的小程序。 wxml 格式。

1.我将下载的文件夹放入我的项目中。 我只需要将目录放在这里即可。 如果你看图，你会发现它是一个和pages同级的目录。

2.我引入了：var = ('../..//.js'); 因为我不需要所有的样式，所以我在需要显示的页面中注释掉了全局的.wxss。

3、这一步是*关键、*重要的一步，数据绑定。 因为我的所有数据都是从数据库中获取的真实数据，所以这涉及从列表点击加载数据到详细事件。 有兴趣的话可以阅读《微信小程序中如何从数据库加载真实数据》。 我所有的数据绑定实际上都是内容。

 var article = res.data.content;//article是取到的数据
 var that = this;
 WxParse.wxParse('article', 'html', article, that, 5);

4、引用我需要的模板中刚刚绑定的数据，在entry.wxml中

*终效果如下

以上就是《微信小程序如何将HTML转WXML》一文的全部内容。 感谢您的阅读！ 希望分享的内容对大家有所帮助。 了解更多相关知识，欢迎关注易速云行业资讯频道！

炫佑科技专注互联网开发小程序开发-app开发-软件开发-网站制作等