独家饿了么前端团队快应用背后研发实践

Posted 2021-04-30 GitChat精品课

作者说：

饿了么是一年前开始参与内测尝试开发快应用的，看着快应用平台一步一步的走过来，发展的越来越好。目前来说快应用开发条件已经比较完善，本次分享，为大家介绍前端开发人员眼中快应用的开发与使用 Vue.js 开发的一些异同，以及通过实践积累出的一些方法的正确使用姿势。

面向的场景

目前快应用在饿了么中的用户场景为：

用户在「应用商店」、「浏览器」、「自带搜索助手」搜索饿了么，出现快应用的条目，用户点击饿了么快应用，无需安装，直接打开快应用。同时会提示用户是否生成桌面图标，并且用户可以收到来自服务进行的推送，体验和原生 App 相差无异。

开发工具与条件

开发快应用的前提是拥有一台九大厂商品牌之一的安卓手机，然后注册快应用联盟账号，接着与该手机对应品牌的开发者账号进行绑定，然后照着快应用的开发文档进行开发，最后上传至快应用官网进行测试审核并分发。

目前快应用还不能实现自动统一分发到各个平台去审核。如果想要在每个品牌的应用市场都上架自己的快应用，就需要每个平台的开发者账号都要去填写开发者信息，1-2工作日审核，然后再上架自己的快应用。

与前端的对比

页面布局

快应用整体基于 Fex 布局：

• display 默认 flex，支持的参数为 flex | none；

• position 默认 none，支持的参数为 fixed | none；

• 宽、高、长度值只能使用 px 或 %。

页面标签

如果要将原生 html 布局迁移至快应用，需要注意的是快应用中没有 H1~H6 标签，同时一些 HTML5 标签例如<header> <footer> <article> 等都要做改动。

另外文本不能单纯放在 <div> 中，只能放在 <a> <span> <text> 标签中。

使用时要注意好嵌套关系，比如 <a> 标签的子组件只支持 <span> 标签，<text> 标签的子组件只支持 <a><span>。

<img> 图片标签在快应用中用 <image> 标签替代。

<rating> 是原生 HTML 没有的，是用来显示星级的组件，显示星级在饿了么 App 中处处可见，这个功能非常实用，省去了我们手写去实现的时间。

Storage

快应用中打包后是一个 .rpk 程序，因此并不需要 sessionStorage。在快应用中，若想要做本地存储，可以直接使用 Storage 方法：

例如读取存储的用户信息，见下面代码。

storage.js：

import storage from '@system.storage'const User = () => {  return new Promise((resolve, reject) => {
    storage.get({
      key: 'USER',
      success: (currentUser) => {
        currentUser = currentUser && JSON.parse(currentUser)        if (!currentUser) {
          currentUser = undefined
        }
        resolve(currentUser)
      },
      fail: (err) => {
        reject(err)
      }
    })
  })
}export default {
  User
}

Home.ux：

import { User } from '../Common/service/storage'User().then((currentUser) => {  this.currentUser = currentUser;  this.loadData()
})

通过 storage.get、storage.set、storage.clear、storage.delete 可以随心所欲的操作存储我们的数据了。

与 Vue.js 的对比

使用过 Vue.js 的同学看了快应用的官方文档后会发现快应用的的 API 大量的借鉴了 Vue.js，甚至一些方法名也是一样的。虽然如此，但是二者一个是基于手机平台的新型应用状态，一个是构建用户界面的 Web 应用框架，在实际开发中还是有很多不一样的地方，下面简单介绍总结一下两者的异同。

开发环境及工具

快应用的开发环境对 NodeJS 的版本要求很严格，官方推荐安装 v6.11.3， 如果开发者本地的 NodeJS 版本过高，快应用的 Toolkit 工具安装时会报错，官方给的解释是：内部 ZipStream 实现与 node-archive 包不兼容。安装完 Toolkit 之后，也可以像 Vue.js 一样通过脚手架工具快速生成一个项目模板：

hap init <ProjectName>

