一、什么是Onsen UI？

1、一系列专为移动应用程序设计的丰富UI组件、具有遵循原生iOS和Android设计标准的即时实现功能、免费使用，100％开源软件（Apache v2许可证）。Onsen UI通过原生设计的UI元素丰富了应用用户的移动体验。它非常适合使用Cordova开发混合应用程序或开发移动Web应用程序。

2、Onsen UI是面向未来的架构，包含三个层次：CSS组件，用cssnext编写，是下一代CSS；Web Components，用本机JavaScript编写，支持所有框架；框架绑定，用于与流行框架（如Vue.js，AngularJS 1，Angular 2+和React）更紧密地集成。

3、浏览器和设备支持。Onsen UI已针对以下平台进行了全面优化和测试。

  • 移动

    • iOS 9及更高版本
    • Android 4.4.4及更高版本的WebView或Chrome浏览器（Android 4.0及以上的Crosswalk引擎）
  • 桌面
    • 最新版本的Safari浏览器
    • 最新版本的Chrome浏览器

对于其他平台，请注意某些组件或功能可能无法正常工作。

二、Onsen UI框架的安装

官方文档：https://onsen.io/v2/guide/installation.html#installation

我们可以直接下载Onsen UI框架，在web页面源代码中引用核心的框架文件。或者你可以使用被提供的CDN，当然，在您开发的过程中需要联网，确保能请求到框架相关的文件。

三、Onsen UI第一个应用程序

<html>
　　<head>
　　　　<meta charset="utf-8"/>
　　　　<meta name="keywords" content=""/>
　　　　<meta name="description" content=""/>
　　　　<title>第一个Onsen UI程序</title>
　　　　<link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsenui.css">
　　　　<link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsen-css-components.min.css">
　　　　<script src="https://unpkg.com/onsenui/js/onsenui.min.js"></script>
　　</head>
　　<body>
　　　　<ons-button onclick="alert('Hello World!')">Click Me</ons-button>
　　</body>
</html>

Onsen UI快速入门 --Onsen UI的更多相关文章

  1. jquery easy ui 1.3.4 快速入门（1）

    什么是easyui jQuery EasyUI是一组基于jQuery的UI插件集合,而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面.开发者不需要编写复杂 ...

  2. UI设计初学者必看，这款设计神器教你快速入门

    网络时代,网页和手机App已经深入到人们生活的方方面面.这也使得App界面设计越来越受青年求职者们的青睐,并纷纷投入这个行业.但是,作为UI设计初学者,究竟如何才能快速的入门?当今市场上,是否有那么一 ...

  3. UI设计小白怎样学才能快速入门？

    最近有很多同学问我,UI小白有什么捷径可以快速入门?其实我想说设计这门学科没有什么捷径,真的只有多学.多看.多练.多想.多做. 1.先学软件 如果你是小白,软件也不会用,那就先学软件,从PS开始,先看 ...

  4. iOS开发-UI 从入门到精通(三)

    iOS开发-UI 从入门到精通(三)是对 iOS开发-UI 从入门到精通(一)知识点的综合练习,搭建一个简单地登陆界面,增强实战经验,为以后做开发打下坚实的基础! ※在这里我们还要强调一下,开发环境和 ...

  5. iOS开发-UI 从入门到精通(二)

    iOS开发-UI 从入门到精通(二)是对 iOS开发-UI 从入门到精通(一)知识点的巩固,主要以习题练习为主,增强实战经验,为以后做开发打下坚实的基础! ※开发环境和注意事项: 1.前期iOS-UI ...

  6. 无需编码开发快速设计互动式UI - uilang

    uilang是一个非常小巧的ui类库,可以帮助不熟悉前端代码的web设计人员快速的开发互动式UI.你只需要使用“语义式”的说明来控制元素的动态效果. 开发中你只需要在<code>标签内部输 ...

  7. Reactive UI -- 反应式编程UI框架入门学习（二）

    前文Reactive UI -- 反应式编程UI框架入门学习(一)  介绍了反应式编程的概念和跨平台ReactiveUI框架的简单应用. 本文通过一个简单的小应用更进一步学习ReactiveUI框架的 ...

  8. 【番外篇】ASP.NET MVC快速入门之免费jQuery控件库（MVC5+EF6）

    目录 [第一篇]ASP.NET MVC快速入门之数据库操作(MVC5+EF6) [第二篇]ASP.NET MVC快速入门之数据注解(MVC5+EF6) [第三篇]ASP.NET MVC快速入门之安全策 ...

  9. HTML5快速入门（三）—— 标签综合运用

    前言: 1.HTML5的发展非常迅速,可以说已经是前端开发人员的标配,在电商类型的APP中更是运用广泛,这个系列的文章是本人自己整理,尽量将开发中不常用到的剔除,将经常使用的拿出来,使需要的朋友能够真 ...

随机推荐

  1. PID算法控制简单理解

    1 传统的位式控制算法 用户期望值Sv(设定值)经控制算法输出一个输出信号OUT,输出信号加载到执行部件上(像MOS管等)对控制对象进行控制(步进电机.加热器等),控制对象的当前值(Pv)如速度通过传 ...

  2. Spring 学习——Spring JSR注解——@Resoure、@PostConstruct、@PreDestroy、@Inject、@Named

    JSR 定义:JSR是Java Specification Requests的缩写,意思是Java 规范提案.是指向JCP(Java Community Process)提出新增一个标准化技术规范的正 ...

  3. ODAC（V9.5.15) 学习笔记（三）TOraSession（4）

    4. 数据库信息 名称 类型 说明 GetDatabaseNames 获取对应的数据库对象名称列表 GetSequenceNames GetStoredProcNames GetTableNames ...

  4. MongoDB 创建索引及其他

    索引 以提升查询速度 测试:插入十万条数据到数据库中 for(i=0;i<100000;i++){db.t255.insert({name:'test'+i,age:i})} db.t1.fin ...

  5. Spring Boot 2 入门

    Spring Boot其设计目的是用来简化新Spring应用的初始搭建以及开发过程.该框架使用了特定的方式来进行配置,从而使开发人员不再需要定义样板化的配置. 参考网上资料,一路踩了几个坑,终于搞出了 ...

  6. Hive初步使用、安装MySQL 、Hive配置MetaStore、配置Hive日志《二》

    一.Hive的简单使用 基本的命令和MySQL的命令差不多 首先在 /opt/datas 下创建数据  students.txt 1001 zhangsan 1002 lisi 1003 wangwu ...

  7. mvc扩展HtmlHelper功能

    HtmlHelper详细介绍 简单示例 自定义HtmlHelper 解决: 直接写HTML的话如果语句有语法错误,如缺少结尾标记</b>,编译器不会报错,出来的页面可能会很乱且难以查出错误 ...

  8. 嵌入式Linux要学哪些东西?你真的造吗?

    嵌入式Linux要学哪些?一些人总在寻思,怕走了弯路,又怕学的东西离企业需求远.那么今天就请华清远见高级讲师曹大神告诉你,9点浅析嵌入式学习步骤.下面是他本人亲笔. 1.要学习Linux,首先要会用, ...

  9. C# 委托例子

    两个子窗口向一个主窗口发送信息 主窗口: using System; using System.Collections.Generic; using System.ComponentModel; us ...

  10. 如何查找CpG Islands, CpG shores等 --转载

    转载自: http://blog.sciencenet.cn/blog-306699-1033567.html 在homo species物种,随着研究的深入,注释信息不断丰富 针对CpG Islan ...