11实战1项目初始化及架构目录

JAY.LIN 收录于 Uniapp从入门到进阶

2025-01-04 约 3568 字预计阅读 8 分钟

https://bing.ee123.net/img/rand?artid=1741706039

项目初始化及架构目录

不知道你是否会有这样的感觉，每次学习一门语言时，最焦虑的莫过于如何开始，如何初始化一个简单的项目。

本章主要讲解项目环境的基础配置和使用工具，在此基础上分析工程代码目录结构，延展讲解完成项目开发的准备工作。

项目准备

一，项目初始阶段

一个项目的开始，会有业务需求，就是为什么要有这个项目，这个项目要实现什么目的，解决什么问题（这些是项目发起人，产品定位者思考的）；
项目发起后，产品经理会根据项目特点，市场分析，竞品分析，目标人群等给出项目的实际蓝图（原型），就是互联网产品的定型，项目的雏形；
根据原型，UI 完成对原型的扩展，用户的操作习惯，视觉感官，画面感等进行进一步的完善，也就是我们所说的设计稿，前后端人员准备技术选型，语言，框架，或者是数据库的选择。只有适合团队的架构才能更好的打磨一个项目；
技术选型完，前后端之间会讨论数据交互的问题，当前基本都是前后分离的架构，讨论更多的是基于 HTTP 协议的接口，约定数据结构，然后同时开发，按照项目进度进行联调，提测，交付，不断的循环这套流程，已达成一个个"里程碑"；

二，项目开发阶段

前端人员在在需求评审，协商接口文档后，就可以开始搭建项目工程了（不要马上 coding，我们应该是对项目的 PRD 做分析，细化抽离，这块我在之后会详细探讨）；
前端拿到接口文档，并不是直接对接开发，而是模拟准备数据，很多情况下后端人员只是约束了 api 类型，方法等，并没有实际部署，所以需要自己模拟接口，在这里我们使用了某易云音乐的 api，这样也更接近实际的项目开发，让学习者有更直观的感受；
模拟接口完成必要的交互才会有实际性的联调，如果感兴趣的小伙伴可以选择简单的 easyMock，当然还有其他一些工具 swagger 等，根据团队情况而定，完成数据模拟。

三，项目框架的选型

框架选型是项目打造与项目定位的一部分，产品需要 app，h5，小程序来扩大市场，但是要基于团队的情况，衡量开发成本，开发时间，兼顾各个问题，兼顾各个端；
市面上有很多大团队贡献的框架或库，但是如果项目有大量定制化的功能，那么这个框架或库可能比不是你想要的，如果你要简易多端走，那么这就是你的菜；
以下是一些可以帮助您更好地比较这些框架的问题：
- 是否足以构建可扩展的应用程序，解决项目需求？
- 是否很容易为每个框架找到开发人员？
- 是否有持续的维护和反馈？
- 是否有稳定的社区？
- 是否了解框架的性能，速度和学习曲线？
在以往的经历中，我分别使用过小程序原生，mpvue，taro 和 Uniapp 来开发，即使不跨端，Uniapp 也能给我更好的开发体验，毕竟原生小程序开发并没有那么友好。

实战从 0 到 1

https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c3e1294b78474e2596db986c3d7f7063~tplv-k3u1fbpfcp-zoom-1.image — 最终的应用首页

从这节开始主要会围绕几个页面来分析讲解实战开发的内容，通过实际的开发来引用 Uniapp 框架的组件，api 等，这样能充分深入了解 Uniapp 框架，也可以了解如何搭建一个项目。如果你想更好把控框架与前端项目架构，那就往下看吧。

以上图为例，一开始就要确定好 tabbar 底部导航对应的几个入口页面，再把页面分成轮播图，分类，推荐歌单等模块，对于通用的模块功能可以封装成自定义组件。

开始我们新建一个 Uniapp 项目，【选择新建项目】 » 【uni-app】 » 【默认模板】 » 【创建】；（关于如何新建项目可以查看基础一的解说介绍）

Uniapp 延伸扩展了小程序中的导航条、选项卡，通过配置文件生成，配置后由原生组件进行渲染， Uniapp 在 H5 中同样兼容这些配置，不过会降级通过 div 的标签组件实现，因此开发者无需单独为 H5 平台添加导航条或选项卡，从而实现一次开发，跨端运行。

