Nautil-CLI 讓你快速體驗基於 Kbone 的 React 微信小程序開發

使用 React 開發微信小程序的行業實踐並很多，taro、remax，可是它們的方案都是經過編譯工具，將 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工具。宗旨就是：簡單。

github.com/tangshuang/…

Kbone是微信小程序開發框架。基於該框架，開發者不須要再解決頭疼的微信小程序原生開發和項目開發兩套代碼的問題。Kbone至關於提供了原生web的運行接口，這至關於讓咱們的react應用直接在web上運行（固然仍是會有一些不一樣）。

github.com/wechat-mini…

nautil-cli中內置集成了Kbone，在nautil開發時，經過入口文件區分不一樣端，從而在打包構建時，走不一樣的構建邏輯，生成對應的構建結果。而在項目自己的邏輯層面，代碼能夠徹底複用。在生成小程序代碼時，nautil-cli已經處理好了構建配置的全部東西，開發者只須要提供基於nautil的項目入口文件，以及修改.nautil/wechat-mp.config.js中的配置，就能夠獲得想要的小程序界面。在界面切換時，使用Navigation來配置路由，由於Navigation是跨平臺的，在小程序中，它使用內存變量來記錄路由狀態，因此看上去和web中效果是同樣的（和小程序原生路由不同，一個Nautil應用只跑在一個小程序原生路由頁面中）。

Anyway，這樣是否是讓react開發微信小程序更加簡單呢？