node package manager
Orgs are free. Discover, share, and reuse code in your team. Create a free org »

freed-multi

freed-multi

react + mobx + ant-design-mobile

注意事项

  1. 页面入口为entry.js,规则: /src/pages/{页面名字}/entry.js
  2. 统一使用flex布局。尽量少用float
  3. svg图片放在src/svg-folder(icon图标)
  4. 边框1px统一使用 ~freed-multi/lib/style/border-1px.scss
  5. 字体不能小于24px(设计图750)
  6. 代码书写规范 Airbnb
  7. 提交前执行eslint npm run lint
  8. import顺序 react > ant-mobile > mobx > 第三方库 > freed-multi > components > scss > svg
  9. html rootdiv height为100% 如需滑动内部处理,不使用webview自带滑动
  10. 需要添加configPage.json文件在 src/ 下,用于原生读取落地页 {"list": "list/index.html"}

components

  • NavBar
    import { NavBar, NavBarContentLayout, setTitle } from 'freed-multi';
    
    <NavBar
        title="test" // 此处可传title
    />
    <NavBarContentLayout>
        // you code
    </NavBarContentLayout>
    
    import { setTitle } from 'freed-multi';
    setTtile('首页');
参数 说明 类型 是否必须 可选值 默认值
title 页面标题 string ''
leftButtonTitle 左侧按钮文字 string <
leftButtonClick 返回按钮点击前回调 function ()=>{}
leftDisable 返回按钮禁用状态 boolean false
helpClick 帮助按钮点击,不传则不显示 function
showClose 关闭按钮是否显示 boolean false
rightButton 右侧按钮数组 object

rightButton

属性 说明 类型 是否必须 可选值 默认值
icon icon图标或文字 icon图标 import SVG 和ant icon组件使用方法一致 string
antType ant提供的icon 传入type string
click 点击函数 function ()=>{}
disable 是否禁用 boolean false
sup 显示icon右上角数字 number
key 用于修改, 根据key更改button string
  • SearchNavBar
    import { SearchNavBar, SearchBarContentLayout } from 'freed-multi';
    
    <SearchNavBar
        defaultValue="test"
    />
    <SearchBarContentLayout>
        // you code
    </SearchBarContentLayout>
参数 说明 类型 是否必须 可选值 默认值
defaultValue 默认显示搜索值 string ''
placeholder placeholder string ''
onSubmit 点击搜索 function ()=>{}
onClear 点击清除 function ()=>{}
onFocus 获取焦点 function ()=>{}
onBlur 失去焦点 function ()=>{}
isChangeDefaultValue 是否需要重新传入defaultValue 改变当前值 boolean false
  • Boxer
  import { Boxer } from 'freed-multi';
  
  <Boxer
      title="test"
  >
        // you code
  </Boxer>
  • FixedLayout
   import { FixedLayout } from 'freed-multi';
   
   <FixedLayout 
        content={<div>test</div>}
        fixer={<div>底部定位容器</div>}
   />
参数 说明 类型 是否必须 可选值 默认值
content 内容区域 react node ''
fixer 定位区域 react node ''
  • ListView
   import { ListView, activeRefresh } from 'freed-multi';
   
   componentDidMount() {
       // 设置listview高度...
       const listView = window.document.getElementById('test-list');

       listView.style.height = {计算出页面剩余高度};
   }
   
   getMoreData() {
       return new Promise((resolve) => {
           http.get('ttttt').then(res => {
               resolve({
                   data: {需要渲染的数据, Array}
                   hasMore: {是否还有更多数据,boolean}
               });
           })
       })
   }
   
   renderItem(rowData) {
       return (
           <div key={rowData.id}>{rowData.text}</div>
       )
   }
   
   <ListView 
       id="test-list"
       renderItemFunc={this.renderItem}
       getMoreDataFunc={this.getMoreData}
       getRefreshDataFunc={this.getRefreshData}
       isLoadMore
       noMoreText="没有更多商品了~"
   />
   
   // 其他点击事件后刷新listview数据
   activeRefresh(() => {
       return new Promise((resolve) => {
           http.get('ttttt').then(res => {
               resolve({
                   data: {需要渲染的数据, Array}
                   hasMore: {是否还有更多数据,boolean}
               });
           })
       })
   });
参数 说明 类型 是否必须 可选值 默认值
id dom节点ID 用于设置高度 string ''
renderItemFunc 渲染列表单个item function
getMoreDataFunc 获取数据函数 function
getRefreshDataFunc 下拉刷新数据 function ()=>{}
isLoadMore 是否启用瀑布流(加载更多) boolean false
isRefresh 是否启用下拉刷新 boolean false
onScroll 列表滚动事件 function ()=>{}
noMoreText 没有更多的时候,底部显示文字 string 抱歉,没有更多商品啦~
  • Tags
   import { Tags, Tag } from 'freed-multi';
   
   <Tags>
       <Tag text="aaaa" onClick={() => {alert('test')}} />
       <Tag text="bbbb" />
   </Tags>