目录结构介绍

新建项目后，项目目录手动调整为（目录结构为大多数团队开发基本约定）：

|-- apis                             // 所有接口模块
|     └─ account.js
|-- common                           // 公用目录(包含全局样式，全局js等)
|     └─ css
|         └─ common.scss
|     └─ js
|         └─ util.js
|-- components                       // 公用组件目录
|     └─ a.vue                       // 公用的a组件
|-- pages                            // 业务页面文件存放目录 以入口进行文件夹分类
|     └─ index                       // index页面主体文件夹
|     |    └─ index.vue              // 页面
|     └─ account                     // account页面主体文件夹
|     |    └─ account.vue            // 页面
|     └─ subpages                    // 业务页面 分包
|          └─ acount
|               └─ acount.vue
|-- static                           // 存放应用引用静态资源（如图片、视频等）的地方，注意：静态资源只能存放于此
|     └─ image                       
|-- store                            // 状态管理
|     └─ index.js 
|-- untils                           // 管理工具
|     └─ request                     // 请求封装
|-- main.js                          // 初始化入口文件
|-- App.vue                          // 应用配置，用来配置App全局样式以及监听
|-- manifest.json                    // 配置应用名称、appid、logo、版本等打包信息
|-- pages.json                       // 配置页面路由、导航条、选项卡等页面类信息

上面的配置文件是固定，不建议随意修改，可能会引起未知编译问题，Uniapp 在处理文件的时候做了规范处理，所谓入乡随俗，使用它的框架就需要遵循它的使用规范。

这边要特别说明一点，由于小程序有分包机制优化，因此我们的 pages 是以分包来对页面进行分块的，以主页面的五个入口，分包的形式来管理页面。上面是 Uniapp 项目的基础目录使用，当然每个人可以根据习惯爱好，自定义一个目录。更重要的是遵循一定的规范，这有助于更好的协同开发。

下面讲解目录的核心内容。

加入公用文件

跟平常 h5 项目引入 reset.css 文件对页面样式重置处理一样，在项目开始引入通用的样式文件可以提前对文件全局处理。App.vue 是路由页主入口，在这定义的样式会在所有的组件生效，可以在 <style> 标签定义全局通用样式。为了更好管理全局样式，这里抽离为 common.scss 文件，并把编译语言设为 scss:

        
<!-- App.vue -->
<style lang="scss">
    @import './common/css/common.scss';
</style>

此处的 page 相当于 body 节点，例如：

        
        
        
    
<!-- common.scss -->
page {
  background-color:#ccc;
}
view{   // 以盒模型显示
  box-sizing:border-box;
}

注：在 Uniapp 中不能使用 * 选择器。

下一步引入公共方法库 utils.js ，要把公共方法给其他文件引用，要把这些文件暴露出去，通过 export default 暴露一个对象，然后引用文件再 import 该文件进来（有 export 才可 import），后续添加的方法加入 PubFuc 对象即可：

        
        
        
    
/* common/js/utils.js */
const PubFuc = {
    // 格式化时间戳
    formatTime: (value) => {
        var value = String(value);
        function t (v) {
            return v = v < 10 ? ("0" + v) : v;
        }
        String.prototype.ToString = function (value) {
            var date = new Date(parseInt(this.substring(6, this.length - 2)));
            value = value.replace("yyyy", date.getFullYear());
            value = value.replace("yy", t(date.getFullYear().toString().substr(2)));
            value = value.replace("MM", t(date.getMonth() + 1));
            value = value.replace("dd", t(date.getDate()));
            value = value.replace("hh", t(date.getHours()));
            value = value.replace("mm", t(date.getMinutes()));
            value = value.replace("ss", t(date.getSeconds()));
            value = value.replace("ms", date.getMilliseconds())
            return value;
        };
        return value.ToString("yyyy-MM-dd  hh:mm:ss");
    }
}

export default PubFuc

在讲解公共模块的使用时，有一种挂载 Vue.prototype 方式适合我们去使用，我们只需在主入口 main.js 引入并挂在到 Vue 对象上：

        
        
        
    
