移动端

chenlei 8948bdb575 加气优惠 пре 1 година
.vscode 13b04ff92e 基础架构+散户加气3.1 пре 1 година
env a1c3283bd6 基础架构+散户加气3.1 пре 1 година
keys a1c3283bd6 基础架构+散户加气3.1 пре 1 година
scripts 26966872f5 散户加气3.1 пре 1 година
src 8948bdb575 加气优惠 пре 1 година
.commitlintrc.cjs 13b04ff92e 基础架构+散户加气3.1 пре 1 година
.editorconfig 13b04ff92e 基础架构+散户加气3.1 пре 1 година
.eslintignore 13b04ff92e 基础架构+散户加气3.1 пре 1 година
.eslintrc-auto-import.json 26966872f5 散户加气3.1 пре 1 година
.eslintrc.cjs 13b04ff92e 基础架构+散户加气3.1 пре 1 година
.gitignore a1c3283bd6 基础架构+散户加气3.1 пре 1 година
.npmrc 13b04ff92e 基础架构+散户加气3.1 пре 1 година
.prettierignore 13b04ff92e 基础架构+散户加气3.1 пре 1 година
.prettierrc.cjs 13b04ff92e 基础架构+散户加气3.1 пре 1 година
.stylelintignore 13b04ff92e 基础架构+散户加气3.1 пре 1 година
.stylelintrc.cjs 13b04ff92e 基础架构+散户加气3.1 пре 1 година
README.md 8948bdb575 加气优惠 пре 1 година
favicon.ico 13b04ff92e 基础架构+散户加气3.1 пре 1 година
index.html 13b04ff92e 基础架构+散户加气3.1 пре 1 година
manifest.config.ts 84dc47bdb8 基础架构+散户加气3.1 пре 1 година
package.json 26966872f5 散户加气3.1 пре 1 година
pages.config.ts 7cbf7ffc91 基础架构+散户加气3.1 пре 1 година
pnpm-lock.yaml 26966872f5 散户加气3.1 пре 1 година
tsconfig.json 84dc47bdb8 基础架构+散户加气3.1 пре 1 година
uno.config.ts 84dc47bdb8 基础架构+散户加气3.1 пре 1 година
vite.config.ts 26966872f5 散户加气3.1 пре 1 година
vitePlugin.ts 84dc47bdb8 基础架构+散户加气3.1 пре 1 година

README.md

uniapp + Vue3 + Ts + Vite5 + UnoCss + uni-ui 构成,使用了最新的前端技术栈,无需依靠 HBuilderX,通过命令行方式运行 web小程序App(编辑器推荐 VSCode,可选 webstorm)。

内置了 页面底座公共请求框架公共状态中心配置中心UnoCSSi18n多语言 等基础功能,提供了 代码提示自动格式化接口信息拉取(from swagger)自动生成路由内置接口mock 等辅助功能。

⚙️ 环境

  • node>=18
  • pnpm>=7.30
  • 稳定版本:node = 20.7.0 pnpm = 9.4.0

📂 快速开始

执行 pnpm i 安装依赖

?执行 pnpm gif 导入接口配置信息

执行 pnpm dev 运行 H5

📦 常见问题

如果出现这类错误 uni-app 有新版本发布,请执行npx @dcloudio/uvm@latest alpha更新,更新日志详见:https://download1.dcloud.net.cn/hbuilderx/changelog/4.22.2024062415-alpha.html

执行 pnpm uvm

📦 运行(支持热更新)

  • web平台: pnpm dev:h5, 然后打开 http://localhost:9000/
  • weixin平台:pnpm dev:mp 然后打开微信开发者工具,导入本地文件夹,选择本项目的dist/dev/mp-weixin 文件。
  • APP平台:pnpm dev:app, 然后打开 HBuilderX,导入刚刚生成的dist/dev/app 文件夹,选择运行到模拟器(开发时优先使用),或者运行的安卓/ios基座。

