一、什么是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. JS实现对数器

    对数器的概念和使用 对数器一般用于验证你写的算法是否正确,因为自己写的测试用例可能写的考虑不够全面. 0.有一个你想测试的方法a 1.实现一个绝对正确但是时间复杂度不好的方法b 2.实现一个随机样本产 ...

  2. Junit中AssertTrue的使用

    assertTrue public static void assertTrue(String message, boolean condition) Asserts that a condition ...

  3. SpringBoot 通过token进行身份验证，存储redis

    代码: public interface TokenManager { /** * 创建token * @param userInfo * @return */ String getToken(Use ...

  4. Linux 解决 firefox 中文页面乱码问题

    1.由于 firefox 默认是允许网页自己选择字体,在 Linux 上便会出现部分网站的乱码情况.因此可以取消允许页面自己选择字体这个选项便能解决部分乱码情况.

  5. Autofac创建实例的方法总结

    1.InstancePerDependency 对每一个依赖或每一次调用创建一个新的唯一的实例.这也是默认的创建实例的方式. 2.InstancePerLifetimeScope 在一个生命周期域中, ...

  6. Gym 100247A The Power of the Dark Side

    https://vjudge.net/problem/Gym-100247A 题意: 每个绝地武士有三个能力值a,b,c,两个武士决斗时谁有两个值大于对方谁就是胜者(a和a比,b和b比,c和c比,所有 ...

  7. EM算法——Expectation-Maximization

    最大似然估计 一个栗子:假如去赌场,但是不知道能不能赚钱,你就在门口堵着出来一个人就问一个赚了还是赔了,如果问了5个人都说赚了,那么你就会认为,赚钱的概率肯定是非常大的. 已知:(1)样本服从分部的模 ...

  8. Mybatis工程搭建

    工程搭建 • 1依赖包 • 2配置文件 • 2.1spring-mybatis.xml • 2.2mybatis-config.xml自带配置文件 • 2.3 mapper(dao)对象 • 2.4 ...

  9. _talent_req

    学习天赋时,将产生消耗,当玩家已经学习过该天赋时,不产生消耗 comment 备注 spellId 天赋技能ID reqId 消耗模板ID,对应_req表中reqId

  10. JAVA中使用浮点数类型计算时，计算精度的问题

    标题     在Java中实现浮点数的精确计算    AYellow(原作) 修改    关键字     Java 浮点数 精确计算   问题的提出:如果我们编译运行下面这个程序会看到什么?publi ...