uixml+H5 demo

config.xml

<?xml version="1.0" encoding="UTF-8"?>
<config scope="client" clientversion="4" devicetype="all" theme="skin-default"> 
  <appid>dwtemplate</appid>  
  <appname>dwtemplate</appname>  
  <description></description>  
  <version>1.0.0</version>  
  <date>2016-02-03</date>  
  <homepage src="res:page/template.uixml"/>  
  <faultconfig src=""/>  
  <access network="true" gps="true" camera="true" certificate="true" land="false" orientation="port"/>  
  <vendor email="" url=""/>  
  <icon main="res:image/main.png" logo="res:image/logo.png"/> 
</config>

 

template.uixml

<!-- ExMobi UIXML(XHTML)文件 -->
<html>
	<head>
		<title show="false"></title>	
		<meta content="charset=utf-8"/>
		<script>
		<![CDATA[
			
		]]>
		</script>
	</head>
	<body>
		<webview url="res:page/template.html"></webview>		
	</body>
</html>

 

template.html

<!-- HTML5文件 -->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"/>
		<title>ceshi</title>
		<script type="text/javascript" src="../script/jquery-3.1.0.min.js"></script>
		<script>
			$(document).ready(function(){
				$("#load").click(function(){
						$.get("http://localhost:8001/process/service/dwtemplate/template", function(data, status) {
							alert(data.dw);
						});
				});
			})
		</script>
	</head>
	<body>
		<button id="load">加载</button>
	</body>
</html>

 

mapp.xml

<?xml version="1.0" encoding="UTF-8" ?>
<maxml version="2.0" xmlns="http://www.nj.fiberhome.com.cn/map"
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xsi:schemaLocation="http://www.nj.fiberhome.com.cn/map maxml-2.0.xsd">
	<config>
		<htmlformat wellformat="true" />
		<filepreviewconfig wordtohtml="false" />
	</config>

	<services>
		<http-filter name="template" file="template.jsp">
			<url-pattern>/template</url-pattern>
		</http-filter>
		<http-service-ext extfile="testapi.ac" />
	</services>
</maxml>

 

 

template.jsp

<%-- ExMobi JSP文件,注释和取消快捷键统一为Ctrl+/ 多行注释为Ctrl+Shift+/ --%>
<%@ page language="java" import="java.util.*"
 contentType="application/uixml+xml; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="/client/adapt.jsp"%>
<%@ include file="/client/adapt_extend.jsp"%>
<aa:http id="template" url='<%="http://localhost:8001/process/service/dwtemplate/data/template.json"%>' method="get"/>
<%
	String data = aa.regex(".*", "template");
	System.out.print(data);
	response.setCharacterEncoding("UTF-8");
	response.setContentType("application/json; charset=utf-8");
	response.addHeader("Access-Control-Allow-Origin", "*");
	response.getWriter().write(data);
%>

template.json

{
	"dw":"测试json"
}

 

testapi.ac

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<maxml-api xsi:schemaLocation="http://www.nj.fiberhome.com.cn/map ../../../maxml-api-2.0.xsd" xmlns="http://www.nj.fiberhome.com.cn/map" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
    <http-service id="testapi" isrest="true" name="测试模块">
        <forward method="get" name="测试" path="template.jsp" pattern="/template"/>
    </http-service>
</maxml-api>

 

### 回答1: ColorUI是一个基于Vue框架的UI组件库,可以帮助开发者快速构建现代化的H5页面。它提供了大量的样式和组件,包括按钮、表单、卡片、导航栏等等,能够满足各种页面的需求。 在使用ColorUI之前,我们首先需要将其引入到项目中。通过npm安装或者直接下载源码都可以使用ColorUI,然后在Vue项目的入口文件中引入ColorUI样式。接着我们就可以在Vue组件中使用ColorUI提供的组件了。 例子中的ColorUI H5 Demo就是一个使用ColorUI库开发的示例网页。这个Demo展示了一些常用的ColorUI组件和样式,以及它们的用法。 在Demo中,我们可以看到ColorUI的按钮组件,这些按钮有不同的样式和颜色,可以满足不同的设计需求。另外,Demo中还使用了ColorUI的表单组件,包括输入框、选择器等等,方便用户输入和选择。 除了按钮和表单,Demo中还展示了其他组件和样式,比如导航栏、卡片、弹窗等等。这些组件和样式都经过了精心设计,使得页面看起来更加美观和专业。 通过ColorUI,我们可以快速搭建一个样式独特、功能齐全的H5页面。我们可以根据实际需求使用ColorUI提供的样式和组件,也可以根据自己的设计进行定制。 总之,ColorUI H5 Demo是一个演示了ColorUI库的示例网页,展示了ColorUI提供的各种组件和样式,方便开发者快速构建漂亮的H5页面。 ### 回答2: ColorUI H5 Demo是一款基于ColorUI前端框架开发的H5页面演示。ColorUI是一套基于微信小程序的UI框架,提供了丰富的样式和组件,能够帮助开发者快速搭建精美的小程序界面。 ColorUI H5 Demo就是将ColorUI框架应用到H5页面上,展示了ColorUI的各种特性和功能。通过这个demo,开发者可以观看到不同样式和组件的效果,并且了解如何使用ColorUI进行开发。 这个demo具有良好的可参考性和实用性,可以作为开发者学习和使用ColorUI的参考案例。通过查看源码和示例,开发者可以学习到各种样式的应用方法、组件的使用方法和实现原理。 ColorUI H5 Demo的特点是简洁、美观且易于使用。它提供了丰富多样的界面元素,如按钮、导航栏、表单、列表等,可以满足各种H5页面的需求。同时,ColorUI框架还提供了响应式设计,适配了不同尺寸的屏幕,保证了页面在不同设备上的良好展示效果。 总之,ColorUI H5 Demo是一款优秀的H5页面演示,它展示了ColorUI框架的强大功能和使用方法。对于想要学习ColorUI的开发者来说,这个demo是一个很好的学习资源和参考案例。 ### 回答3: ColorUI H5 Demo是一种基于ColorUI框架开发的H5页面示例。ColorUI框架是一个开源的UI组件库,提供了丰富的组件和样式,使开发者能够快速构建美观、易用的H5页面。 ColorUI H5 Demo展示了ColorUI框架的各种功能和用法。通过这个示例,可以了解ColorUI框架中的各种组件,比如按钮、表单、导航栏等,并且可以查看它们的样式和效果。同时,Demo还展示了如何使用ColorUI的CSS样式和JavaScript交互功能,以及如何定制和扩展ColorUI组件。 ColorUI H5 Demo除了展示框架功能外,还提供了一些实际案例供参考。比如,可以看到如何使用ColorUI来开发一个购物车页面、一个新闻列表页面或一个个人中心页面等。这些案例有助于开发者理解如何灵活运用ColorUI来构建不同类型的H5页面。 通过ColorUI H5 Demo,开发者可以快速上手ColorUI框架,减少开发时间,提高开发效率。同时,ColorUI H5 Demo还为开发者提供了一个学习和交流的平台,可以与其他开发者分享经验、解决问题。 总之,ColorUI H5 Demo是一个展示ColorUI框架功能和用法的示例,对于想要学习使用ColorUI框架的开发者来说,是一个非常有价值的资源。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值