❤
npm
Sign UpSign In

my-ui

1.0.1 • Public • Published

移动端UI组件库

用法

  • 安装 npm install my-ui --save-dev
  • 主题风格引入 @import "UI/src/stylesheets/themes/themes.scss";
  • mixin引入 @import "UI/src/stylesheets/helps/mixin.scss";
  • 全局引入 @import "UI/src/stylesheets/my-ui.scss";
// 全局引入基础模块
<style scoped lang="sass">
  @import "UI/src/stylesheets/my-ui.scss";
</style>
  • 字体图标库引入 @import "UI/src/stylesheets/font/iconfont.scss";
// 入口文件 引入 字体图标库
<script>
  import 'UI/src/stylesheets/global/iconfont.scss'
</script>
  • 局部模块引入 @import "UI/src/stylesheets/modules/**.scss";
// 局部模块引入
<script>
  @import "UI/src/stylesheets/modules/header.scss";
  @import "UI/src/stylesheets/modules/search.scss";
  @import "UI/src/stylesheets/modules/tabBar.scss";
</script>

技术选型

  • html5/html
  • css/css3
  • scss/sass

基础组件

  • 按钮（button）
  • 弹性盒子（flex）
  • 表单（form）
  • 图标（icon）
  • 列表（list）

扩展组件

  • 页头（header）
  • 页脚（footer）
  • 搜索（search）
  • 待扩展

目录结构

.UI                                       移动端UI组件库   
└── src                                   
    └── global                                    基础组件  
        └── button                                按钮
            ├── button.html
            ├── button.scss
            ├── button.css
            └── button.css.map  	
        └── flex                                  弹性盒子
            ├── flex.html                         
            ├── flex.scss
            ├── flex.css
            └── flex.css.map
        └── form                                   表单
            ├── form.html
            ├── form.scss
            ├── form.css
            └── form.css.map  
        └── icon                                  图标
            ├── iconFontclass.html
            ├── iconSymbol.html
            ├── iconUnicode.html
            └── icon.css  
        └── list                                   列表 
            ├── list.html
            ├── list.scss
            ├── list.css
            └── list.css.map    
    └── images                                    图片/图标
        ├── global                                全局图标/图片
        └── modules                               扩展组件图片/图标
            ├── header                            页头图片/图标
            ├── footer                            页尾图片/图标
            └── search 	                        搜索图片/图标
    └── modules                                   扩展组件
        └── header                                页头
            ├── header.html
            ├── header.scss
            ├── header.css
            └── header.css.map
        └── tabBar                                标签栏
            ├── tabBar.html
            ├── tabBar.scss
            ├── tabBar.css
            └── tabBar.css.map  	
        └── search                                搜索
            ├── search.html
            ├── search.scss
            ├── search.css
            └── search.css.map  
    └── stylesheets                               样式库
        └── global                                全局样式/基础样式
            ├── font
            ├── base.scss
            ├── base.css
            ├── base.css.map
            ├── button.scss
            ├── button.css
            ├── button.css.map
            ├── flex.scss
            ├── flex.css
            ├── flex.css.map
            ├── form.scss
            ├── form.css
            ├── form.css.map
            ├── layout.scss
            ├── layout.css
            ├── layout.css.map
            ├── list.scss
            ├── list.css
            ├── list.css.map
            ├── reset.scss
            ├── reset.css
            └── reset.css.map  
        └── helps                                 存放通用混合宏或变量
            ├── mixin.scss
            ├── mixin.css
            └── mixin.css.map 
        └── modules                               扩展组件核心样式库
            ├── header.scss
            ├── header.css
            ├── header.css.map
            ├── tabBar.scss
            ├── tabBar.css
            ├── tabBar.css.map  	
            ├── search.scss
            ├── search.css
            └── search.css.map  
        └── themes                                主体风格
            ├── themes.scss
            ├── themes.css
            └── themes.css.map
        └── vendors                               第三方样式库
    └── temp                                      临时图片                              
        ├── global
        └── modules 
            ├── header
            ├── tabBar
            └── search

UI设计规范

  • 设计稿分辨率要求统一为750*1334

HTML5基础模板

