uniapp多端项目架构

[mominger]

项目架构图

基于uni-app框架 vue 语法进行研发
不支持vue-router axios。因此封装了对应的路由拦截、请求处理。 本项目当前需支持小程序、H5(WeLink);将来需兼容App(iPad) 下面针对架构的各层进行阐述；最后附带研发工具的说明

1. YApi

待后台提供接口详细设计后，我会统一培训YApi的使用 利用YApi 前后解耦，用mock模拟接口响应数据，以及类Postman 接口调试

2. Network请求和Service处理

• 2.1
• 2.2 view端代码
• 

  具体参考pages/user/login.vue

• 2.3 user模块端代码
• 

  具体参考 apis/user.js

• 2.4 http.js代码

  具体参考 apis/base/http.js resource下的各后台映射类 http.js 是底层请求库，如需修改请先联系我

3. Utils

• common 包下 utils放公共方法，也可以自建js
• 配置文件统一放在 config下。index.config.js 支持开发、生产两种配置。assets.config.js这是静态资源配置文件，对应到static包
• vue.config.js 配置插件

4. 页面容器

• 4.1 组件都放在components目录。atomComponents目录下是原子组件。其他是公共组件。具体的页面组件在pages目录下
• 4.2 Router
  
  • 4.2.1 代码示例
    

    代码在 pages/login.vue
    

• 4.3 Vuex 状态管理
  

  具体在view里请采用 mapMutations、mapGetters、mapActions 引入

5.UI组件库

• 目前未引入UI库，组件方面有参考uni-ui

6.编译打包

• uni-app 会将源码编译成多端代码
• 

7,日志记录

• 利用Vue.config.errorHandler 统一捕获错误信息，提交到sentry平台
• App 的 onError将错误信息也抛给 Vue异常处理
• 注意： Promise 下，try...catch后，都需主动将错误抛给Vue异常处理

  具体源码参考 common/errorLog.js,App.vue下的 onError

8.HBuildX

• 基于 HBuildx对 uni-app 语法的最佳支持，和打包的便利，最终还是决定采用 HBuildx。
• 打包编译
• 
• 控制台说明
• 
• 集成git使用 window git mac git

  建议用 ssh key 免密登录

• 官网

---

反馈与建议

• 谭文斌 智慧教育业务中心
• 微信:
• 邮箱: tanwenbin@talkweb.com.cn