一、什么是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. django基础 -- 3. urls.py view.py 参数 别名 重定向 常用方法 静态文件

    一.基本格式 from django.conf.urls import url from . import views #循环urlpatterns,找到对应的函数执行,匹配上一个路径就找到对应的函数 ...

  2. 查看Windows系统信息

    在终端输入"msinfo32". ms>Microsoft info>information

  3. topcoder srm 535 div1

    problem1 link 对于每个质因子$p$,枚举其出现的最少次数以及最多次数分别在哪个数字中． problem2 link 分数规划．题目是求$\frac{3600K+\sum_{i=0}^{K ...

  4. Bootstrap3基础 form-control 圆角的输入框，光标放入后边框变色

      内容 参数   OS   Windows 10 x64   browser   Firefox 65.0.2   framework     Bootstrap 3.3.7   editor    ...

  5. ssm项目中 数据库和资源的备份

    备份 备份很重要 数据库的备份 mysqldump -u用户名 -p密码 所需要备份的数据库 > ~/backup/sql/o2o`date +%Y%m%d%H%M%S`.sql 资源的备份 t ...

  6. POJ 2718 Smallest Difference（最小差）

     Smallest Difference(最小差) Time Limit: 1000MS    Memory Limit: 65536K Description - 题目描述 Given a numb ...

  7. 【NOIP 2016】Day1 T2 天天爱跑步

    Problem Description 小 C 同学认为跑步非常有趣,于是决定制作一款叫做<天天爱跑步>的游戏.<天天爱跑步>是一个养成类游戏,需要玩家每天按时上线,完成打卡任 ...

  8. Spring线程池

    •依赖 spring-context-support •配置: <bean id ="taskExecutor" class ="org.springframewo ...

  9. 小程序之取标签中内容 例如view，text

    // index.wxml页面 data-url为自定义 {{}}中内容可为后台请求到的数据 也可为固定内容例如:data-text="哈哈哈" data-url="ht ...

  10. Java中的异常 Exceptions

    1. 概念 exception是“exceptional event”的缩写,是指执行程序中发生的事件,破坏了程序的正常执行流程.Java 异常处理机制使程序更加健壮易于调试,它可以告诉程序员三个问题 ...