<!DOCTYPE html>
<html>
<head>
    <title>网易版字体尺寸全部根据rem配置(http://www.cnblogs.com/axl234/p/5156956.html)</title>
    <meta charset="utf-8">
    <meta http-equiv="Expires" content="0">
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Cache-control" content="no-cache">
    <meta http-equiv="Cache" content="no-cache">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="yes" name="apple-touch-fullscreen">
    <meta name="format-detection" content="telephone=no, email=no"/>
    <!-- 优先使用 IE 最新版本和 Chrome -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
 
    <!-- 页面描述 -->
    <meta name="description" content="不超过150个字符"/>
 
    <!-- 页面关键词 -->
    <meta name="keywords" content=""/>
 
    <!-- 搜索引擎抓取 -->
    <meta name="robots" content="index,follow"/>
 
    <!-- 启用360浏览器的极速模式(webkit) -->
    <meta name="renderer" content="webkit">
 
    <!-- 避免IE使用兼容模式 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
    <!-- 不让百度转码 -->
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
 
    <!-- 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓 -->
    <meta name="HandheldFriendly" content="true">
 
    <!-- 微软的老式浏览器 -->
    <meta name="MobileOptimized" content="320">
 
    <!-- uc强制竖屏 -->
    <meta name="screen-orientation" content="portrait">
    <!-- QQ强制竖屏 -->
 
    <meta name="x5-orientation" content="portrait">
    <!-- UC强制全屏 -->
    <meta name="full-screen" content="yes">
    <!-- QQ强制全屏 -->
 
    <meta name="x5-fullscreen" content="true">
    <!-- UC应用模式 -->
    <meta name="browsermode" content="application">
    <!-- QQ应用模式 -->
    <meta name="x5-page-mode" content="app">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <link rel="apple-touch-icon" href="favicon.png">
    <link rel="Shortcut Icon" href="favicon.png" type="image/x-icon">
</head>
<body>
<!--code-->
</body>
</html>

移动端适配方案

根据UI设计根据750*1334进行设计，故调整为网易版字体尺寸全部根据rem配置(http://www.cnblogs.com/axl234/p/5156956.html)

1.在页面顶部引入如下js代码

<script type="text/javascript">
        (function (doc, win) {
            var docEl = doc.documentElement, resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', recalc = function () {
                var clientWidth = docEl.clientWidth;
                if (!clientWidth) return;
                document.documentElement.style.fontSize = document.documentElement.clientWidth / 7.5 + 'px';
            };
            if (!doc.addEventListener) return;
            win.addEventListener(resizeEvt, recalc, false);
            doc.addEventListener('DOMContentLoaded', recalc, false);
        })(document, window);
    </script>

2.开发页面时，包括字体全部用rem替换px，另外需要进行px换算rem,如：设计稿宽度为50px,这，在样式表定义时，定义为.5rem,具体demo如下：

div {
    width:.5rem
}

开发注意事项

HTML5

  • 避免嵌套多层
  • 标签统一小写，如：
<!--错误书写方式-->
<SPAN>
    <IMG SRC="">
</SPAN>
<!--正确书写方式-->
<span>
    <img src="">
</span>
  • 标签必须闭合
  • 一个页面由多个模块或组件组成，应标明注释，如下：
<body>
    <!--页头-->
    <header>
        我是页头
    </header>
    <!--end 页头-->
    <!--页脚-->
    <footer>
        我是页脚
    </footer>
    <!--end 页脚-->
</body>
  • 页面布局上涉及到页面逻辑需要后端处理或者说在嵌套数据的时候需要注意的地方应标明注释
  • 开发每个模块之前优先考虑下命名规范，再次考虑下是否有其他页面用到类似或者一样的组件是否可以通用等，最后考虑嵌套逻辑是否复杂，有什么方法调整布局可以减少嵌套数据时的逻辑处理的方法等。如下：
<!--普遍的实现方案-->
<style>
    ul {
        li {
            border:1px solid red;
            &.last {
                border: 0;
            }
        }
    }
</style> 
<ul>
    <li>我是列表</li>
    <li>我是列表</li>
    <li class="last">我是列表</li>
</ul>
 
<!--优化后的实现方案-->
<style>
    ul {
        li {
            border:1px solid red;
            &.last-child {
                border: 0;
            }
        }
    }
</style> 
<ul>
    <li>我是列表</li>
    <li>我是列表</li>
    <li>我是列表</li>
</ul>

CSS3

  • 公共基础模块为每个项目开发中必须的不可或缺的一部分，如：button\flex\form\icon\list等，命名前缀统一为'g-',一般为global文件夹下的
  • 通用模块为多个不同页面的部分模块所共用的部分，命名前缀统一为'm-',一般为modules文件夹下的
  • 页面为基础模块与通用模块组成的一个页面，如果涉及到页面上独有的样式需要定义，css命名统一为页面名字，如果名字过长，可用缩写但一定要保证与其他页面命名不冲突
  • css中的id\class等选择器命名统一用'-'中划线来分隔 例如：
.g-button {} // 基础模块
.m-button {} // 通用模块
.button {}   // 页面

文件及文件夹命名规范

  • 文件夹命名统一用驼峰命名法，如：
├── order
    ├── orderList.html
    ├── orderDetail.html
    └── orderDetail.html

Readme

Keywords

none

Package Sidebar

Install

npm i my-ui

Repository

github.com/Saomonite/UI-

Homepage

github.com/Saomonite/UI-#readme

Weekly Downloads

2

Version

1.0.1

License

ISC

Last publish

Collaborators

  • samonnite
Try on RunKit
Report malware