将HTML转为微信小程序的WXML案例（html写微信小程序）

将HTML转为微信小程序的WXML案例（html写微信小程序）

本篇文章介绍了如何将HTML转为WXML，具有一定的参考价值，希望对学习微信小程序开发的朋友有帮助！

程序员必备接口测试调试工具：立即使用Apipost = Postman + Swagger + Mock + Jmeter Api设计、调试、文档、自动化测试工具 后端、前端、测试，同时在线协作，内容实时同步

将HTML转为微信小程序的WXML案例

微信小程序开发虽说是比较偏向前端开发，但是它们的语法结构又不太一样。例如，wxml跟html就有本质的不同，就拿a标签来说吧，wxml是不支持a标签的，还有就是wxml不兼容html，下面小编就针对这个问题来分析一下怎么才能将html转换成wxml。具体步骤如下：

1、到https://github.com/icindy/wxParse-

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

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

2.2 在使用的Wxss中引入WxParse.css,可以在app.wxss，注意是全局的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-

下面我按照以上步骤，分析一下我的个人博客做的微信小程序案例，这里以-板块为例

一、我把-好了的wxParse文件夹放到我的项目中，这里只需要放wxParse目录就行了，看图片会发现是跟pages同级的目录。

二、我在我需要展现的页面引入：var WxParse = require('../../wxParse/wxParse.js');因为我不需要样式所有，全局的wxParse.wxss我就注释了。

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

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

-

最终效果如下所示

更多微信小程序开发教程，请关注PHP中文网。

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。