娜娜奇之前又叫anu小程序,是在我之前的迷你React 框架anu的基础上加上一个转译器与四个视图层形成的。经过一番努力,娜娜奇终于支持微信/百度/支付宝小程序与快应用的转译,真正的一处编写,四处运行。
娜娜奇提供的核心组件及他们对应的关系,核心的技术内幕
娜娜奇主要分为两大部分, 编译期的转译框架, 统一将以React为技术栈的工程转换为各种小程序认识的文件与结构
转译框架又细分为4部分, react组件转译器,es6转译器, 样式转译器及各种辅助用的helpers.
运行时的底层框架与补丁组件, 底层框架为ReactWx, ReactBu, ReactAli, ReactQuick,分别对标微信,百度, 支付宝小程序及快应用,因为官方React的size太大,并没有适用的钩子机制,让我们在渲染前将数据传给原生组件进行 setData() (setData是小程序实例更新视图的核心方法),因此我们基于我们早已成熟的迷你React框架anu进行一下扩展 去掉DOM渲染层,加上各种对应的渲染层,从而形成 对应的React库.
补丁组件是指, 小程序都自带一套UI组件,它们存在一些无法抹平的差异或在个别平台直接没有这个组件,我们需要用原生的 view ,text等基础组件元素封装成缺省组件,比如Icon, Button, Navigator,Picker……
娜娜奇的目录结构以及对应的工程规范
娜娜奇的目录结构以微信的标准为蓝图,大概分为app.js, pages目录, components目录,针对我们的业务,还添加了 commons目录与assets目录。
- app.js是全工程的配置,以react组件形式呈现, 全局共享对象,全局的分享函数都在这实例上
- pages目录 放所有页面组件, 组件在index.js中, 这里目录存在层次
- components目录 放所有有视图的业务组件, 组件在index.js中, 这里的目录只有两层, components/ComponentName/index.js index.js 要exports与目录名同名的类名
- commons目录 放所有没有视图的业务组件,没有文件名与目录名的限制, 但希望每个业务线的组件都放在与业务线同名的目录下
- assets目录, 放静态资源
app.js pages目录,components目录会应用react转译器与样式转译器, commons目录应用es6转译器, assets目录应用样式转译器
开发目录
src
|--components
| |--HotelDialog
| | └──index.js //必须以index.js命名,里面的类名 必须 与文件夹名一样, 如HotelDialog
| |--HotelXXX
| |--FlightYYY
| └── ...
|--pages
| |--hotel
| |--flight
| |--holiday
| |--strategy
| └── ...
|--common
| |--hotel
| |--flight
| |--holiday
| |--strategy
| └── ...
|--app.js
pages目录下每个事业部各建一个目录,以事件部的名字命名,里面为index.js 及页面的目录,index.js要引入自己目录的所有页面,页面也以index.js命名,并且里面必须是有状态的React组件(转译器会转换成页面组件。)页面的index.js各种引入通用组件与common目录的依赖
|--pages
| |--hotel
|--index
| └──index.js //目录, import里面所有index.js
|--page1
| |---index.js
| └── index.scss
|--page2
| |---index.js
| └── index.scss
|--page3
| |---index.js
| └── index.scss
|--about
| |---index.js
| └── index.scss
如何使用
- git clone git@github.com:RubyLouvre/anu.git 或git clone github.com/RubyLouvre/…
- 命令行定位到packages/cli目录下,执行npm link 如果之前装过要先npm unlink
- 然后定位到外面的目录,不要在cli目录中建工程。 使用 cd ../../ && mpreact init demo 创建工程
- 定位到 demo 目录下安装依赖npm i或yarn
- mpreact build 全量编译代码,build后面可跟参数, 如mpreact build:ali
- mpreact watch 增量编译代码并监听文件变化,watch后面可跟参数
- 用微信开发工具打开当中的dist目录,自己在source目录中进行开发
cd anu/packages/cli && npm link
cd ../../ && mpreact init demo
cd demo && yarn
mpreact watch //或 mpreact watch:wx 或 mpreact watch:bu 或 mpreact watch:ali
如mpreact watch:wx改成mpreact watch:bu, 再用百度开发者工具打开dist目录,则是这样
如mpreact watch:wx改成mpreact watch:ali, 再用支付宝开发者工具打开dist目录,则是这样
如果想编译快应用,则麻烦些,它需要敲更多命令
npm install -g hap-toolkit //安装快应用的hap编译器, 只需安装一次
mpreact init xxx // 初始化工程
cd xxx && npm i // npm i可以改成yarn, 安装nanachi的依赖
mpreact watch:quick // 编译代码
npm i // 这是安装快应用的编译器hap的依赖,
npm run build // 这是hap 的构建命令
npm run server -- --watch //或hap server --watch 这是hap 的打开远程服务,生成二维码让你用手机扫码查看编译后的app
还要在手机上装两个东西,详见这里
快速开始-文档娜娜奇提供的重要功能组件和模块,如何帮助开发者做到快速开发
提供了 @react, @components,@assets这几个别名,用法如 import React from '@react' 这样在很深的目录下,大家就不需要 import React from '../../../../ReactAli'这样写 @components指向components目录 @assets 则用在css, sass, less文件中指向assets目录
React.getApp(), React.getCurrentPage()方便大家得到当前APP配置对象与页面组件的实例
React.api 将对所有平台的上百个API进行抹平,API是wx, swan, my这几个对象,它们里面提供了访问底层的能力 如通信录,电池,音量,地理信息, 上传下载,手机型号信息等一大堆东西
React.api 里的所有异步方法,都Promise化,方便大家直接用es7 的async ,await语法
样式转译器,帮用户处理样式表中的rpx/px之间的转换,还有快应用一些样式BUG 处理。
为了保证跨平台,设计娜娜奇技术方案的重要原则和开发规范,哪些不支持
所有接口访问必须 使用React.api的方法,不要直接在wx, swan, my对象中取
React组件的只有render方法才能使用JSX,它们需要遵守一下规范,详见这里
样式方面,如何想兼容快应用,布局请统一使用flexbox, 不能使用display:block/inline, float, position:absolute/relative
娜娜奇如何和原生小程序兼容,以及其他有用的辅助功能或者工具
娜娜奇不与某一种原生小程序兼容,因为它要照顾4种小程序 如果你的目录名,样式不符合规范,我们在转译阶段会给出友好提示
快应用的文本节点要求放在text, a, option下,娜娜奇会在编译阶段自动对没有放在里面的文本包一个text标签。比如说<button>xxx<button> 我们会转译成<button><text>aaa</text></button>
快应用的标签必须写闭标签,比如<input />, 我们会转译成<input></input>
页面配置对象的许多配置项(如tabBar, titBar的配置参数,页面背景参数), 我们也进行了抹平,用户只需要以微信方式 写,我们自动转换为各个平台对应的名字,
在快应用中,是没有tabBar, 我们直接让每个页面组件继承了一个父类,父类里面 有tabBar, 令它长得与其他小程序一模一样
娜娜奇的官网地址为 nanachi
在开发娜娜奇的过程,我得到来自支付宝,百度,小米同学的支持,在此深表感谢。
我们新完成一个支付小程序,大家快来打开支付宝打码体验一下吧。
qr.alipay.com/s4x05547t0u… (二维码自动识别)