# mt-mobile-vue

**Repository Path**: aitter/mt-mobile-vue

## Basic Information

- **Project Name**: mt-mobile-vue
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2017-03-23
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

=============== README =================
mt-mobile-vue
每天健康移动端VueJS版
========================================

## Build Setup

``` bash
# 安装依赖
npm install

# 在 localhost:8080 启动开发环境
npm run dev

# 构建生产版本
npm run build --report
```

## 主要依赖

- Vue2.x
- axios( 去掉Vue-resource，方便定制，官方推荐 )
- Vuex-router-sync（同步路由状态至 vuex  的 state中）
- [Vuex](https://vuex.vuejs.org/zh-cn/)
- [Vue-router](https://router.vuejs.org/zh-cn/)
- [flexible.js](https://github.com/amfe/lib-flexible)
- [px2rem-postcss](https://github.com/songsiqi/px2rem-postcss)

## Vue2.x 移动端框架设计

1. 接口数据Mock与代理（mock.js、模拟数据管理、有代理使用代理、没代理使用本地mock数据） X
2. API管理（vue-resource、token、请求响应拦截）X
3. 公共JS资源（utils、filters、validator、auth、store） X
4. 组件（公共UI组件、页面公共组件、页面私有组件）
5. 应用状态（Vuex、模块划分、types管理）X
6. 页面模块（模块划分）X
7. 路由管理（站点信息处理、嵌套、同步和异步路由加载、用户权限验证）X
8. CSS模块（模块划分）X
9. 图片与Icon（图片资源加载，svg处理）X
10. 高清适配与屏幕适配（根据dpr缩放内容、根据rem缩放布局、不兼容的转化 px*2->rem ）X
11. 微信JSSDK签名认证（使用location.href或完整路径来防止微信签名失败）

其它
1. 并发请求的处理方式（Promise.all/axios.all）
2. 路由跳转的几种方式（页面处理、store处理）
....


## 静态资源目录 /static

放置不需要 webpack 打包的资源


## 命名规则

### 数据接口层：src/api
- 管理项目中所有的接口
- 在 `src/api/index.js` 中添加接口
- 模块名：模块+Api结尾，例：userApi: { getUser(), login(), logout() }

### 组件层：src/components
- 分为公共组件 与 业务组件
- 公共组件不加前缀，例：modal、toast
- 业务组件加 `mt-` 前缀，例：mt-header、mt-footer

### 状态管理层：src/store
- 管理应用中的状态，例：站点信息、登录信息、微信认证状态、页面loading、toast、modal等
- 按业务模块划分，每个模块下分为 `actions.js`、`getters.js`、`mutations.js`、`index.js`
- action的名称在 `src/store/types.js` 中统一管理

### 视图层：src/views
- 按业务模块划分页面：模块 > 页面
- 独立业务页面或不能归类的页面，放到 `src/views/common` 下
- 页面查询 `src/views/pages`
- [特殊模块]组件demo `src/views/demo`

### 主题管理：src/config.js
- 配置项 `color` 用于配置主题颜色
- 配置项 `style` 用于生成与主题颜色相关的颜色


关于主题定制，想了很多种方法，
最开始想的是为每一套主题写一份样式，要的主题名称来使用不同的样式，但是缺点是，多份主题css同时加载，一方面是浪费流量，另外站点数量太多，主题文件会越来越大

后来想过通过 less 变量编译不同的主题样式，页面上根据获取到的主题名称加载不同的主题，但同样工作量巨大，每个医院都可能不同，主题太多，并且站点信息是异步获得，再根据站点信息中的主题名去加载样式文件，会造成页面重绘闪屏，接口和后台配置也需要改造

第三种方法很接近现的方法，将主色调写入组件的属性上，也就是嵌入到标签，其它不能通过JS控制的样式，根据主题颜色配置生成 style 标签插入到页面来控制诸如 伪元素 :after :before :active disabled 等有颜色的样式，但缺点是，主色调写入组件后，权重太高，如 a 标签，直接在标签上设置背景色，会导致它的 :active disabled 样式失效，因为嵌入的样式权重最高，并且每个组件中添加样式配置也并不可取，对组件有侵入性

最后一种相对可行的方法，将有颜色或有颜色变化的样式类分离出来，根据主色调重新生成新的主题样式插入到页面的head中，这样即可以兼容老的接口，又能满足任意站点的主题配置，简单灵活，最大程度上减少了样式冗余

通过 `Color.js` 可以方便的定制基于主色调的深色或浅色，可用于强调或禁用色，对于同色系有了更灵活的控制。



## 小的注意点

### title切换
微信中 IOS端SPA页面的title切换
http://www.xuanfengge.com/wx-spa-change-title.html

### 微信认证管理
注意！！！微信JSSDK签名验证，IOS地址获取错误

### 横竖屏提示
http://www.xuanfengge.com/wx-spa-change-title.html

### 禁止页面拖动
自定义滚动行为

### 路由管理
根据具体的业务来区分是否需要浏览器记住历史，使用history的api来操作 `replace`/`push`...

## 第三方插件

vue-infinite-scroll

vue-animated-list

vue-touch

vue-progressbar

vue-swipe

vue-lazyload

vue-awesome-swiper

下拉刷新，上拉加载⭐️⭐️⭐️
https://github.com/wangdahoo/vue-scroller
https://wangdahoo.github.io/vue-scroller/#/refreshAndInfinite

下拉刷新
https://github.com/lakb248/vue-pull-refresh

vue-spinner 加载动画
https://github.com/greyby/vue-spinner
https://github.com/hilongjw/vue-progressbar

几分钟前
https://github.com/egoist/vue-timeago

无限加载
https://github.com/PeachScript/vue-infinite-loading

列表动画
https://github.com/xiaoluoboding/vue-stroll

阅读进度指示器 vuejs-content-scroll-progress
https://github.com/shershen08/vuejs-content-scroll-progress

相册
https://github.com/ElemeFE/vue-swipe
https://github.com/surmon-china/vue-awesome-swiper
https://github.com/weilao/vue-swiper

视差滚动
https://github.com/apertureless/vue-parallax



PC
多选
http://monterail.github.io/vue-multiselect/

日历 全屏
https://github.com/Wanderxx/vue-fullcalendar

表单验证
http://simple-vue-validator.maijin.info/