一、什么是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. Codeforces Round #424 (Div. 2, rated, based on VK Cup Finals) Problem F (Codeforces 831F) - 数论 - 暴力

    题目传送门 传送门I 传送门II 传送门III 题目大意 求一个满足$d\sum_{i = 1}^{n} \left \lceil \frac{a_i}{d} \right \rceil - \sum ...

  2. mysql安装方式

    1.进入mysql官网https://www.mysql.com/,选择downloads——community——mysql community server,然后在下面选择版本后点击downloa ...

  3. ps一些疑问知识点

    PS 的核心, 是 选择, 是 抠图, 不管是蒙版, 通道也好等等, 其实主要的作用还是 抠图. 还是精确地 选出你要处理的 内容对象! 如何改变工具预设? 使用工具预设, 可以将你当前正在使用的 / ...

  4. P3979 遥远的国度

    P3979 遥远的国度 思路 一开始我用这个函数得到左端点 int get_l(int x,int y) { if(top[x]==top[y]) return son[x]; int last=to ...

  5. ZOJ 3829 Known Notation（贪心）题解

    题意:给一串字符,问你最少几步能变成后缀表达式.后缀表达式定义为,1 * 1 = 1 1 *,题目所给出的字串不带空格.你可以进行两种操作:加数字,交换任意两个字符. 思路:(不)显然,最终结果数字比 ...

  6. GC 垃圾收集

    算法: 没有使用引用计数算法.使用的是GC Roots 可达性算法. 复制算法:新生代,老年代. 标记-整理算法:一般会对对象标记几次才会清理掉.然后从新整理物理内存空间. 分代收集算法:更加对象存活 ...

  7. Tutorials on Inverse Reinforcement Learning

    Tutorials on Inverse Reinforcement Learning 2018-07-22 21:44:39 1. Papers:  Inverse Reinforcement Le ...

  8. postgreSql——时区问题

    timestamptz.timestamp SELECT ts AT TIME ZONE 'UTC' FROM ( VALUES (timestamptz '2012-03-05 17:00:00+0 ...

  9. Gtk 窗口，控件，设置（添加图片等）

    1.关于窗口   // 创建顶层窗体,后面有POPUP的 GtkWidget *main_window; main_window = gtk_window_new (GTK_WINDOW_TOPLEV ...

  10. ComponentOne 2017 V1 发布

    在刚刚庆祝完Visual Studio20周年之后,我们迎来了ComponentOne 2017年第一个重要的版本. ComponentOne Studio与Visual Studio 2017配合发 ...