HTML5如何转成小程序

小程序独立出来了很多原生APP的组件,这对于HTML5的老兵是一种痛苦,小程序自己开发了一套WXML标记语言和WXSS样式语言,并非直接使用标准的HTML5+CSS3,小程序与传统HTML5还是有明显的区别。

 

那对于HTML5应用的咱办呢?

如何快速的从HTML5转换成小程序呢?

甚至是在考虑小程序与HTML5应用是同一个程序,方便统一维护。

 

网络上有推荐了一款html5转为wxml的插件“wxParse”。

准备工作:

 

首先下载wxParse

HTML5如何转成小程序_第1张图片

 

下载完之后需要用到目录下的wxParse文件夹,把它拷贝到的项目目录下。

 

以下是具体的使用步骤

 

在app.wxss全局样式文件中,需要引入wxParse的样式表

@import "/wxParse/wxParse.wxss"

 

HTML5如何转成小程序_第2张图片

 

在需要加载html内容的页面对应的js文件里引入wxParse

HTML5如何转成小程序_第3张图片

 

引入js并加载数据

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

HTML5如何转成小程序_第4张图片

数据绑定

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

 

  1. 模板引用

//这里data中article为bindName