<small id='RJFc2m06zo'></small> <noframes id='yRlUh'>

  • <tfoot id='QCDJu'></tfoot>

      <legend id='Lbx3v'><style id='WlxF3'><dir id='BDAdj'><q id='8GHgnujf'></q></dir></style></legend>
      <i id='dvoAeW'><tr id='g97tCcT3z'><dt id='viA5fkda'><q id='z9BCQLq'><span id='ThR5'><b id='0DE4'><form id='57Wg'><ins id='s3p1hE'></ins><ul id='06dZ'></ul><sub id='uwEK'></sub></form><legend id='HNad51Q'></legend><bdo id='NYSkvZ'><pre id='wcBo5bz'><center id='QVEpfX'></center></pre></bdo></b><th id='1Kdui5Vp'></th></span></q></dt></tr></i><div id='W4QhACg'><tfoot id='Vx5DZESp'></tfoot><dl id='BF2bUQ0f'><fieldset id='dSRlrDI6j'></fieldset></dl></div>

          <bdo id='lXtUfSRn'></bdo><ul id='T95gZQV'></ul>

          1. <li id='C5kT3pI'></li>
            登陆

            来自去哪儿大前端团队的多端小程序结构——Nanachi

            admin 2019-11-06 265人围观 ,发现0个评论

            介绍

            Nanachi(中文:娜娜奇),根据 React 的多端小程序转译结构,完美兼容 React 生命周期,也就意味着,这是一个为React开发人员量身打造的小程序结构,以React办法高效开发小程序。本项目由 Qunar来自去哪儿大前端团队的多端小程序结构——Nanachi(去哪儿)供给支撑。娜娜奇不与某一种原生小程序兼容,因为它要照料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来自去哪儿大前端团队的多端小程序结构——Nanachi小程序的qq, 为了便利编译,请不要在事务代码中直接用 wx,要用 React.api

            • React.getApp

            相当于微信的 getApp

            • React.Component

            一切组件的基类

            • React.useComponent

            内部 API用来创立组件

            • React.getCurrentPage

            得到当时页面的react实例, instance.props.query, instance.props.path为当时途径与参数目标

            • React.toClass

            内部 API用来转来自去哪儿大前端团队的多端小程序结构——Nanachi译 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 in走出你的世界我更寂寞it 创立工程
            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等等,感兴趣的小伙们能够挑选合适自己技能方向的结构进行学习,迥然不同,意图都是为了处理小程序(快运用)多端不一致的问题!

            假如你有什么问题或许主张能够在谈论区留言共享,也欢迎优异的著作投稿引荐!

            请关注微信公众号
            微信二维码
            不容错过
            Powered By Z-BlogPHP