请选择 进入手机版 | 继续访问电脑版
 找回密码
 立即注册
搜索

技术分享 市场上唯一一款支持快应用的多平台转译框架nanachi探秘

2
回复
1881
查看
[复制链接]

3

主题

9

帖子

210

积分

 楼主| 2019-6-19 16:49:39 显示全部楼层 |阅读模式
本帖最后由 司徒正美 于 2019-6-20 10:58 编辑 nanachi(娜娜奇)是市场上唯一支持快应用的小程序转译框架。 众所周知,国内安卓手机的装机量是非常庞大,拥有十亿之众,基本上每部安卓手机都支持快应用,这么大的流量不利用起来就浪费了。然后,由于快应用的语法与其他小程序差异太大了,许多转译框架都没有支持快应用的转译。因此nanachi的出现是各大小开发者的福音。 在开发小程序与快应用的技术选型中,通常有三种选项。 一、是基于原生开发,这意味无法跨平台。每种小程序都有自己的语法与特殊的API,需要多个团队来维护多套代码,小公司是holdH5不住。 二、是基于H5开发,与APP的hybird开发一样,以webview加载H5页面,可以大大降低学习成本,我们只需要针对不同的平台做一些分支处理就行了。但是webview通常有许多功能限制,需要跳到原生页面执行操作,然后再回到webview。因此用户体验不太好。更要命的是,许多平台还是强烈希望推广自己的标准(毕竟招入大量人力物力开发了这套东西),不允许个人开发者使用webview。 三、就是使用转译框架,时下流行的转译框架有wepy, taro, mpvue,nanachi,都是一些大公司才能开发维护。 快应用主要问题有4个: 1,样式是基于纯flexbox布局,不能使用绝对定位与浮动(这是缺点也是优点吧,缺点让我们前端许多经验不能复用,优点是纯flexbox布局渲染性能超高,并且更易用原生实现,快应用本身就是一种原生APP); 2,标签存在严格的套嵌关系,比较致命的是y文本一定要放在a, span, text, option这4种标签内,否则抛错,你也不能text里面放text, span里面放span,让许多H5的编写套路都不能直接搬过来; 3,接口与微信小程序完全不一样,需要费很大力气来兼容; 4,功能严重不足,像微信小程序,只要在JSON中配置一下,就能实现titleBar, tabBar, 分享转发,滚动等功能,在快应用中,需要自己一一实现。由于上面这4点,吓走许多潜用开发者,导致了社区不够活跃。 图1中的蓝色线框,黄色线框,绿色线框都需要我们自己实现。
aa1.png
图1
我们公司在流量日益枯竭的今日,抓住了小程序/快应用的风口,在评估了几个开源框架之后,决定自己开发一套转译框架,实现对微信,QQ,头条,百度,支付宝,快应用与H5的全面支持。图2是我们框架的demo展示
aa2.png
图2
大家只要安装了 nanachi,输入几行命令就能看到这画面了。
``shell npm install nanachi-cli -g nanachi init aaa # aaa为项目名 cd aaa && npm i nanachi watch:wx # wx代表微信,ali代表支付宝, bu代表百度,quick代表快应用,tt代表今日头条,h5代表H5,qq代表QQ ```
安装详情见这里 https://rubylouvre.github.io/nanachi/documents/install.html 图3展示的是去哪儿模板。nanachi提供了4套模板,供大家快速上手各种小程序与快应用。去哪儿模板算是中等水平的项目,一共260个文件,涉及各种功能演示。
aa3.png
图3
如果觉得不够真实,可以体验一下我们公司的APP。目前我们公司的百度,支付宝,QQ,快应用都是用同一套代码。参看图4, 图5
aa4.png
图4
aa5.png
图5
我们公司业务众多,拥有几百个页面,使用了最新的分包技术才能将它们塞到4M的包中。 再说一下我们如何兼容快应用吧。 nanachi是以react方式编写业务代码的,JSX会抽取成ux文件的template部分,里面一些不支持的标签,我们偷偷替换成React组件(我们称之为补丁组件,https://qunarcorp.github.io/schnee-ui/index.html)。 由于快应用的页面没有titleBar, tabBar, 分享菜单,因此我们为每一个页面包裹了一个PagerWrapper组件(其标签名为anu-pager-wrapper),通过它被与相应的功能。这些是在转译时完成,用户不需要自己添加。
aa6.png
图6
快应用众多的API,是我们辛苦集成到ReactQuick.js中,以微信小程序的调用方式重写。图7是ReactQuick的源码。
aa7.png
图7
在开发过程中,我们也得小米快应用官方的支持。正是他们的配合,我们才得以顺利兼容某些微信小程序的特殊功能。 333.png 当然,现阶段快应用也有一些无法用nanachi直接抹平的问题,我们在nanachi官网上也给出解决方案了,如:
* 快应用的scroll-view兼容 * 快应用的同步Storage API兼容 * 快应用与小程序盒子模型的区别 * 快应用获取页面参数 * 快应用与小程序转发分享 * 快应用onblur * 场景值的兼容 * movable-area与movable-view的模拟
当然一个框架的完美离不开大家的参与,大家多用多试,才发现更多问题,给出多改进的意见。这样大家开发快应用才能更顺利。期待大家的反馈。 nanachi官方地址:https://rubylouvre.github.io/nanachi/index.html
回复

使用道具 举报

0

主题

4

帖子

20

积分

2019-6-20 15:52:44 显示全部楼层
不错,很实用
快应用,见未来!
回复

使用道具 举报

3

主题

9

帖子

210

积分

 楼主| 2019-10-31 10:24:59 显示全部楼层
官方送的手机到了,性能超好
aaa.png
aaa.jpg
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册