# freed-multi > hybrid build Latest version **1.5.0** (published 2017-12-05) · ISC license · 0 weekly downloads ## Install ```sh npm install freed-multi pnpm add freed-multi yarn add freed-multi bun add freed-multi ``` ## Health **Score 15/100 (F)** — status: abandoned. Positive: no vulnerabilities. Warnings: low downloads; no types; no esm support. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 1.5.0 | | Published | 2017-12-05 | | First published | 2017-08-12 | | Weekly downloads | 0 | | License | ISC | | TypeScript types | none | | Module format | CommonJS | | Dependencies | 77 | | Known vulnerabilities | 0 (+9 in 3 direct dependencies) | | Install scripts | no | | Author | lihuanji | | Maintainers | lihuanji | ## Links - npm: https://www.npmjs.com/package/freed-multi - npm.io page: https://npm.io/package/freed-multi ## Dependencies (77) - [md5](https://npm.io/package/md5.md) ^2.2.1 - [gulp](https://npm.io/package/gulp.md) ^3.9.1 - [mitt](https://npm.io/package/mitt.md) ^1.1.2 - [mobx](https://npm.io/package/mobx.md) ^3.1.16 - [sass](https://npm.io/package/sass.md) ^1.0.0-beta.1 - [step](https://npm.io/package/step.md) ^1.0.0 - [react](https://npm.io/package/react.md) ^15.6.1 - [eslint](https://npm.io/package/eslint.md) ^4.5.0 - [lodash](https://npm.io/package/lodash.md) ^4.17.4 - [mockjs](https://npm.io/package/mockjs.md) ^1.0.1-beta3 - [moment](https://npm.io/package/moment.md) ^2.18.1 - [bisheng](https://npm.io/package/bisheng.md) ^0.27.1 - [connect](https://npm.io/package/connect.md) ^3.6.2 - [express](https://npm.io/package/express.md) ^4.15.3 - [webpack](https://npm.io/package/webpack.md) ^3.0.0 - [cross-env](https://npm.io/package/cross-env.md) ^5.0.5 - [fastclick](https://npm.io/package/fastclick.md) ^1.0.6 - [gulp-sass](https://npm.io/package/gulp-sass.md) ^3.1.0 - [node-sass](https://npm.io/package/node-sass.md) ^4.5.3 - [react-dom](https://npm.io/package/react-dom.md) ^15.6.1 - [babel-core](https://npm.io/package/babel-core.md) ^6.25.0 - [classnames](https://npm.io/package/classnames.md) ^2.2.5 - [css-loader](https://npm.io/package/css-loader.md) ^0.28.4 - [gulp-babel](https://npm.io/package/gulp-babel.md) ^7.0.0 - [gulp-clean](https://npm.io/package/gulp-clean.md) ^0.3.2 - [mobx-react](https://npm.io/package/mobx-react.md) ^4.2.1 - [pre-commit](https://npm.io/package/pre-commit.md) ^1.2.2 - [prop-types](https://npm.io/package/prop-types.md) ^15.5.10 - [react-intl](https://npm.io/package/react-intl.md) ^2.4.0 - [url-loader](https://npm.io/package/url-loader.md) ^0.5.9 - [antd-mobile](https://npm.io/package/antd-mobile.md) 1.6.7 - [file-loader](https://npm.io/package/file-loader.md) ^0.11.2 - [gulp-concat](https://npm.io/package/gulp-concat.md) ^2.6.1 - [sass-loader](https://npm.io/package/sass-loader.md) ^6.0.6 - [svgo-loader](https://npm.io/package/svgo-loader.md) ^1.2.1 - [babel-eslint](https://npm.io/package/babel-eslint.md) ^7.2.3 - [babel-loader](https://npm.io/package/babel-loader.md) ^7.1.0 - [gulp-postcss](https://npm.io/package/gulp-postcss.md) ^7.0.0 - [qrcode.react](https://npm.io/package/qrcode.react.md) ^0.7.2 - [query-string](https://npm.io/package/query-string.md) ^4.3.4 - [react-router](https://npm.io/package/react-router.md) ^4.1.1 - [style-loader](https://npm.io/package/style-loader.md) ^0.18.2 - [whatwg-fetch](https://npm.io/package/whatwg-fetch.md) ^2.0.3 - [object-assign](https://npm.io/package/object-assign.md) ^4.1.1 - [rc-queue-anim](https://npm.io/package/rc-queue-anim.md) ^1.3.1 - [imports-loader](https://npm.io/package/imports-loader.md) ^0.7.1 - [postcss-loader](https://npm.io/package/postcss-loader.md) ^2.0.6 - [rc-scroll-anim](https://npm.io/package/rc-scroll-anim.md) ^2.0.2 - [react-lazyload](https://npm.io/package/react-lazyload.md) ^2.2.7 - [gulp-minify-css](https://npm.io/package/gulp-minify-css.md) ^1.2.4 - [postcss-pxtorem](https://npm.io/package/postcss-pxtorem.md) ^4.0.1 - [react-router-dom](https://npm.io/package/react-router-dom.md) ^4.1.1 - [svg-sprite-loader](https://npm.io/package/svg-sprite-loader.md) 0.3.x - [babel-preset-react](https://npm.io/package/babel-preset-react.md) ^6.24.1 - [bisheng-plugin-toc](https://npm.io/package/bisheng-plugin-toc.md) ^0.4.4 - [webpack-dev-server](https://npm.io/package/webpack-dev-server.md) ^2.5.0 - [autoprefixer-loader](https://npm.io/package/autoprefixer-loader.md) ^3.2.0 - [babel-plugin-import](https://npm.io/package/babel-plugin-import.md) ^1.2.1 - [babel-preset-es2015](https://npm.io/package/babel-preset-es2015.md) ^6.24.1 - [bisheng-plugin-antd](https://npm.io/package/bisheng-plugin-antd.md) ^0.15.1 - [copy-webpack-plugin](https://npm.io/package/copy-webpack-plugin.md) ^4.0.1 - [eslint-plugin-react](https://npm.io/package/eslint-plugin-react.md) ^7.1.0 - [html-webpack-plugin](https://npm.io/package/html-webpack-plugin.md) ^2.28.0 - [babel-preset-stage-0](https://npm.io/package/babel-preset-stage-0.md) ^6.24.1 - [bisheng-plugin-react](https://npm.io/package/bisheng-plugin-react.md) ^0.5.8 - [eslint-config-airbnb](https://npm.io/package/eslint-config-airbnb.md) ^15.0.2 - [eslint-plugin-import](https://npm.io/package/eslint-plugin-import.md) ^2.7.0 - [react-document-title](https://npm.io/package/react-document-title.md) ^2.0.3 - [eslint-plugin-jsx-a11y](https://npm.io/package/eslint-plugin-jsx-a11y.md) ^6.0.2 - [react-copy-to-clipboard](https://npm.io/package/react-copy-to-clipboard.md) ^5.0.1 - [eslint-config-airbnb-base](https://npm.io/package/eslint-config-airbnb-base.md) ^11.3.2 - [bisheng-plugin-description](https://npm.io/package/bisheng-plugin-description.md) ^0.1.4 - [extract-text-webpack-plugin](https://npm.io/package/extract-text-webpack-plugin.md) ^2.1.2 - [babel-plugin-transform-runtime](https://npm.io/package/babel-plugin-transform-runtime.md) ^6.23.0 - [babel-plugin-add-module-exports](https://npm.io/package/babel-plugin-add-module-exports.md) ^0.2.1 - [react-addons-css-transition-group](https://npm.io/package/react-addons-css-transition-group.md) ^15.6.0 - [babel-plugin-transform-decorators-legacy](https://npm.io/package/babel-plugin-transform-decorators-legacy.md) ^1.3.4 ## Recent versions - 1.5.0 (latest) — 2017-12-05 - 1.4.9 — 2017-11-21 - 1.4.6 — 2017-10-20 - 1.4.5 — 2017-10-20 - 1.4.4 — 2017-10-11 - 1.4.3 — 2017-09-26 - 1.4.2 — 2017-09-20 - 1.4.1 — 2017-09-20 - 1.4.0 — 2017-09-18 - 1.3.9 — 2017-09-18 - 1.3.8 — 2017-09-14 - 1.3.7 — 2017-09-14 - 1.3.6 — 2017-09-12 - 1.3.5 — 2017-08-31 - 1.3.4 — 2017-08-28 - … 32 more at https://npm.io/package/freed-multi/versions ## README # freed-multi *react + mobx + ant-design-mobile* ## 注意事项 1. 页面入口为entry.js,规则: /src/pages/{页面名字}/entry.js 1. 统一使用flex布局。尽量少用float 1. svg图片放在src/svg-folder(icon图标) 1. 边框1px统一使用 ~freed-multi/lib/style/border-1px.scss 1. 字体不能小于24px(设计图750) 1. 代码书写规范 [Airbnb](https://github.com/airbnb/javascript/tree/master/react) 1. 提交前执行eslint npm run lint 1. import顺序 react > ant-mobile > mobx > 第三方库 > freed-multi > components > scss > svg 1. html rootdiv height为100% 如需滑动内部处理，不使用webview自带滑动 1. 需要添加configPage.json文件在 src/ 下，用于原生读取落地页 {"list": "list/index.html"} ## components - NavBar ``` import { NavBar, NavBarContentLayout, setTitle } from 'freed-multi'; // you code 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'; // you code ``` | 参数 | 说明 | 类型 | 是否必须 | 可选值 | 默认值 | |---------------- |----------------|----------|----------|--------------|--------- | defaultValue | 默认显示搜索值 | string | 否 | | '' | | placeholder | placeholder | string | 否 | | '' | | onSubmit | 点击搜索 | function | 否 | | ()=>{} | | onClear | 点击清除 | function | 否 | | ()=>{} | | onFocus | 获取焦点 | function | 否 | | ()=>{} | | onBlur | 失去焦点 | function | 否 | | ()=>{} | | isChangeDefaultValue | 是否需要重新传入defaultValue 改变当前值 | boolean | 否 | | false | - Boxer ``` import { Boxer } from 'freed-multi'; // you code ``` - FixedLayout ``` import { FixedLayout } from 'freed-multi'; test} fixer={
底部定位容器
} /> ``` | 参数 | 说明 | 类型 | 是否必须 | 可选值 | 默认值 | |---------------- |----------------|----------|----------|--------------|--------- | 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 (
{rowData.text}
) } // 其他点击事件后刷新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'; {alert('test')}} /> ``` | 参数 | 说明 | 类型 | 是否必须 | 可选值 | 默认值 | |---------------- |----------------|----------|----------|--------------|--------- | text | 显示文字 | string | 否 | | '' | | onClick | 点击回调 | function | 否 | | ()=>{} | - WhiteAll ``` import { WhiteAll } from 'freed-multi'; // you code ``` - LazyLoad 基于[react-lazyload](https://github.com/jasonslyvia/react-lazyload)封装，支持传入该组件props ``` import { LazyLoad } from 'freed-multi'; ``` ## 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->是否转码 --- _Source: https://npm.io/package/freed-multi · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._