介绍

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 <project-name> 创建工程
2. cd <project-name> && 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等等，感兴趣的小伙们可以选择适合自己技术方向的框架进行学习，大同小异，目的都是为了解决小程序（快应用）多端不统一的问题！

如果你有什么问题或者建议可以在评论区留言分享，也欢迎优秀的作品投稿推荐！