介绍
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 <project-name> 创建工程
- cd <project-name> && 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等等，感兴趣的小伙们可以选择适合自己技术方向的框架进行学习，大同小异，目的都是为了解决小程序（快应用）多端不统一的问题！
如果你有什么问题或者建议可以在评论区留言分享，也欢迎优秀的作品投稿推荐！