除此之外，快应用还需要在手机上安装调试器和平台预览版，用来在开发过程中实时预览界面和开发调试平台新功能，最后可以按照官方的文档跑起这个文档项目。本地开发快应用推荐使用 VSCode，因为可以在 VScode 里下载官方推荐的 Hap Extension 插件。

而对于 Vue.js 而言，所有支持 Language Server Protocol 的编辑器都适合 Vue.js。因此主流的前端编辑器都支持 Vue.js 语法开发。

相对比而言，Vue.js 的对开发环境和开发工具的限制更小一些。但是一个是新起的快应用，另一个是有四年时间积累的 Vue.js ，自然不能这么去对比，快应用的开发条件的完善目前只是时间问题。

模板

模板定义

快应用和 Vue.js 都是使用 <template> 标签来定义模板，小程序也是如此。但是 Vue.js 中的模板的定义类型会更多一些。

自定义组件在模板中的引用

快应用中在模板中直接通过 import 进行引入，例如：

<import name='comp' src='./comp'></import><template>
  <div>
    <comp prop1='xxxx' onevent1="bindParentVmMethod1" @event-type1="bindParentVmMethod1"></comp>
  </div></template>

它也可以通过 (on|@) 语法绑定自定义子组件上的事件，Vue.js 是将自定义组件注册到 components 中再去引用。

生命周期

快应用的常用的生命周期如下：

生命周期	描述
onInit	可以开始使用页面中的数据
onReady	开始获取DOM节点（如：this.$element(idxxx) ）
onShow	页面被切换重新显示时会被调用 onShow
onHide	页面被切换隐藏时调用 onHide
onDestroy	页面被销毁时调用

‍‍通过描述，我们可以用实践总结出一些这些生命周期实际的使用场景。

onInit

• 获取或修改 localstorage 中存储的内容；

• 获取全局对象及方法 例如：this.app. a p p . data.place.address；

• 获取请求接口返回的数据。

onReady

• 组件自定义事件的触发，例如：this.$dispatch('shopMenuReady')。

onShow

onHide

场景与 onShow 相反

onDestroy

该页面某个行为使用了 setInterval() 方法，离开该页面时在 onDestroy() 中 clearInterval 保证下次进入时仍是初始化的状态。

在 Vue 中生命周期除了上面的 onShow 和 onHide，其他差别不大，对于 Vue.js 中 onShow 可以用 watch 去监听路由变化来上述 onShow 中的场景，例如：‍‍

  watch: {    // 如果路由有变化，会再次执行该方法
    $route: 'initPageData'
  },  methods: {
    initPageData () {    // do something
    }
  }

数据绑定

内容绑定，两者采用的都是 Mustache 语法（双大括号），两者都可以在内容中插入 HTML。

快应用:

<text>{{ title }}</text><richtext>{{ message }}</text>

Vue.js:

<div>{{ title }}</div><div v-html="message">

条件与列表渲染

快应用的条件渲染有 if/elif/else 这3个相关指令，用于控制是否增加或者删除组件：

<text if="{{conditionVar === 1}}">if: if条件</text>
<text elif="{{conditionVar === 2}}">elif: elif条件</text>
<text else>else: 其余</text>

同时还有 show 指令，用于控制组件的显示状态，并不会从 DOM 结构中删除：

<text show="{{showVar}}">show: 渲染但控制是否显示</text>

列表渲染：

 <div class="city" for="city in cities">
  <text>城市：{{city.name}}</text></div>

Vue.js 的条件渲染：

<div v-if="type === 'A'">
  A</div><div v-else-if="type === 'B'">
  B</div><div v-else-if="type === 'C'">
  C</div><div v-else>
  Not A/B/C</div>

show 指令：

<h1 v-show="ok">Hello!</h1>

列表渲染：

<li v-for="todo in todos">
  {{ todo }}</li>

两者从使用逻辑上来说几乎没有什么区别，只是写法略有不同，但是快应用中增加了一个组件 <block>，可以使用 <block> 实现更为灵活的“列表/条件渲染”。

