ipuUI

ipuUI是对webapp场景下前端开发,提供一些常用UI组件库,目的是减少前端重复功能开发,提升开发效率,本内容只是简单介绍,UI的详细Demo和API文档见下面链接

与IPU框架关系

  • IPU框架3.0及以前版本,框架不依赖ipuUI,开发者可选择ipuUI为前端库,也可以选择其它第三方UI库来开发。
  • 3.1版本开始,在浏览器上运行页面时,打开新页面的api如openPage对ipuUI存在依赖,默认需引入ipuUI,若要换成其它第三方库需修改框架代码,移除依赖。

库文件及依赖

库文件:

  • ipuUI.js
  • ipuUI.css

依赖的第三方库

  • jQuery (工具库)
  • iScroll.js (滚动库,4.x版本,库代码有变动)
  • Hammer.js (手势库)
  • FastClick.js (点击延迟问题处理,库代码有变动)
  • MaterialDesignIcon (demo中使用字体图标库,选用的库,可不使用)

requirejs配置

IPU框架使用requirejs模块化加载js代码,ipuUI.js及依赖库的Requirejs配置,可参考如下配置,第三库的模块名称如iScroll,在ipuUI.js代码中已写死,不可变更配置中第三方库的模块名称

 require.config({
   paths: {
     'iScroll': 'dep/js/iscroll/iscroll',
     'Hammer': 'dep/js/hammer/hammer',
     'jquery': 'dep/js/jquery/jquery',
     'FastClick': 'dep/js/fastclick/fastclick',
     'ipuUI': 'dist/js/ipuUI'
   }
 });

宽度适配方案

本UI库使用rem和媒体查询处理移动端宽度适配,最小适配宽度为320px,宽度小于320px,样式显示可能会不正常, 若宽度大于640px时,显示内容尺寸同640宽度时显示,如720宽度时内容尺寸按640宽度下尺寸显示

rem

rem是css尺寸单位,单位是一个相对值,是根据html元素的字体大小换算得来,若html字体大小为100px,则

  • 1rem = 1*100px = 100px
  • 0.2rem = 0.2*100px = 20px

媒体查询

通过css媒体查询,在不同显示宽度下,调整html元素设置对应字体大小,配合rem来适配页面显示, UI库中设置了在375px宽度时,html元素字体大小为100px,其它宽度范围时进行计算转换对应值

显示宽度(单位px) html字体大小(单位px)
0~320 320*100/375 = 85.33333
320~350 320*100/375 = 85.33333
350~375 350*100/375 = 93.33333
375~384 375*100/375 = 100
384~400 384*100/375 = 102.4
400~414 400*100/375 = 106.66667
411~450 414*100/375 = 110.4
450~480 450*100/375 = 120
480~520 480*100/375 = 128
520~640 520*100/375 = 138.66667
640~ 640*100/375 = 170.66667

整体内容尺寸大小调整

可在html元素上,添加size="sm|lg|xl",一共有sm、lg、xl三个可选值,则界面内容尺寸整体在默认尺寸上缩小1.1,放大1.1和放大1.1*1.1=1.21倍, 注意此种方式调整,可能导致部分样式异常,慎用此功能。

自定义适配

在html元素上加上class 'ipu-non-query',则UI库定义的媒体查询适配代码将失效,此时html字体大小默认是320宽度时对应大小,开发人员可再行定义媒体查询适配代码

文档结构

UI库对html文档结构设置有一定要求,否则可能导致样式不正常

html抬头为h5

<!DOCTYPE html>

viewport设置

<meta name="viewport" content="width=device-width, initial-scale=1,minimum-scale=1, maximum-scale=1">

完整html文档参考

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>卡片</title>
  <meta name="viewport" content="width=device-width, initial-scale=1,minimum-scale=1, maximum-scale=1">

  <link rel="stylesheet" type="text/css" href="../../../dist/css/ipuUI.css">
  <link rel="stylesheet" type="text/css" href="../../biz/css/mdi/css/mdi.css">
  <link rel="stylesheet" type="text/css" href="../../biz/css/demo.css">
</head>
<body>
<div class="ipu-flex-row ipu-flex-vertical">
  <div class="ipu-flex-col">
    <header class="ipu-toolbar">
      <a class="ipu-fn-left" href="javascript:history.back(-1);">
        <i class="ipu-icon mdi mdi-chevron-left"></i>
      </a>
      <h1 class="ipu-toolbar-title">卡片</h1>
    </header>
  </div>

  <div class="ipu-flex-col ipu-flex-col-auto">
    <div class="page-content">
        页面内容区...
    </div>
  </div>
</div>
</body>
</html>

其它

  • UI库定义的class都是以‘ipu-’为前缀,覆写此类class定义的样式要注意,以免影响UI组件正常工作
  • 所有js组件都是通过 ipuUI 对象初始化,一次只能初始化一个组件(若组件初始化参数匹配到多个元素, 会选择第一个元素进行组件初始化),若要初始化多个组件,需要分别进行初始化
  • 部分组件有一定html结构要求,有‘ipu-’开头class的元素不能轻易变动结构,若ul元素有‘ipu-’ 开头的class,则对应子元素li虽然没有‘ipu-’开头class,但li仍属于必须的结构,不能变动

Copyright © aiipu.com 2017 all right reserved,powered by Gitbook该文件修订时间: 2020-09-02 11:36:10

results matching ""

    No results matching ""