介紹

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 

• 使用方式

1. nanachi init 創建工程
2. cd && npm i 安裝依賴
3. nanachi watch:[wx|bu|ali|quick] 監聽構建小程序
4. nanachi build:[wx|bu|ali|quick] 構建小程序
5. 用微信開發工具打開當中的dist目錄，自己在source目錄中進行開發

注意：快應用下構建結束後，需要執行以下三步驟：

1. npm install
2. npm run build
3. npm run server
4. 詳情請見快應用文檔

總結

本文只是簡單地介紹了娜娜奇(Nanachi)，相信大多數人對其也已經有了一個大致的了解，以往也介紹過一些類似的小程序框架，可謂是百花齊放，不乏其中也有很優秀的，taro、uniapp、antmove等等，感興趣的小伙們可以選擇適合自己技術方向的框架進行學習，大同小異，目的都是為了解決小程序（快應用）多端不統一的問題！

如果你有什麼問題或者建議可以在評論區留言分享，也歡迎優秀的作品投稿推薦！