uniapp开发app框架在提升开发效率中的独特优势与应用探索
1347
2022-10-09
Onsen UI - HTML5混合移动应用程序框架(onsensou是什么牌子)
Onsen UI - Cross-platform HTML5 Mobile App Framework
Onsen UI is a library of UI components to help you create beautiful hybrid and mobile web apps for both Android and iOS using Javascript.
The core library is written in pure Javascript and is framework agnostic which means you can use it with your favorite frameworks such as:
ReactAngular2Angularjs 1.xVue.js (WIP)
Onsen UI provides styles for both iOS flat design and Android's Material Design. The components will be automatically styled based on the platform which makes it possible to support both iOS and Android with the same source code.
Getting started
We have several resources to help you get started creating hybrid apps with Onsen UI:
The official docs provide reference for the core library as well as the React, Angular2 and AngularJS 1.x components.We have an interactive Onsen UI tutorial where you can learn how to use the library and play around with the components.There are lots of great tutorials and guides published in our official Onsen UI blog and we are adding new content regularly.
Support
If you are having trouble using some component the best place to get help is the Onsen UI Forum. We are also available to answer short questions on Twitter at @Onsen_UI.
Examples with source code
There are lots of sample applications written using Onsen UI. Here are some examples to give you an idea of what kind of apps you can create:
Real time React Chat App with OnsenUI and Horizon!
Download source code
Weather application using React, Redux and Webpack
Download source code
Todo application in pure Javascript
Download source code
What is Onsen UI?
Open source, free and open for all. It's designed and implemented to deliver unprecedented user interface and user experience for your mobile and hybrid apps. Onsen UI is built on top of Web Components so applications can be built using HTML tags web developers already know and love.Framework agnostic. This means that it can be used with whatever front-end framework you prefer. However, it also provides a binding library for Angular 1 & 2 which makes it easy to integrate our custom tags with these frameworks. React Components for Onsen UI are also available and they play really well with React tooling such as React Hot Loader, Redux or MobX.Completely integrated with Monaca kit, a complete set of tools that makes PhoneGap/Cordova development super simple. Monaca CLI provides Onsen UI templates, device debugger, remote building and any service you might need directly from your terminal. We also have GUI and cloud alternatives if you prefer that over CLI.Beautifully made with flat (iOS) and Material Design (Android) flavors. It automatically styles your app depending on the platform and gives you control to customize it. Check out our Automatic Styling in action. It also includes Onsen CSS Components, a free resource of UI templates with "theme roller" functionality. Developers can pick and choose, grab the code they need, and they're off and running. And they can create their own templates and submit to Onsen UI to be included with other templates available.Fully documented. And if you want even more, we provide an Interactive Tutorial where you can try and modify examples, export your code online and even generate Cordova projects.Community based. Check out our blog, forum and chat to get the latest updates and directly contact the dev team. We are always very active answering questions so you don't get stuck with your apps.
Browser Support
Onsen UI is tested with the following browsers and mobile OS.
Android 4.4+ (and Android 4.0+ with Crosswalk engine)iOS8+Windows Phone 10+Google ChromeSafari
What's Included
Material Design: For Native-like Android UIWeb Components: for Custom ElementsAngularJS module: bindings are backwards compatible with Onsen UI 1Angular 2 components: components for Angular 2React components: components for React
Getting Started Using Templates
See the Onsen UI Getting Started page. We provide project templates for you in the project-templates repository. You will see the instruction on how to run the project there. For Visual Studio developers we provide directly provide Onsen UI extension.
Getting Started Using Monaca
Monaca is a set of tools that makes hybrid mobile app development with PhoneGap/Cordova simple and easy: debugging suite, push notifications, remote build, back-end, encryption, version control and more. See the Onsen UI Getting Started Page for more information.
$ [sudo] npm -g install monaca$ monaca create helloworld # And choose the starter template$ cd helloworld # Switch to the directory$ monaca preview # Preview on the browser$ monaca debug # Preview on the real device
Download Onsen UI
Onsen UI is available with npm, bower or jspm. Example:
npm install onsenui
For React:
npm install react-onsenui
For Angular2:
$ npm install angular2-onsenui
How to manually build this project
Clone this repository and run the following commands to build the project:
$ yarn$ gulp build
This command requires you to install yarn if you haven't already. The files will be built and copied into build folder.
Running Examples
$ gulp serve
Then navigate your browser to http://0.0.0.0:3000/examples/index.html
Running the test suite
Onsen UI has unit tests for the Web Components as well as end-to-end testing of the AngularJS directives using Protractor.
Use the following commands to run the unit tests:
$ gulp core-test
or these commands for the protractor tests:
$ gulp e2e-test
It will take some time the because it will download a stand-alone Selenium Server and a Chrome webdriver the first time it's executed.
To run a single test or a group of tests use the --specs parameter and provide a comma-separated list of spec files:
$ gulp e2e-test --specs test/e2e/lazyRepeat/scenarios.js
In order to run both the unit tests and the end-to-end tests use the following command:
$ gulp test
How to contribute
Please see our document on contributing. See the full list of contributors here.
版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。
发表评论
暂时没有评论,来抢沙发吧~