介紹
Nanachi（中文：娜娜奇），基於 React 的多端小程序轉譯框架，完美兼容 React 生命周期，也就意味著，這是一個為React開發人員量身打造的小程序框架，以React方式高效開發小程序。本項目由 Qunar（去哪兒）提供支持。娜娜奇不與某一種原生小程序兼容，因為它要照顧4種小程序，因此，並不適合必須要和原生兼容的項目！
Github
https://github.com/RubyLouvre/anu/tree/master/packages/cli
框架特性
- 多套模版選擇
旅遊、商城、音樂等7套模板
- 多端轉譯支持
支持微信、百度、支付寶、QQ、位元組跳動小程序、快應用與H5的轉譯，App端正在跟進中
- 組件化編程
支持React16各種新特證，redux, mobx, typescript
- 日誌收集與上報
實現自動理點及全自動上報機制
- 強大的事件機制
抹平小程序與PC的差異，在視圖中傳參與bind this
- 內置基於flexbox布局的UI庫
無感抹平各個端的標籤差異
兼容的API
主要包括以下一些API接口
- React.createElement
內部 API創建元素, 由於只允許你使用JSX，因此無法使用
- React.cloneElement
內部 API複製元素, 由於只允許你使用JSX，因此無法使用
- React.createFactory
內部 API包裝組件, 由於只允許你使用JSX，因此無法使用
- React.createRef
不存在
- React.forwardRef
不存在
- React.api
相當於微信的 wx, 支付寶小程序的 my，百度小程的 swan, 位元組跳動的tt, QQ小程序的qq, 為了方便編譯，請不要在業務代碼中直接用 wx,要用 React.api
- React.getApp
相當於微信的 getApp
- React.Component
所有組件的基類
- React.useComponent
內部 API用來創建組件
- React.getCurrentPage
得到當前頁面的react實例， instance.props.query, instance.props.path為當前路徑與參數對象
- React.toClass
內部 API用來轉譯 es6 類
- React.toStyle
內部 API用來轉譯樣式
- React.registerPage
內部 API頁面組件會自動在底部添加這方法
- React.registerComponent
內部 API通用組件會自動在底部添加這方法
- onShow
頁面組件的生命周期鉤子
- onHide
頁面組件的生命周期鉤子
- onPageScroll
頁面組件的事件監聽用戶滑動頁面事件
- onShareAppMessage/onShare
頁面組件的事件用於返回分享的內容,建議改用
- onShareonReachBottom
頁面組件的事件監聽用戶上拉觸底事件
- onPullDownRefresh
頁面組件的事件監聽用戶下拉刷新事件
- componentWillMount
組件的生命周期鉤子相當於小程序的onLoad，props 中有 path, query 等路由相關信息
- componentWillUpdate
組件的生命周期鉤子沒有對應的小程序生命周期鉤子
- componentDidMount
組件的生命周期鉤子相當於小程序的onReady
- componentDidUpdate
組件的生命周期鉤子沒有對應的小程序生命周期鉤子
- componentWillUnmount
組件的生命周期鉤子相當於小程序的onUnload
- componentWillRecieveProps
組件的生命周期鉤子
- shouldComponentUpdate
組件的生命周期鉤子
- componentDidCatch
組件的生命周期鉤子
- getChildContext
組件的方法
- setState
組件的方法更新頁面
- forceUpdate
組件的方法更新頁面
- refs
組件實例上的對象裡面保存著子組件的實例（由於沒有 DOM，對於普通標籤來說，雖然也能保存著它的虛擬 DOM )
- render
組件的方法裡面必須使用 JSX ，其他方法不能存在 JSX，不能顯式使用 createElement
PS：以上只是列舉出部分概述的API，其已經兼容大多數API，體現在網絡、交互、導航、設置導航條、Tabbar、動畫、畫布、鍵盤、滾動、下拉刷新、節點查詢、圖片、數據緩存、文件、位置、分享、設備（包括振動、電話、網絡、剪切板、螢幕、系統信息、掃碼-需要適配支付寶、用戶截屏事件）等，詳細文檔可以訪問官方文檔地址！
腳手架
這只是anu的一個擴展，通過實現不同的render，以支持在微信小程序，百度小程序，支付寶小程，快應用，H5， hybird上運行。
- npm
npm install nanachi-cli -g
- yarn
yarn global add nanachi-cli
- 使用方式
- nanachi init
創建工程 - cd
&& npm i 安裝依賴 - nanachi watch:[wx|bu|ali|quick] 監聽構建小程序
- nanachi build:[wx|bu|ali|quick] 構建小程序
- 用微信開發工具打開當中的dist目錄，自己在source目錄中進行開發
注意：快應用下構建結束後，需要執行以下三步驟：
- npm install
- npm run build
- npm run server
- 詳情請見快應用文檔
總結
本文只是簡單地介紹了娜娜奇(Nanachi)，相信大多數人對其也已經有了一個大致的了解，以往也介紹過一些類似的小程序框架，可謂是百花齊放，不乏其中也有很優秀的，taro、uniapp、antmove等等，感興趣的小伙們可以選擇適合自己技術方向的框架進行學習，大同小異，目的都是為了解決小程序（快應用）多端不統一的問題！
如果你有什麼問題或者建議可以在評論區留言分享，也歡迎優秀的作品投稿推薦！