🔗 发布

  • web平台: pnpm build:h5,打包后的文件在 dist/build/h5,可以放到web服务器,如nginx运行。如果最终不是放在根目录,可以在 manifest.config.ts 文件的 h5.router.base 属性进行修改。
  • weixin平台:
    • 仅打包:开发环境:pnpm build:d:mp、 测试环境:pnpm build:t:mp、 生产环境:pnpm build:mp。打包后的文件在 dist/build/mp-weixin,可用微信开发者工具导入查看效果。
    • 自动上传:开发环境:pnpm build:dp:mp、 测试环境:pnpm build:tp:mp、 生产环境:pnpm build:p:mp。 均可自动上传到对应的小程序后台。
  • APP平台:pnpm build:app, 然后打开 HBuilderX,导入刚刚生成的dist/build/app 文件夹,选择发行 - APP云打包。

📦 TODO

  • 1.下拉更新、上拉加载移动端组件 √
  • 2.页面生命周期管理中心,默认拦截enums.LoadType.onLoad,通知容器数据加载完毕 √
  • 3.公共请求框架,接口信息自动装配 √
  • 4.公共状态管理中心,接口请求状态跟踪,身份存储 √
  • 5.公共请求框架,类型推导智能提示 √
  • 6.公共请求框架,身份认证 √
  • 7.公共请求框架,根据swagger导入接口信息,包括接口组、接口入参结构,接口出参结构 √
  • 8.调试、打包时过滤掉未用到的接口配置信息,微信小程序,√
  • 9.调试、打包时过滤掉未用到的接口配置信息,支付宝小程序 √
  • 10.调试、打包时过滤掉未用到的接口配置信息,通过拦截watchChange、generateBundle 减少文件重复写入 √
  • 11.通过UniPages的onBeforeWriteFile钩子函数,自动生成页面路由信息 √
  • 12.页面跳转公共方法,结合页面配置信息判断身份过期登录、页面参数传递等 √
  • 13.微信小程序环境以及真机验证容器组件分页,生命周期管理,页面状态管理,并做兼容性调整 √
  • 14.通过UniPages的onBeforeWriteFile钩子函数,自动生成页面路由信息-支持分包 √
  • 15.公共请求框架支持文件上传,swagger导入接口信息识别是否是上传接口,调用接口时自动唤起选择文件窗口
  • 16.公共请求方法,支持类型修饰,深度合并两个ts对象类型 √
  • 17.全局防抖函数,支持常规等待和立即执行,目标方法哈希计算,追加防抖函数细粒度标签;已应用于页面生命周期管理中心,避免init方法重复执行;页面公共跳转方法,避免页面重复跳转。√
  • 18.开发环境,通过generateBundle钩子函数实现增量修改微信小程序的js文件,以便提高小程序ide工具的编译速度。
  • 19.全局sass变量自动引入,全局sass变量、样式表定义。
  • 20.公共请求框架,根据swagger导入接口信息支持增量导入。
  • 21.页面方法公共初始化,对页面方法进行集中拦截、公共管控,已支持自动为对象内所有方法增加防重提功能(同步方法、异步方法执行中再次触发不执行)。√
  • 22.微信小程序环境支持websocket-stomp协议,收银员扫描驾驶员二维码创建订单后,驾驶员端自动跳转待支付页面。√
  • 23.构建项目时自动化上传体验版至小程序后台。√
  • 24.构建项目时可区分开发、测试、生成环境,编写对应的命令。√
  • 25.在页面跳转时支持页面预初始化。
  • 26.容器组件根据页面公共配置,自动识别支持自定义头部,呈现头部区域标题、返回按钮。√
  • 27.编写公共组件:计数器、抽屉、详情页模板、流光加载效果、浮点单位、刷新、骨架屏、吸顶。
  • 28.编写业务组件:车牌号输入、拨打电话、加气站模块。
  • 29.本地调试时,通过编写unocss插件去掉unicss默认无用样式变量,提高浏览器环境样式调试性能。
  • 30.公共请求框架支持mock机制,支持划分mock场景。√
  • 31.公共请求框架兼容axios请求,为了与与mock插件适配,调试方便。√