uni-app小程序客到店项目实战(四):是时候展示真正的艺术了

768 阅读2分钟

背景

最近一直在试点用uni-app去做一些小需求,分享一下在项目中遇到的问题以及一些经验。ps:本项目整体为vue-cli创建,项目目录结构会与hbuilderx有差异。本项目开源于Github

项目目标

做一个用户线上预约,线下到店体验的简单预约商城小程序,常见于美业 婚庆/摄影 教育/培训 亲子等线下场景。小程序端使用uni-app,后端API使用nestjs+mongo,服务端部署使用docker

系列连载

(一):让Vant适用于uni项目

(二):uni拦截器(Interceptor)

(三):跨页面通信数据预加载

(四):是时候展示真正的艺术了

项目结构

// 先罗列下项目目录的大致结构 不涉及分包
src
├── api // 后端接口调用统一处理
├── common
│   ├── decorators // 装饰器
│   └── interceptor // 各类拦截器
├── components // 组件
│   ├── biz // 业务组件 基本复用性不高
│   └── ui // UI组件 复用性高
├── config // 配置文件 读取.env文件内容
├── mixins // 各种mixins
├── pages // 页面相关
├── static // 静态文件
│   └── images
├── store // vuex
│   └── modules // vuex内的模块 分开
├── style // 共用style 参考@vant/weapp来写
└── types // d.ts

这一章,把前面几章涉及的内容都实践上去了。

用上TypeScript

uni本身是支持typescript的,可惜官方那个d.ts支持力度不够。长时间不更新,跟微信api很多都同步不上了。第一章讲的,这种东西需要工具化,我们要保持跟官方的同步。就用得用miniprogram-api-typings,微信小程序定义文件。miniprogram-api-typings这东西吧之前是不支持Promise的,现在支持的也没那么好。前端就是那么折腾,然后参考它维护了一个d.ts,才能愉快的玩耍起来。

用上TypeScript,就可以愉快的用上装饰器了。

写在最后

项目更新进度不会太快,同期还在写后端,基于nestjs的。以前写的都是eggjs,其实eggjs挺好的,团队成员如果不是很熟悉node的情况下也能快速上手,毕竟人家有约束在里面。nestjs就比较狂野了...本身熟悉后端的入手应该觉得容易。