前言
随着小程序的盛行，React 组件很快就渗透到了小程序的开发中。jsx2mp 是 JSX 到小程序的转换器，其cli工具是一个命令行工具，可以帮助我们把react组件编译成微信/支付宝小程序能够识别的代码，它提供了初始化项目，开发、调试、打包等功能，从而方便了前端开发人员在小程序中使用React进行开发。在这篇文章中，我们将简介如何安装、配置，以及使用jsx2mp-cli 将React转化为微信小程序。
安装和配置
使用 jsx2mp-cli 前，要先安装 Node.js，安装方法和平常这些具体的操作就不赘述了，本篇主要讲解 npm 包的使用。
- 整个react小程序开发的项目结构非常重要，需要满足一些要求。
- 项目下需要安装jsx2mp依赖
npm i jsx2mp --save-dev - 下载cli工具
npm i @mpxjs/cli -g - 项目下需要有一个app.json作为小程序项目配置文件，并在其中配置好对应小程序的
pages,subpackages等字段。 - 此处以 微信小程序 为例，在
pages配置项中罗列出app下所有的页面路径。
开始使用 jsx2mp-cli
- 创建项目
npx jsx2mp-cli init
执行后，需要输入项目名称，初始化后会在当前目录下创建一个名为 目录名称 的文件夹，其中自动生成了项目结构。
- 开发时调试
npm run dev:wx
此命令会自动监听，当代码变化时会更新代码，并在编译后自动产生一个适用于开发时的小程序项目，此时可以在微信web开发者工具中打开dist/wx目录即可预览小程序
- 打包
npm run build:wx
执行之后就可以可以在dist/wx文件夹下看到生成的小程序项目结构，再通过开发者工具上传即可
项目结构
-- -------------------- ---- ------- --- ---- -- ---- - --- --- - --- -- - --- -- - --- -- - --- -- --- --- -- --- - --- ---------- -- ---- - --- ----- -- ---- - --- ------ -- -------- --- ------------ -- ------ --- -------- -- --------- --- ------------------- -- ----------- --- ------------- -- ---------------------------- --- --------- -- ------
示例代码
-- -------------------- ---- -------
---
- -------------------
- ------------------------------------
--
----- ---------------------
----- ---------------- ------
----- ----------------------
------
------ --------------------- -------------- --------------------------- --
-------
------- --------------- --------------------------------------
-------
-------
---
- -------------------
- ------------------- --- --------------------
--
------ - ----- ------ ------ - ---- ---------------------
------ ------ - --------- - ---- --------
--------- --------- --
----- ---- ------- -------------------- -
------------------- ----- ---- -
-- ----
-
----------- ---- -
-- ----
-
-------- -
------ -
----- ---------------------
----- ---------------- ------
----- ----------------------
------
------ --------------------- -------------- --------------------------- --
-------
------- --------------- --------------------------------------
-------
-------
--
-
-
------ ------- -----总结
通过以上jsx2mp-cli的使用，可以让我们方便快捷的将React代码转化成微信小程序，方便了前端开发人员在小程序的开发中使用React进行开发。同时本篇文章提供了简洁易懂的示例代码供参考，希望对大家有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f5243b58250f93ef89003e1