• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号

HTML5如何转成小程序

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

小程序独立出来了很多原生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}}"/>

 

来自:米筷


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap