更新记录

1.0.0（2021-06-10）

初始化项目

平台兼容性

f-uni-app

一套兼容多端（APP、小程序、H5）的uniapp开发架构，里面集成了基础架构内容，集成 uview框架、uni-simple-router路由管理、scss基础样式库、vuex模块化、layout组件、全局js工具函数、scss变量和主题 config全局配置等一系列基础内容，直接上手业务开发，不需要或尽量少的考虑架构的设计。

运行项目

先安装依赖，再启动
npm install

uview组件库

f-uni-app采用uview作为基础组件库，尽管uview仍有一些问题需要解决，但不可否认uview的优秀和全面，架构里已经做好了全局使用uview组件的工作， 开发的时候只需要在页面中直接使用uview组件即可

uview文档

uni-simple-router路由管理

uniapp中的路由管理并不友好，f-uni-app采用uni-simple-router插件作为路由管理工具，该工具保持了vue-router的使用风格，对从事vue开发的程序员相当友好， 我在项目里，除了对uni-simple-router进行基础的导入外，还额外做了一些功能上的调整：

1、app无后退页面时双击退出，可以在router.js对这段逻辑进行修改，参考APP退出

2、router对象可以配置desc、meta字段，可以在pages.json中查看配置，这在路由鉴权时可能会用到

3、在main.js中引入 组件，文档参考 组件式导航

其他用法请参考：uni-simple-router文档

基础样式库

f-uni-app内置了css的基础样式库，对常用的css进行抽离，由于文档过长，样式库文档单独放到项目根目录的STYLE.md文件中

vuex模块化

f-uniapp已经启用了vuex，你可以在store编写自己的vuex代码，其中modules/ui.js为架构中的vuex模块，请不要修改这里的代码，否则会导致 f-layout组件和全局工具类部分功能的报错。

复杂项目推荐使用vuex的命名空间模块化，具体用法可以参考vuex官方文档 vuex模块化

自定义全局组件

f-layout 页面基础组件

props

event

slot

其他说明

f-layout是页面的基础组件，该组件处理了手机状态栏的高度，内置了自定义navbar、toast、modal、loading等组件

所有页面必须在该组件下编写代码

scss变量与主题

f-uni-app保留了uni.scss文件，另外在文件中新增了几个scss变量，你可以自由更改，但是不要删除，因为架构中已经有地方用到该变量了

$theme-color: '#007aff'; /* 程序主题色 */
$reverse-color: '#007aff'; /* 程序主题反色 */

对于uview组件的主题修改，可以参考uview官方说明： uview自定义主题

项目配置（全局静态变量）

通过 this.$config 读取项目配置的变量，非页面上获取配置，可以通过import 导入config

文件夹对应 config/index.js

比如你的app标题，可能在页面中很多地方需要显示，如果在写代码时全部写死在页面，那当有改动的时候，可能需要改动很多文件，因此，将这些公用的静态的变量抽成配置会是比较好的方法。

同时，主题颜色的配置也存在与config中，如果修改主题颜色，不仅 uni.scss文件中的scss变量要改，config中的js变量也要修改（这是因为使用组件时，也可能需要获取主题颜色变量）

全局js工具类

工具类在 plugins/tools.js 中，使用vue插件的方式进行全局挂载，其中一部分工具类取之uview，另外一部分则是和组件相关，请注意阅读文档

$toast

显示页面toast，页面使用 f-layout 组件时可用，toast使用的是uview的toast组件，函数的参数对应组件属性的说明

uview Toast组件

// toast支持两种参数传递方式

// 1、多参数
$toast = function(title = "",type="default",duration,position,url,icon) {

}

// 2、单参数
$toast = function(config) {
    // config = {
    //  title = "",type="default",duration,position,url,icon
    //}
}

$loading

是否显示页面loading，页面使用 f-layout 组件时可用，loading使用的是f-loading组件，可以修改f-loading已达到项目设计要求

$loading = function(isShow = true) {

}

this.$loading(); // 显示loading
this.$loading(false); // 关闭loading

$modal

显示页面弹窗，显示页面toast，页面使用 f-layout 组件时可用，modal使用的是uview的modal组件， 调用$modal函数主要是简单统一的弹窗，如果有其他需求，建议在页面中使用u-model实现或另外封装

参数含义对应u-model组件的props，其中type是我自己新增的， type只决定确认按钮的文字颜色，可选参数为：primary、error、success、info、warning，对应uview中的主题色

你可以设置 confirmText = false 来取消确认按钮

uview modal组件

// modal支持两种参数传递方式

// 1、多参数
$modal = function(content, title, type, cancelText, confirmText) {

}

// 2、单参数
$modal = function(config) {
    // config = {
    //  content, title, type, cancelText, confirmText
    //}
}

继承uview的工具函数

Vue.prototype.$throttle = Vue.prototype.$u.throttle; /* 防抖*/
Vue.prototype.$debounce = Vue.prototype.$u.debounce; /* 节流*/
Vue.prototype.$deepClone = Vue.prototype.$u.deepClone; /* 深度拷贝*/
Vue.prototype.$deepMerge = Vue.prototype.$u.deepMerge; /* 深度合并*/
Vue.prototype.$timeFormat = Vue.prototype.$u.timeFormat; /* 时间格式化*/
Vue.prototype.$queryParams = Vue.prototype.$u.queryParams; /* 对象转URL参数 */
Vue.prototype.$test = Vue.prototype.$u.test; /* 规则校验 */
Vue.prototype.$md5 = md5Libs.md5; /* md5加密 */
Vue.prototype.$random = md5Libs.random; /* 随机数值 */
Vue.prototype.$getRect = md5Libs.getRect; /* 节点布局信息 */

$u中比较常用的函数进行全局挂载，比较方便调用： 其他没有处理的函数，仍可以使用 this.$u.xxx 进行调用

this.$test() // 不需要再 this.$u.test()

请求接口

uview提供了一套请求拦截的方式，可以参考使用： uview 请求