2024-07-21
健康是一种自由——在一切自由中首屈一指。——亚美路
就是这个项目:
https://github.com/eleme/morjs
基于小程序 DSL(微信、支付宝)的,可扩展的多端研发框架,支持一键将微信或支付宝小程序转换为微信、支付宝、百度、字节、QQ、快手、淘宝、钉钉等小程序 或 Web 应用
官网
快速上手
快速上手
环境准备
MorJS 项目基于 node,请确保已具备较新的 node 环境(>=14),推荐使用 node 版本管理工具 nvm 来管理 node(Windows 下使用 nvm-windows),这样可以很方便地切换 node 版本,全局安装时候也不必再使用 sudo
。
1 | # mac 或 linux 下安装 nvm$ curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash$ nvm -v0.39.1# 安装 node$ nvm install 14$ nvm use 14$ node -vv14.21.3 |
创建项目
Mor 提供了 create-mor
和 mor cli
工具两种方式来创建新项目,选择其中任一一种即可。
- 使用 create-mor 创建项目
确保你安装了符合版本的 Node.js,选定项目目录
1 | $ mkdir myapp && cd myapp # 创建项目目录 |
在目录终端执行以下任一命令:
1 | $ npm init mor # npm 创建项目$ yarn create mor # yarn 创建项目$ pnpm create mor # pnpm 创建项目 |
这一指令将会安装并执行 create-mor
,它是 Mor 官方的项目脚手架工具。
- 使用 mor cli 创建项目
确保你安装了符合版本的 Node.js,创建项目目录,全局安装 mor cli 工具
1 | $ mkdir myapp && cd myapp # 创建项目目录$ npm i @morjs/cli -g # 全局安装 mor cli$ mor -v # 查看全局 mor 版本 |
此时你已安装了 mor cli 工具,然后通过 mor init
命令即可创建项目:
1 | $ mor init |
初始化项目
创建项目后你会看到如下命令号交互界面,选择对应的工程类型,按照提示完成初始化操作:
1 | ✔ 请选择工程类型 › 小程序✔ 请选择源码类型 › 微信小程序 DSL✔ 是否使用 Typescript … 否 / 是✔ 请选择 CSS 预处理器 › less✔ 请输入 小程序 的名称 … myapp✔ 请输入 小程序 的描述 … my first app✔ 用户名 … yourUserName✔ 邮箱 … your@gmail.com✔ 请输入 Git 仓库地址 … https://github.com/yourUserName/myapp✔ 请选择 npm 客户端 › npm / pnpm / yarn…[mor] ✔ 安装 node_modules 完成![mor] ✔ 小程序项目初始化完成 ^_^ 在终端运行命令 👇🏻 npm run dev 即可启动项目。 |
在项目初始化之后,Mor 会默认开始安装项目所需要的依赖,一般来说,依赖安装会自动完成,但某些情况下可能会安装失败,这时候你可以在项目目录下自己使用安装命令进行安装:
1 | $ npm i |
编译运行
使用 MorJS 的 compile
命令可以把 MorJS 代码编译成不同端的代码,然后在对应的开发工具中查看效果。MorJS 初始的编译命令配置了 dev
和 build
两种模式:
dev
模式(增加 --watch 参数)将会监听文件修改。build
模式(增加 --production 参数)将对代码进行压缩打包。
执行 npm run dev
命令,进行浏览调试:
1 | [mor] ℹ 发现配置文件: mor.config.ts[mor] ✔ 配置文件加载成功: mor.config.ts[mor] ℹ 准备配置中, 即将开始编译 👇 配置名称: wechat-miniprogram 编译目标: 微信小程序 编译环境: development 编译类型: 小程序 编译模式: bundle 源码类型: wechat 源码目录: src 输出目录: dist/wechat[mor] ℹ 已开启缓存, 可通过 --no-cache 关闭[mor] ℹ 启动文件监听模式[mor] ℹ 开始编译 ...[mor] ℹ 依赖分析中 ...[mor] ℹ 依赖分析完成: 耗时: 25.125412 ms[mor] ✔ 编译完成, 耗时: 1451.202285 ms[mor] ℹ 准备配置中, 即将开始编译 👇 配置名称: alipay-miniprogram 编译目标: 支付宝小程序 编译环境: development 编译类型: 小程序 编译模式: bundle 源码类型: wechat 源码目录: src 输出目录: dist/alipay[mor] ℹ 已开启缓存, 可通过 --no-cache 关闭[mor] ℹ 启动文件监听模式[mor] ℹ 开始编译 ...[mor] ℹ 依赖分析中 ...[mor] ℹ 依赖分析完成: 耗时: 24.112123 ms[mor] ✔ 编译完成, 耗时: 441.548922 ms |
多端产物已构建在 dist 目录下,分别用对应平台的 IDE 打开即可开发预览:
在 微信开发者工具 中打开 dist/wechat
目录即可开始微信小程序开发预览
在 支付宝小程序开发者工具 中打开 dist/alipay
目录即可开始微信小程序开发预览