娜娜奇全面支持微信/百度/支付宝小程序与快应用

2,383
原文链接: zhuanlan.zhihu.com

娜娜奇之前又叫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

如何使用

  1. git clone git@github.com:RubyLouvre/anu.git 或git clone github.com/RubyLouvre/…
  2. 命令行定位到packages/cli目录下,执行npm link 如果之前装过要先npm unlink
  3. 然后定位到外面的目录,不要在cli目录中建工程。 使用 cd ../../ && mpreact init demo 创建工程
  4. 定位到 demo 目录下安装依赖npm i或yarn
  5. mpreact build 全量编译代码,build后面可跟参数, 如mpreact build:ali
  6. mpreact watch 增量编译代码并监听文件变化,watch后面可跟参数
  7. 用微信开发工具打开当中的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… (二维码自动识别)