%20(2).svg)
项目简介
本项目是基于React和MobX框架构建的移动应用组件库，结合了Ant Design Mobile，可为移动应用开发提供丰富、易用的组件与原生插件，帮助开发者快速搭建移动应用界面并实现相关功能。
项目的主要特性和功能
- 丰富的组件体系：涵盖NavBar、SearchNavBar、Boxer、ListView、Tags等多种实用组件，满足不同场景的界面构建需求。
- 原生插件支持：具备页面跳转、返回、监听物理返回键、检查网络状态、获取业务参数、处理业务逻辑错误、发出通知、支付、跨模块跳转、扫一扫等原生插件功能，便于与原生交互。
- 样式处理工具：提供border 1px处理、手指按下时的背景色处理、超出几行显示省略号等样式处理工具，统一了样式标准。
- 实用工具集：包含http、LocalStore、isMobile和util等实用工具，可用于网络请求、本地存储、设备判断和字符串处理等操作。
安装使用步骤
前提条件
假设用户已下载本项目的源码文件，且已安装Node.js和npm。
安装依赖
在项目根目录下，打开终端执行以下命令安装项目所需依赖：
bash
npm install
开发与使用
- 页面入口：页面入口为
entry.js，规则是/src/pages/{页面名字}/entry.js。 - 组件使用：按文档中的示例代码，在需要的地方引入并使用相应的组件，如： ```jsx import { NavBar, NavBarContentLayout } from 'freed-multi';
3. **原生插件调用**：根据需求引入并调用原生插件的功能，例如跳转webview：javascript
import { Native } from 'freed-multi';
Native.redirect('deal/index.html', {
paramsCallBack: (data) => {
// data 为回传数据
}
});
4. **样式处理**：在需要的地方引入样式处理工具，如处理border 1px：scss
@import '~freed-multi/lib/style/border-1px';
@include border-1px(bottom, #e1e1e1);
5. **代码检查**：提交代码前，执行以下命令进行eslint检查：bash
npm run lint
```
注意事项
- 统一使用flex布局，尽量少用float。
- svg图片放在
src/svg-folder（icon图标）。 - 边框1px统一使用
~freed-multi/lib/style/border-1px.scss。 - 字体不能小于24px（设计图750）。
- import顺序为：react > ant-mobile > mobx > 第三方库 > freed-multi > components > scss > svg。
- html rootdiv height为100%，如需滑动内部处理，不使用webview自带滑动。
- 需要添加
configPage.json文件在src/下，用于原生读取落地页，例如：{"list": "list/index.html"}。
下载地址
点击下载 【提取码: 4003】【解压密码: www.makuang.net】