移动端开发ui框架（移动端开发ui框架是什么）

本文目录一览：

• 1、几款实用的VUE移动端UI框架

• 2、移动端框架—OnsenUI

• 3、移动端常用的四个框架

几款实用的VUE移动端UI框架

文档地址：

演示地址：

基于webpack+vue-loader+vux可以快速开发移动端页面，配合vux-loader方便你在WeUI的基础上定制需要的样式（下拉刷新上拉加载组件不再维护，其余组件相对丰富）

文档地址：

演示地址：

 一个基于 vue.js 和 ionic 样式的 UI 框架，用于快速构建移动端单页应用，很简约

文档地址：

演示地址：

滴滴 WebAPP 团队 实现的 基于 Vue.js 实现的精致移动端组件库；组件效果优；视觉效果很棒

文档地址：

演示地址：

最接近原生APP体验的高性能前端框架

文档地址：

演示地址：

有赞前端团队基于有赞统一的规范实现的 Vue 组件库，提供了一整套 UI 基础组件和业务组件

文档：

演示地址：

一套京东风格的轻量级移动端Vue组件库

特性

跨平台，自动转微信小程序组件（稍后上线，敬请期待）

30+ 京东移动端项目正在使用

基于京东APP 7.0 视觉规范

支持按需加载

详尽的文档和示例

支持定制主题

支持多语言（国际化）

支持 TypeScript

支持服务端渲染（Vue SSR）

单元测试加持

配套有基于Webpack的构建工具，可快速创建已内置本组件库的Vue工程

移动端框架—OnsenUI

一个专为移动应用程序设计的UI框架，带有丰富UI组件、遵循原生iOS和Android设计标准，即时实现功能、免费使用，在iOS和Android呈现不同的风格。

①引入相关CSS、JS 文件

原生/JQuery框架

    link rel="stylesheet" href=""

    link rel="stylesheet" href=""

    script src=""/script

vue框架

  安装插件包

    npm install onsenui vue-onsenui

  main.js中引入

    import 'onsenui/css/onsenui.css';

    import 'onsenui/css/onsen-css-components.css';

    import Vue from 'vue';

    import VueOnsen from 'vue-onsenui';

    Vue.use(VueOnsen);

②html 结构中使用相关组件，格式为ons-**,ons-button按钮/ons-button  ons-navigator/ons-navigator ons-input/ons-input

或者使用CSS写法 button class="button"按钮/buttoninput type="text" class="text-input" placeholder="请输入"

vue中标签写法略有区别 v-ons-**  v-ons-button @click="clickFun"按钮/v-ons-button

同大部分UI框架一样，也可以给标签添加不同的class控制同一种标签的不同风格

按钮ons-input,

输入框ons-button,

导航栏ons-navbar,

底部导航栏ons-toolbar,

tab切换 ons-tabbar,ons-tab

列表 ons-list,ons-list-item,ons-list-header; list-item__thumbnail,list-item__title,list-item__subtitle(Class)

卡片 ons-card

网格布局 ons-row，ons-col，

弹框 ons-dialog,ons-modal,ons-popover

移动端常用的四个框架

1：weUI

官方网址：

官方介绍：WeUI 是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信内网页和微信小程序量身设计,令用户的使用感知更加统一。

优点：

做为开发者的我们可以不用写太多css，直接拿过来就可以用。组件都有点击态，大大增加了用户的体验好感，高清屏幕下 border : 0.5

2：Frozen UI

专注于移动web的UI框架,基于腾讯手机QQ规范... FrozenUI提供的CSS组件是目前QQ会员前端开发组所用的通用样式库

官方网址：

优缺点：

基础样式效果简单色调清爽

3：MUI

最接近原生APP体验的高性能前端框架，可多端发布到Appstore、Android市场、浏览器、微信公众号、百度直达号及流应用

官方网址：

优缺点：这个框架给我的吸引之处就是它的 UI 是以 IOS 为 主体设计的，当然它也补充了android特有UI样式。并且MUI官方声称用来开发深入以后发现拿它做 APP 还能够提高用户使用流畅度但网址上对它的评价是一种深入骨髓的廉价感。

4：SUI Mobile

介绍 SUI Mobile 是一套基于 Framework7 开发的UI库。它非常轻量、精美，阿里前端团队出品的SUIMobile的前端UI库，方便迅速搭建手机H5应用,也非常适合开发跨平台Web App

官方网站

优缺点：

兼容性好，能兼到 iOS 6.0+ 和 Android 4.0+

风格：炫酷的iOS风格功能强大的组件轻量的UI库，开始使用，只需要几个简单的步骤

缺点：sui mobile会和jquery冲突:后期维护/编写都很麻烦，开发人员以及离职，大半年都没有维护了

Github：

Demo：

专注于开发的：

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。