HTML5如何转成小程序

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

 

那对于HTML5应用的咱办呢？

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

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

 

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

准备工作：

 

首先下载wxParse

 

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

 

以下是具体的使用步骤

 

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

@import "/wxParse/wxParse.wxss"

 

 

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

<import src="../../wxParse/wxParse.wxml"/>

 

引入js并加载数据

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

数据绑定

var article = '<div>我是HTML代码</div>';

/**

* 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

<template is="wxParse" data="{{wxParseData:article.nodes}}"/>

 

来自：米筷