一、什么是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. 流程控制if，while，for

    if语句 什么是if语句 判断一个条件如果成立则做...不成立则做....为何要有if语句 让计算机能够像人一样具有判断的能力 如何用if语句 语法1: if 条件1: code1 code2 cod ...

  2. ubuntu18.04无法安装libesd0-dev【学习笔记】

    执行如下命令安装: sudo apt-get install libesd0-dev 却报了这个错误: 解决办法: sudo vim /etc/apt/sources.list //在行尾添加如下两行 ...

  3. Ubuntu18.04 一些好用的扩展

    原文:https://www.lulinux.com/archives/2589 一些好用的扩展: United:https://www.gnome-look.org/p/1167950/ dynam ...

  4. 【团队】EasyKing的实现_1

    完成部分 三个功能类 英雄. 子弹. 瓦片地图. 一个设置类 地图 实现功能 瓦片地图 英雄移动 攻击 受到攻击 TODO 子弹攻击范围 地图.建筑物和英雄的碰撞箱 音效 英雄技能 建筑 双人联机 物 ...

  5. 【Hadoop 分布式部署 五：分布式部署之分发、基本测试及监控】

    1.对  hadoop 进行格式化 到  /opt/app/hadoop-2.5.0  目录下 执行命令:    bin/hdfs namenode -format 执行的效果图如下  (  下图成功 ...

  6. QLineEdit响应回车时避免Button同时响应

    pButton->setAutoDefault(false);

  7. 【译】第40节---EF6-命令监听

    原文:http://www.entityframeworktutorial.net/entityframework6/database-command-interception.aspx 本节,将学习 ...

  8. FI CO 常用表

    FI CO 常用表     最近写FICO的报表写得有点多,许多Table记不住,用F1查找又有点费事,不如把表单写下来,以后用到,直接在这上面找得了. 1,账目表主数据  SKA1  SKB1  S ...

  9. 登陆ArcGIS Server Manager时一直显示”请稍后……”

    登陆Server Manager时一直显示”请稍后……”新建完成ARcGIS ServerSite,设置用户名和密码.但是登陆时却发现一直处于等待状态,如下图: 更换为IE浏览器后发现,已经可以登陆并 ...

  10. oracle 新建用户

    create user username identified by password; grant dba to username; 授权 或 grant connect, resource to ...