/* main.js */
import Vue from 'vue'
import App from './App'

Vue.config.productionTip = false
// 公共js
import PubFuc from'./common/js/util.js'
Vue.prototype.$pubFuc = PubFuc

App.mpType = 'app'
const app = new Vue({
    ...App
})
app.$mount()

调用方式，例如：

        
this.$pubFuc.formatTime()

使用 rpx、scss 开发

在前面基础章节讲解过样式单位处理，Uniapp 默认为 rpx 。这是一种作为 Uniapp 可跨端的通用单位。为了多端的显示效果一致，我们也选用 rpx 单位作为该项目的像素处理单位。

        
<style lang="scss">
   view {
       font-size: 30rpx;
   }
</style>

图标、图片处理

图标统一使用 iconfont 图标作为整站的图标。
图片放入到 static 文件夹中统一管理。

开发环境和生产环境、request 请求

Uniapp 可通过 process.env.NODE_ENV 判断当前环境是开发环境还是生产环境。一般用于连接测试服务器或生产服务器的动态切换。

        
if (process.env.NODE_ENV === 'development') {
    console.log('开发环境')
} else {
    console.log('生产环境')
}

Uniapp 提供的 uni.request() 不能有效的管理请求与响应状态等信息，因此我们在项目使用中需要进行二次封装，可以更好的管理请求与响应。这一块的封装放在了 untils/request 中，而业务的请求 api 接口列表则存放在了文件夹 apis 中，下面的文件以入口模块命名：

        
|-- apis     // 存放所有接口
     └─ account.js
     └─ cloud.js
     └─ index.js

我们在封装的 request 中里面还包含了请求拦截，响应拦截，设置请求头等，还有根据判断是开发环境或正式环境，来设置不同的 baseUrl：

        
/* utils/request/index.js */

// need to change baseUrl
const baseUrl = process.env.NODE_ENV === 'development' ? "http://localhost:8081/v1/api" : "https://www.gzamon.wang/api"
// https://www.gzamon.wang/api 这个地址是本人搭的api服务，你完全可以在开发阶段使用这个地址调试

这样在开发调用后端接口的时候，可以以此为 baseUrl。更有可能你需要与公司小伙伴在同个网段下开发联调，那这个 baseUrl 就要改成小伙伴的电脑 ip 地址了。

在调用页面使用时依据按需引用的原则，打包编译的时候不会把整个文件打包进来，有效控制编译后的文件大小，比如使用 apis/test.js 中的测试接口：

        
        
        
    
/* apis/test.js */
import request from '@/utils/request/index.js'

// 暴露方法
export function test200(data) {
    return request.request({
        url: '/get200',
        method: 'POST',
        data: data,
        authType: 'None'
    })
}

        
        
        
    
/* pages/index.vue */
import { test200 } from "@/apis/test.js"
export default {
    data() {
        return {
            title: ''
        }
    },
    onLoad() {
        this.test()
    },
    methods: {
        // 测试获取数据
        test () {
            test200().then(res => {
                this.title = res.data
            })
        }
    }
}

apis/test.js 中的 test200 被封装成了 Promise 对象，因此在调用的时候使用 then 。Promise 对象是什么？

全局参数配置

在项目定稿后，我们需要在 pages.json 修改 globalStyle 配置应用的状态栏、导航条、标题、窗口背景色等。

        
/* pages.json */

"globalStyle": {
    "navigationBarTextStyle": "white",     // 导航栏标题颜色及状态栏前景颜色，仅支持 black/white
    "navigationBarTitleText": "Uniapp Music",   // 导航栏标题文字内容
    "navigationBarBackgroundColor": "#F8F8F8",  // 导航栏背景颜色（同状态栏背景色）
    "backgroundColor": "#F8F8F8" // 窗口的背景色
}

小结

确定开发需求和技术框架选型；
根据框架特点选用处理单位，文件的统一管理有助于团队的协同开发；
为了更好的管理开发项目，项目使用的文件基本都是经过了必要的处理与封装；
本节确定 store 存储，api 与请求管理，图标与图片的存放，全局基础参数配置；
整个完成项目搭建好之后，基本就是依葫芦画瓢的工作了（添加文件，开发细节）；
本章代码 uni-course-base。