phoenix-ui是基于React框架实现的移动端UI组件库。
$ npm install phoenix-ui --save
在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>
从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> ); }
<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> ); }
更详细的内容可参考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结构,还有能够全局应用的类:具体查看说明。
Github: https://github.com/future-team/swan-ui
Github: https://github.com/future-team/eagle-ui
使用中遇到问题请提交issue: Phoenix-ui Issues
For 点评的小伙伴, 可大象 @chenaibing 或 @min.xiao