参数 说明 类型 是否必须 可选值 默认值
text 显示文字 string ''
onClick 点击回调 function ()=>{}
  • WhiteAll
   import { WhiteAll } from 'freed-multi';
   
   <WhiteAll>
       // you code
   </WhiteAll>
    import { LazyLoad } from 'freed-multi';
    
    <LazyLoad 
         overflow
    >
        <img src="http://www.aaa.com/a.png">
    </LazyLoad>

native(原生插件)

  • redirect(url, options) 跳转webview

        import { Native } from 'freed-multi';
        
        Native.redirect('deal/index.html', {
             paramsCallBack: (data) => {
                  // data 为回传数据
             }
        });
    
    参数 说明 类型 是否必须 可选值 默认值
    url 绝对路径地址 如: list/index.html String
    options 参数 Object

    options

    属性 说明 类型 是否必须 可选值 默认值
    transition 跳转动画 String right,bottom,none right
    closeSelf 是否关闭当前页 boolean false
    navigationBarHidden 是否隐藏导航栏 boolean true
    paramsCallBack 页面回调,从B页面回来时执行 function
  • goback(data) 返回上一页

        import { Native } from 'freed-multi';
        
        Native.goBack();
    
    参数 说明 类型 是否必须 可选值 默认值
    data 回传给上一个页面数据 any
  • goBackHandle(callback, isIntercept) 监听安卓物理返回键

         import { Native } from 'freed-multi';
         
         Native.goBackHandle(() => {
             if (data !== '') {
                  Native.goBack();
             }
         });
    
    参数 说明 类型 是否必须 可选值 默认值
    callback 点击物理键时触发函数 function
    isIntercept 是否监听 boolean true
  • popPage(isMe) 推出之后的webview

         import { Native } from 'freed-multi';
         
         Native.notification.listen('demo', () => {
              // 主要和监听一起用
              Native.popPage();
         });
    
    参数 说明 类型 是否必须 可选值 默认值
    isMe 是否推出自己 boolean false
  • popAllPage() 推出所有webview 回到原生列表

        import { Native } from 'freed-multi';
        
        Native.popAllPage();
    
  • checkStatus(callback) 检查网络状态

          import { Native } from 'freed-multi';
          
          Native.networkStatus((status) => {
              status ===  0:无网络, 1: Wifi, 2: 3/4G,
          });
    
  • fetchCommonParams(callback) 获取业务参数

         import { Native } from 'freed-multi';
         
         Native.fetchCommonParams((dictionary) => {
             dictionary.userName // 用户名
             dictionary.cityName // 城市名
             dictionary.avatarUrl // 头像链接
             dictionary.ip // 用户ip地址
         });
    
  • handleError(errCode) 处理业务逻辑错误

         import { Native } from 'freed-multi';
         
         Native.handleError('401');
    
    参数 说明 类型 是否必须 可选值 默认值
    errCode 传给原生的错误码 string '401'
  • notification.emit(key, data) notification.listen(key, (data) => {})

         import { Native } from 'freed-multi';
         
         A页面监听 > Native.notification.listen('a', (data) => {
             console.log(data)  // 数据
         });
         
         B页面发出通知 > Native.notification.emit('a', '数据')
    
    参数 说明 类型 是否必须 可选值 默认值
    key 监听key值 string
    data 传输数据 any
  • pay(payType, payInfo, callback) 支付

        import { Native } from 'freed-multi';
        
        Native.pay('alipay', {后端给的支付信息}, (result) => {
        		if (result === 'success') {
        			alert('支付成功');
        		} eles if (result === ''fail){
        			alert('支付失败');
        		}
        })
    
    参数 说明 类型 是否必须 可选值 默认值
    payType 支付类型 string "weixin": "微信支付";"alipay": "支付宝"
    payInfo 支付信息 object
    callback 支付回调 function
  • deepLink(options, success, fail) 跨模块跳转

        import { Native } from 'freed-multi';
        	    
        Native.deepLink(
            {
                moduleID: 101,
                moduleKey: 'index',
                param: {
                    id: 100000,
                    text: 'aaa'
                },
                transition: 'right',
                closeSelf: false
            }
        )
    
    参数 说明 类型 是否必须 可选值 默认值
    moduleID 模块ID number 100: '供应链' 101: '活动页'
    moduleKey 跳转落地页key string
    param 传入参数 object
    transition 跳转动画 string right, bottom right
    closeSelf 是否关闭当前页 boolean false
  • scan(title, callback) 扫一扫

   import { Native } from 'freed-multi';
           	    
   Native.scan(
       '测试扫一扫',
       (data) => {
           // data 成功扫描回调
       }
   )
参数 说明 类型 是否必须 可选值 默认值
title 显示标题 string ''
callback 成功扫描回调 function

style

  • border 1px 处理
    @import '~freed-multi/lib/style/border-1px';
   
    @include border-1px(bottom, #e1e1e1);
  • 手指按下时的背景色
    • 默认#F3F3F5
    @import '~freed-multi/lib/style/activeBgColor';
   
    @include activeBgColor(${可传入颜色});
  • 超出几行 ...显示
    • 默认一行
    @import '~freed-multi/lib/style/ellipsis';
  
    @include ellipsis(${可传入行数});

## utils

  • http
  • LocalStore
  • isMobile
  • util
    • parseQuerystring(object) 转换url参数
    • getQueryString(key, isDecode) 获取url上参数 isDecode->是否转码