监听程序当前无法识别_来自去哪儿大前端团队的多端小程序框架—

本文链接：https://blog.csdn.net/weixin_39685459/article/details/111349390

介绍

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