Q_D/README_DEVELOPMENT.md

Mini-12306 项目从零开发指引

项目使用 uni-app 前端应用框架，以类 Vue 的开发方式进行 app 开发

以下是如何从零开始一个 uni-app 项目，建议按指引创建新项目先走一遍熟悉开发流程，再使用本项目中已有的代码进行开发

开发环境

1. 安装node
2. 下载 uni-app 专用集成开发环境（IDE）HBuilderX-高效极客技巧 (dcloud.io)
3. 解压并打开HBuilderX.exe运行 IDE
4. 左上角文件→新建→项目→uni-app→默认模板

注意选择 vue2 版本。
vue3 版本的 uni-app x 可以使用更高级的类型验证，但插件问题较多。

开发流程

项目结构简单说明

• api 前后端交互接口集中管理
• components 通用组件文件夹(先行了解 vue 组件概念)
• node_modules 第三方插件文件夹（npm）
• pages 所有能访问的页面
• static 静态资源（如不会修改的图标/图片）
• store 【进阶】Vuex，跨页面数据管理
• uni_modules 这是 uni-app 中的 node_modules（uni-app 插件市场会导入到此文件夹）
• utils 常用方法、过滤器等工具
• App.vue 项目入口，主要是onLauch和全局样式
• main.js 项目入口，一般插件安装都会指引你在这个文件进行引入
• manifest.json 很重要的项目控制（打包）文件，但一般不会改到里面的东西
• package.json 与 node 中的同名文件对应，管理通过 npm 安装的第三方库
• pages.json 软件的路由配置（配置所有可以访问的页面）
• uni.scss 项目内置样式（注意里面只存放样式变量，不要在里面写实际样式）

项目运行（浏览器）

最方便开发肯定是一边改代码一边在设备中看到效果，

既然我们在 pc 上进行开发，那在浏览器中查看代码效果肯定是最方便的啦

1. HbuilderX 顶部菜单栏运行→运行到浏览器
2. 浏览器运行后打开开发者模式（F12），切换设备仿真（一般是控制台左上角的第二个图标）
3. 修改项目代码，并保存，即可在浏览器中看到效果

如果你是运行的本项目，记得使用npm install安装package.json中的依赖项

上手体验

参考Hello uni-app模板项目的源代码，在自己创建的空白项目中开发相关功能

对照着界面和代码一起看！（运行Hello uni-app项目）

1. 实现页面跳转（内置组件：导航 navigator，Hello uni-app/pages/component/navigator/navigator.vue）
2. 数据输入与提交（内置组件：表单组件）
3. 简单 js 功能（接口：界面-带数据的页面跳转、显示 loading 提示框，Hello uni-app/pages/API/navigator/navigator.vue）
4. 与后端交互（接口：网络-发起一个请求，Hello uni-app/pages/API/request/request.vue）

实际开发也是： → 搭建所有页面与路由配置（页面间跳转） → 在各页面中记录下要开发的功能 → 实现功能逻辑（假数据） → 初步美化页面 → 与后端对接（讨论修改） → 细节调整

项目打包 APP

HbuilderX 顶部菜单栏发行：云端打包（打包好后会在 HbuilderX 的控制台给出 apk 链接）

打包只需要勾选以下内容

• 使用公共测试证书
• 打正式包
• 快速安心打包

注意事项

• uview 要使用npm进行安装，uni-app 插件市场安装的版本有问题

最后

以你们自己做的各种图来实现 Mini-12306，

前端开发注意不要陷入页面样式细节的代码中去了，优先实现功能代码

建议参考铁路12306App 进行页面设计和功能拓展