Phoenix-ui

Version 2.0.0

基于React框架实现的移动端UI组件库

phoenix-ui是基于React框架实现的移动端UI组件库。

安装

  
$ npm install phoenix-ui --save

特别注意

针对dpr的屏幕兼容

在html文件的head元素中引入gfs-viewport.js文件，兼容不同手机不同dpr带来的适配问题。

<script src="https://www.dpfile.com/app/gfs-viewport/gfs-viewport.js"></script>

或直接放置代码：

<script>
    (function(baseFontSize,fontscale){var _baseFontSize=baseFontSize||100;var _fontscale=fontscale||1;var win=window;var doc=win.document;var ua=navigator.userAgent;var matches=ua.match(/Android[\S\s]+AppleWebkit\/(\d{3})/i);var UCversion=ua.match(/U3\/((\d+|\.){5,})/i);var isUCHd=UCversion&&parseInt(UCversion[1].split(".").join(""),10)>=80;var isIos=navigator.appVersion.match(/(iphone|ipad|ipod)/gi);var dpr=win.devicePixelRatio||1;if(!isIos&&!(matches&&matches[1]>534)&&!isUCHd){dpr=1}var scale=1/dpr;var metaEl=doc.querySelector('meta[name="viewport"]');if(!metaEl){metaEl=doc.createElement("meta");metaEl.setAttribute("name","viewport");doc.head.appendChild(metaEl)}metaEl.setAttribute("content","width=device-width,user-scalable=no,initial-scale="+scale+",maximum-scale="+scale+",minimum-scale="+scale);doc.documentElement.style.fontSize=_baseFontSize/2*dpr*_fontscale+"px"})();
</script>

使用

CommonJS & ES6

从2.0版本开始，建议都使用以下方式引入，可减少冗余代码的打包。

// CommonJS
var Button = require('phoenix-ui/lib/button')
// ES6
import Button from 'phoenix-ui/lib/button'
...
render: function() {
    return (
        <div>
            <Button phStyle="info" phSize="lg" active>按钮</Button>
        </div>
    );
}

Browser globals

<script src="http://future-team.github.io/phoenix-ui/dist/phoenix-ui.min.js"></script>
...
render: function() {
    return (
        <div>
            <Phoenix.Button phStyle="info" phSize="lg" active>按钮</Phoenix.Button>
        </div>
    );
}

兼容性

Android 4.4.2+
IOS 8+
Chrome

Version 2.0.0 重大修改

去掉TableView和FormGroup，新增List，有需要form元素的可自行在外层加上。
去掉LoadingList组件，新增PullUp，简化API，修复滑动触发的BUG。
去掉Whisper组件，修改Popover的使用方式和位置计算，优化位置显示。
Input拆分成Input、Checkbox、Radio。Input新增phIcon、clear、visible等属性；不再需要外部onChange的使用方式，通过getValueCallback获取当前Input的值。
新增SearchBar组件。
新增Image组件，可定义图片在区域内的大小、位置和是否懒加载。
Label组件使用方式改变，为统一规范用iconfont来替代。
ph-filter合并到phoenix-ui中，可以通过import PhFilter from 'phoenix-ui/lib/ph-filter'引入使用，新增和修改部分API。
多组件丰富API，具体参考文档。
所有的回调函数更名，如clickCallback（事件+Callback）的命名标准（除了表单元素仍然使用的是react标准的onChange）。
样式规范化。

更详细的内容可参考wiki: Phoenix2.0升级说明

之后每次更新会记录在该wiki中，根据版本详细记录每次更新：Phoenix2升级记录

旧项目升级步骤

详细内容查看wiki: 旧项目升级phoenix2步骤

组件拓展

组件继承

    import Button from 'phoenix-ui/lib/button'

    export default class MyButton extends Button{
        ...
        // 方法覆盖
        renderIcon(){
            return null
        }

        render(){
            return (
                <div className='my-button'>
                    ...
                    // 方法调用
                    {this.renderButton()}
                </div>
            )
        }
    }

高阶组件

    import {Component} from 'react'
    import Button from 'phoenix-ui/lib/button'

    function enhance(WrappedComponent){
        return class extends Component{
            ...

            render(){
                return 
            }
        }
    }

    const MyButton = enhance(Button)

    export default MyButton

样式

关于换肤

phoenix-ui默认和phoenix-styles (组件样式库)配合使用。

如果要换成ios主题的皮肤，在打包之后的css文件后再引入ios-skin.min.css：

...
<link rel="stylesheet" href="http://future-team.github.io/phoenix-styles/dist/ios-skin.min.css" />

关于布局

强烈建议使用rem布局，gfs-viewport会根据当前的dpr进行基础文字(html font-size)大小的切换，使用rem会根据该基础字体布局。
一般设计给出的是750宽的基于iphone6的UED，在当前尺寸基础下除以100，就是得到的rem值。
如：88px -> .88rem

具体布局说明查看：phoenix2布局说明

其他

样式提供了对应的dom结构，还有能够全局应用的类：具体查看说明。

模块/类