Vulcan: 瓦肯星、火神星、祝融星
《星际迷航》中 Mr.Spock 的出生星球
瓦肯人以信仰严谨的逻辑和推理闻名
在进行瓦肯举手礼的时候通常还伴随着一句话:Live long and prosper(生生不息,繁荣昌盛)基于 Remax 开发的跨平台小程序
目前只有微信(wechat)版本,后续再添加其他版本
安装依赖
注意:Remax 要求 Node.js 版本大于等于 12
npm install
# or
yarn调试项目
# 选定要进行开发的平台,如 wechat,并调试
npm run dev wechat
# or
yarn dev wechat使用小程序开发者工具打开项目下的 dist/[target] 目录。例如微信小程序,目录为 dist/wechat
注意:微信和字节跳动小程序需要在 IDE 中打开「不校验合法域名」,参考文档
Mock 测试数据使用 rap2-delos,开箱即用地址
和 easy-mock 类似(但是比较稳定),新建项目、定义 api 地址、定义请求参数、定义返回数据格式等,例如 测试 api
./public 目录存放一些静态资源,该目录下的所有文件会被自动复制到 dist 目录下
可以将 原生页面, tabBar 中配置的图片 等等全局资源放在这个目录下
项目的主体代码都放在 ./src 中,相当于一般 React 项目中的根目录。其文件划分基本类似 Portal React / www-2020 React 项目,目前具体划分如下:
./src
├── apis # 接口相关
├── components # 自定义业务相关组件
├── ui # 自定义 UI 相关组件
├── constants # 常量相关
├── pages # 小程序页面
├── stores
├── utils # 各种 tools
├── runtime # 统一各平台基础组件、API 等(可拓展)
└── ... # 后续有需要再添加新的目录-
apis/components/constants/stores/utils类似
Portal React / www-2020 React项目中的规范所定义的功能 -
pages小程序中的页面文件夹,其中每一个文件夹都对应一个页面(需要在
src/constants/route.ts文件的routes字段中声明)app的配置在src/app.config.ts文件中进行,页面的单独配置在src/pages/xxx/index.config.ts文件中进行
-
目前的代码框架只提供了一些基础的能力,后续有需要再慢慢进行扩展
-
不打算引入任何
UI框架,所有的组件需要自己实现 -
基础组件,例如
View, Button, Text...建议使用Remax One,参考文档 -
...
以微信小程序为例,参考
需要注意的是目录结构梳理、打包原则和引用原则
需要修改 constants/route.ts 文件中的 urlMap,将不同分包所包含页面的 url 拆分开进行定义,后续在编译和打包的过程中就是根据所拆分的 urlMap 将不同的页面打到不同的包下面
接着修改 utils/config.ts 文件中的 getWechatAppConfig 方法,在里面新增 subpackages 配置项(和 pages 配置项同级。这里需要注意的是虽然微信小程序官方文档中说也支持 subPackages 的写法,但是 remax 仅支持 subpackages 写法)
subpackages 是一个数组,每一项为分包的配置项,用于定义分包的 root, name, pages
当配置了分包的 root 之后,分包页面的 url 定义就不用再将 root 作为前缀拼接到 url 前面,否则会出现嵌套的情况,例如下面的情况
例如某一个分包页面的期望 url 为 pages/ui-pages/cell/index
该分包的 root 定义为 pages/ui-pages
则需要修改该页面的 url 为 cell/index 并写入分包的 pages 配置项中
这样才可以通过 /pages/ui-pages/cell/index 路由正确定位到页面
如果不修改该页面的 url(仍保持 pages/ui-pages/cell/index),则打包后页面的路由会变成 /pages/ui-pages/pages/ui-pages/cell/index,即出现所谓的嵌套情况
# 选定要构建的平台,如 wechat,并执行构建
npm run build wechat
# or
yarn build wechat
# 将静态资源上传至指定账号的指定 bucket,以减小本地代码包体积
# 并删除本地的静态资源文件 && 文件夹
# 以 wechat 平台为例
node deploy.js ${TARGET} ${AK} ${SK} ${BUCKET}
# ${TARGET}: 编译目标平台
# ${AK}: 账号 ak
# ${SK}: 账号 sk
# ${BUCKET}: 目标 bucket 名称使用小程序开发者工具打开项目下的 dist/[target] 目录(例如微信小程序,目录为 dist/wechat),上传代码即可
参考 Issues
