使用 React 开发微信小程序的行业实践并不少，taro、uni-app，但是它们的方案都是通过编译工具，将 react 代码转化为小程序原生代码后执行。来自微信团队的June开发了新的微信小程序框架 Kbone，走了新的路子，通过提供运行时库，来抹平微信小程序和web在接口上的不同，让react-dom可以无缝跑在微信小程序上面。
基于Kbone，Nautil 也可以实现无缝的跨端开发体验，下面让我们来体验一下如何使用Nautil来开发微信小程序。
mkdir wxapp && cd wxapp
npx nautil-cli init
npm run dev:wemp接下来，打开微信开发者工具，导入 dist/wechat-mp 这个小程序项目，导入的时候需要修改为你自己的 appid即可。之后就可以看到一个helloworld界面。
接下来，将你以前写好的一个手机端 react 项目组件（注意，不是整个项目，因为在小程序中无法直接使用浏览器中的 router 的部分）拷贝到 src/app 目录中，然后整合好入口文件app.jsx，就可以看到在小程序中的效果。另外，还需要处理一些样式问题，在Nautil中默认会开启CSS Module，你需要关闭它，在 .env 文件中，解除 NO_CSS_MODULE=true 的注释，即可禁用该功能。修改 .env 之后，要重新运行 npm run dev:wemp。
我们的体验就到此结束了。
如果你对这次体验感兴趣，可能会深入一点问 Nautil 是啥？Kbone 又是啥？
Nautil是一套基于react的开发框架。你可能说，react不就是框架了么？实际上，react只提供了UI层面的能力，级别和jquery是对等的。如果非要说react框架，那么所有对flux的实现可以算是一套框架，也就是说，要react+redux+react-router+...才算的上框架。如果你公司正在用这一套东西，那么你可以说你在用一个flux框架。Nautil是框架层面的东西，为你提供基于react的渲染能力，状态管理有Store、Model，数据管理有Depository，事件流管理有stream，路由管理有Navigation，同时支持跨平台开发。nautil-cli 是它的CLI工具。宗旨就是：简单。
Kbone是微信小程序开发框架。基于该框架，开发者不需要再解决头疼的微信小程序原生开发和项目开发两套代码的问题。Kbone相当于提供了原生web的运行接口，这相当于让我们的react应用直接在web上运行（当然还是会有一些不同）。
nautil-cli中内置集成了Kbone，在nautil开发时，通过入口文件区分不同端，从而在打包构建时，走不同的构建逻辑，生成对应的构建结果。而在项目本身的逻辑层面，代码可以完全复用。在生成小程序代码时，nautil-cli已经处理好了构建配置的所有东西，开发者只需要提供基于nautil的项目入口文件，以及修改.nautil/wechat-mp.config.js中的配置，就可以得到想要的小程序界面。在界面切换时，使用Navigation来配置路由，因为Navigation是跨平台的，在小程序中，它使用内存变量来记录路由状态，所以看上去和web中效果是一样的（和小程序原生路由不一样，一个Nautil应用只跑在一个小程序原生路由页面中）。
Anyway，这样是不是让react开发微信小程序更加简单呢？
