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仍属于必须的结构，不能变动

UI简介