<block> 是一个仅表达逻辑的组件，并不会在页面渲染中生成 DOM 节点，这个可以说是很得人心。Vue.js 里面也有一些内置的不会产生 DOM 节点的组件，例如 <component>、<keep-alive>、<transition>、<transition-group>、<slot>。简单举个例子， 使用 Vue 保留的<component> 元素，将多个组件动态地绑定到 <component> 元素的 is 属性上。

<template><component :is="isSignedIn ? 'home' : 'welcome'"></component></template>

<script>import Vue from 'vue'import Home from './home.vue'import Welcome from './welcome.vue'export default Vue.extend({    components: {
        Home,
        Welcome
    }
})
</script>

在 Vue.js 中只有上述几个内置组件，使用时组件自身不产生 DOM 节点，在除了这几种内置组件之外的需求我们只能在循环块的外面加一个 <div> 去用 v-if 来判断循环块的显示隐藏，但是有时候父 <div> 可能会对内部块的样式带来不好的影响，我们还要在父 <div> 加上一些样式来消除该影响，同时也让 DOM 数层级会变得沉重冗余。但是有了 <block> 组件就很开心了，需要隐藏这个块，直接在外围加 <block> 就好了，渲染出来的 DOM 清爽干净。

属性的获取

快应用中也有 event，可以通过点击事件来传入相应的函数，通过打印 log，可以看一下具体包含什么：

<input id="test-link" class="link" data-detail="点击这里" @click="handleClick" type="button">去点餐</button>

打印出来的信息：

{    "type": "click", 
    "target": {        "ref": "5", 
        "type": "input", 
        "attr": {            "type": "button", 
            "dataDetail": "点击这里", 
            "id": "test-link"
        }, 
        "style": { }, 
        "event": [            "click"
        ]
    }, 
    "timestamp": 1522837358823}

通过 event 我们可以发现 target.attr.id 就是该元素的 id，在 event 中我们还可以看到定义的 data-detail 在 target.attr 中出现了。可见快应用中也可以自定义元素属性参数值。这样子就可以利用这个 target.attr 做一些事情了，比如我们想获取这个按钮上的文本，可以在 input 标签上加入 data-name="去点餐"，那么就可以将其绑定到 attr 中，我们可以通过 event.target.attr.dataName 去获得这个按钮的名字。但是这并不是被快应用中所推荐，这样使用，控制台会有报错提醒：

ERROR: 组件 `input` 不支持属性 `data-detail`，
支持的属性有 [type, checked, name, value, placeholder, id, style, class, disabled, if, elif, else, for, tid, show]

Vue.js 支持通过 ref 属性来访问其它组件和 HTML 元素。并通过 this.$refs 可以得到组件或 HTML 元素的上下文。在大多数情况下，通过 this.$refs来访问其它组件的上下文同样也是不被 Vue.js 所推荐。

事件绑定

快应用中支持的事件有：

名称	参数	描述
click	-	组件被点击时触发
longpress	-	组件被长按时触发
blur	-	组件获得焦点时触发
appear	-	组件出现时触发
disappear	-	组件消失时触发
swipe 正式版本可用		组件上快速滑动后触发

使用的时候使用 on 或者简写 @ 绑定事件，例如 ：

<a @click="handleClick">开始</a>

这种方式与 Vue.js 也很相似，不过 Vue.js 额外提供了事件修饰符，可以阻止一些事件的传播等，例如：

<!-- 阻止单击事件继续传播 --><a @click.stop="handleClick">开始</a>

事件监听

快应用的事件监听与 Vue.js 相似，都是使用 $on()、$off $emit() 去监听，移除，触发事件，但是还是有一些区别。

监听原生组件事件

监听快应用的原生组件事件就用到了我们上面所说的提过的 event 的 target 来获取当前组件的信息， 例如用户选择取餐人的性别功能：

阅读全文请扫描

下方二维码，

还可以加入读者圈与作者聊天~：