整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

如何从HTML5快速转型快应用?

、引言

2018年3月份,由小米,中兴,华为等10家厂商成立了快应用联盟,共同发布了快应用的标准。 自此我们可以采用一套标准去开发应用,而无缝的运行在各个手机厂商上。一次开发,一次上传,自动分发到所有联盟厂商的设备。根据快应用官方的说法,快应用官方是采用前端的技术栈来开发的,这篇文章以一个前端开发者的角度,来介绍怎么开发快应用,快速入门快应用的开发。

1.什么是快应用

  • 快应用是基于手机硬件平台的新型应用形态,标准是由主流手机厂商组成的快应用联盟联合制定;
  • 快应用标准的诞生将在研发接口、能力接入、开发者服务等层面建设标准平台;以平台化的生态模式对个人开发者和企业开发者全品类开放;
  • 快应用具备传统APP完整的应用体验,无需安装,即点即用。

2.快应用技术特点

  • 采用前端技术栈,运行和开发效率高,学习成本低,代码可以复用;
  • 原生渲染能力,功能完备,体验等同于应用,资源消耗小。

从上面我们可以了解到:

1. 快应用不是HTML5,但是可以用前端已有技术栈直接上手开发;

2. 快应用是原生渲染,有着比H5更加完备的功能及原生体验;

3. 快应用即点即用,无需安装。

二、快应用 vs HTML5开发

首先,我们来回顾一下,在web项目中是怎么进行开发的?

简单的说下,可以分为以下9个步骤:

  • 拿到PSD设计图
  • 切图
  • 将PSD 转成html
  • 写JS业务逻辑
  • mock数据,自测
  • 与后端联调
  • 提交测试
  • 上线
  • 迭代与优化

如下图所示:

做过前端的同学对这个步骤应该很熟悉了,快应用的开发步骤和这差不多,主要有2点差别,我们来比较一下:

  • html5开发是基于浏览器的,直接写完后在浏览器下就可以运行,看效果。但是快应用开发是基于nodejs环境的,所以我们开始需要搭建一下开发环境;
  • 在将PSD转成html的时候,快应用提供了一个脚手架,当然html5的一些项目里面也有脚手架,比如vue,react项目,官方都提供了一个脚手架,方便开发者进行开发。

如下图所示,下面是快应用的开发过程:

下面从 搭建环境,hap-toolkit的使用,静态页面书写(PSD转成html),js业务逻辑的书写,调试这5个方面来说说如何开发快应用。其他的步骤都是html5开发常见的步骤,和html5一样,直接迁移过来就行。

1.搭建开发环境

快应用开发是基于前端技术栈的,官方团队提供了基于nodejs的开发环境,可以参考官网的详细教程。

主要是:

  • nodejs(推荐 node 8以上版本)
  • hap-toolkit 编译工具。
  • 快应用调试器和快应用预览版(方便调试和查看效果)

当然快应用官方也提供了IDE,也可以直接安装一个IDE。

2.hap-toolkit的使用

安装好hap-toolkit后,可以在控制台输入hap -v 看看当前的版本。

当前的最新版本是0.1.1

下面是hap-toolkit的一些常见用法

具体可以参考:

https://doc.quickapp.cn/tools/toolkit-tools.html

3.静态页面书写

快应用提供了组件和指令,方便PSD转化成html。

01.组件

快应用中组件与Vue中组件类似,一个快应用,可以组织为一个嵌套的组件树,如下图所示:

组件分类:

  • 原生组件
  • 自定义组件

当一个页面的业务逻辑变得复杂时,就需要将页面拆成多个模块,完成解耦。所以,快应用提供了自定义组件的能力,定义自定义组件与开发页面一致。

(1)text、div等为原生组件,由各平台 Native 底层渲染;

(2)自定义组件是一个开发者编写的组件,使用起来和 Native 一样,最终按照组件的<template>来渲染,页面也是一种自定义组件;

(3)自定义组件比页面组件的不同之处在于多了一个props属性,用于声明该组件可接受的外部数据传递,props是一个数组,数组中每个元素是暴露的属性名称,如果属性名称使用驼峰定义,如:prop2Object,那么在外部传递数据时请使用-连接,如:prop2-object;

(4)引入自定义组件的方式为通过 <import> 标签引入,如: <import name="comp-part1" src="./part1"></import>;

(5)父子组件之间可以通过事件进行通信,兄弟组件之间通过 Publish/Subscribe 模型来完成通信,详情请见文档。

02.指令

框架指令是框架为组件定义的特殊属性,以及框架提供的特殊组件,用于自定义页面DOM结构渲染逻辑。

指令主要包含:

注意:

(1)for 循环 自定义变量表示 for 指令的数组索引和数组元素时,变量名不可以用$或_开头

(2) if/elif/else 节点必须是相邻的兄弟节点

4.JS业务逻辑的书写

快应用的js是采用es6语法标准的,支持es6的特性。

这里主要讲2个方面:生命周期和事件机制

01.生命周期

生命周期概念为现代前端开发的重要基础,快应用里,页面的生命周期指的也就是ViewModel的生命周期,整个页面生命周期如下:

APP 中可以同时运行多个页面,但是每次只能显示其中一个页面;这点与纯前端开发,浏览器页面中每次只能有一个页面,当前页签打开另一个页面,上个页面就销毁了。

02.事件机制

与html5一样,快应用里面也提供了事件机制。

  • on用于监听自定义事件;off移除对应的事件监听;
  • $emit()、 $dispatch()、 $broadcast()等触发事件,其中$dispatch()为向上传递,$broadcast()为向下传递;
  • 原生组件支持一系列事件,如通用事件、组件专有事件,通过on+事件名称作为组件属性,来监听事件 (如: focus事件,可以用 onfocus 属性监听)。

5.调试

不同于传统前端开发,快应用运行在厂商联盟的手机上。因此,官方提供了调试工具。

开发者可通过快应用调试器、hap-toolkit 的远程调试命令 、chrome devtools 调试界面,来调试快应用。

快应用调试目前支持 chrome devtools 中的elements, console, source, network等模块。

使用chrome devtools进行调试

三、性能优化

性能优化是前端永恒的主题

性能优化包括两个大类:

  • 通用的解决方案,这类具有普适性;
  • 与具体组件结合的解决方案,如:组件级别的懒加载,甚至利用组件本身特性完成优化。

建议开发者了解性能优化的常见方案,提升应用性能

1.简化ViewModel的数据

在ViewModel的定义中,属性public、protected、private 主要承担数据驱动的数据定义与改造功能,会对赋值的数据中每个属性进行递归式的定义。因此,属性个数的定义越少越好,尤其是数组类型数据,建议过滤不需要用到的对象属性。

示例如下:

如果页面仅需要用到 list 中每个 item 的 userId, orderName 属性的话,则仅赋值这两个属性到ViewModel数据中,过滤掉非相关属性。

// 模拟fetch请求返回的数据

const orderList = [

{

userId: '123',

orderName: 'XX产品',

userName: '张三',

shoppingList: [

{

productId: '001',

productLink: 'http://xxx',

productShop: {

ownerId: '2390',

ownerName: 'XXX店铺'

}

}

]

},

{

// ...

}

]

export default {

private: {

list: []

},

onInit () {

// 返回页面中需要的对象属性,过滤无用的对象属性

this.list = orderList.map(item => {

userId: item.userId,

orderName: item.orderName

})

}

}

2.合理使用后代选择器

框架支持 CSS 中的后代选择、支持 less 预编译,方便开发者开发,提升代码可维护性。然而,过多的使用后代选择器,也会在节点匹配上带来性能损耗,尤其是当一个节点满足多个选择时。

优化建议如下:

  • 避免使用组件名称(tag 标签名称)作为后代选择的最后一项匹配规则,如: .doc-page #shop text { ... };否则每个 text 组件渲染时都会遍历匹配一次;
  • 减少后代选择的层级数量,层级越深,单次匹配耗时越长,如:.class1 .class2 .class3 .class4 .class5 .class6 { ... };
  • 后代选择中最后一条匹配规则的定义名称尽量唯一,如:.doc-page #shop .shop-item .shop-name-full { ... }。

3.使用懒加载

懒加载是一项通用的优化手段,传统 H5 页面中的图片懒加载,指的是页面即将滚动到屏幕可视区域时,才加载资源,渲染页面。

在框架中,也可以使用懒加载技术:为了加快页面可视区域的渲染,可以通过指令或者事件触发等手段推迟不可见区域的渲染。

四、参考文档

  • 快应用开发教程
  • https://doc.quickapp.cn/tutorial/
  • sample项目
  • https://github.com/quickappcn/sample

随着主流浏览器对HTML5的不断支持和完善,越来越多的开发者开始使用HTML5开发各种功能强大的web应用,可以说HTML5正在引领着互联网新革命。HTML5的火爆,使得HTML5成为了仅次于Java和Python开发的高薪职位,为了能够更快跨入高薪大门,以下就跟着千锋武汉HTML5培训小编简单来了解下HTML5从入门到精通应学习的内容。

想要学习HTML5,首先应该来了解下HTML5的特征有哪些?

1、本地存储。基于HTML5开发的网页APP拥有更短的启动时间,更快的联网速度,这些全得益于HTML5APP Cache,以及本地存储功能。

2、实现多媒体更加简单。利用HTML5的和非常方便的在网页上添加视频和音频,不需要很复杂的代码,就能打造一款功能齐全的HTML5播放器。

3、三维图形和动画。HTML5的3D引擎却可以更方便的实现3D效果,而且更加逼真。

4、CSS3的运用。CSS3提供更多的CSS属性,可以做更丰富的渲染效果。

HTML5可以实现哪些功能呢?

1、一次编写,随处部署。HTML5可以在多种设备上运行,这是其他方式都无法做到的。

2、在互联网中分享。HTML5应用都有一个URL,因此它可以在互联网中被随意分享,并且在搜索时即可被找到。

3、多厂商标准,建立在协议之上。HTML5是众多公司努力的结果,没有一家厂商可以左右它的方向。

4、适用于多种环境。HTML5应用可以使用交互式设计来提供最佳体验,而不需要更改代码。你可以从桌面到手机到平板电脑无缝进行切换,而无需重复安装不同的应用。

HTML5基础内容了解之后,那么HTML5的前端技术也是必备的,其中包括:CSS、HTML、DOM、js、Ajax,jquery,Vue,jquery- mobile,zepto等,在掌握这些技术的同时,还要清楚地了解它们在不同浏览器上的兼容情况、渲染原理和存在的Bug。这是前端工程师的最核心技能,是专做页面效果的技术。如果想更深条理的做好前端开收,那就需要学习和了解更多的东西,比如一些热门的框架backbone,angularjs 等;nodejs近几年也越来越水了,同样需要学习。

学习HTML5开发技术,想要入门到精通,以上知识内容和技能掌握是必备的。HTML5的发展如日中天,只要你有足够的热情和兴趣,并且肯努力,学好HTML5没有任何问题。所以,你还在犹豫什么,赶快来学HTML5吧!

莓BB10系统作为目前官方商店仍在运行的小众系统之一,真的是非常难得。尤其对于一个关注小众系统的码农掌叔来说,更是弥足珍贵。掌叔曾经在BB10系统上开发过2个应用,上架官方商店的有一个。所以在开发以及应用发布的过程中也积累了一点点的经验,准备写成系列教程与其他小伙伴们的分享。如果你手里正好有黑莓手机,又有想亲自给它开发一些应用的想法,那么来吧,跟随掌叔一起,把代码写起来!

对于BB10上应用的开发,目前的有三种路径选择,一种是用C++写原生应用,一种是开发Android应用然后在黑莓的虚拟机上运行,还有一种就是利用Cordova采用HTML5技术来写。这三种开发路径就难易度上来说,掌叔认为最后一种方法最为简单,上手的成本比较低。同时因为跨平台的原因,开发的应用还能在WP、Andorid、iOS上运行。所以本系列教程掌叔就以最后一种开发方式为讲解内容。

今天我们先来看一下怎么配置一个开发环境。

1、首先去黑莓官网下载安装BlackBerry Native SDK。打开刚装好的Momentics IDE,会提示要下载SDK,这时候电脑接上黑莓bb10手机,然后选择Connect a BlackBerry 10 device

下一步,输入手机密码,注意这一步一定要开启手机的开发者模式。

下一步选择API级别,默认就好,点击Install。

开始下载了。

然后我们进入安装目录bbndk双击里面的bbndk-env_10_3_1_995.bat文件它会帮我们处理好系统环境的设置。

2、安装完之后下一步我们来创建bbidtoken.csk令牌 首先我们要先创建一个黑莓开发者账户,这里掠过开发账户申请流程,我们假设看到这里的同学已经创建好了自己的黑莓开发者账号。访问黑莓网站用你的账号登录

进入这个界面开始创建令牌,这里需要输入一个6至8位的密码。为了好记可以输入你黑莓开发者账号的密码。

点击“获取令牌”之后浏览器就会自动下载一个bbidtoken.csk文件,根据页面提示我们将这个文件复制到%HOMEPATH%\ AppData \ Local \ Research In Motion这里。

然后打开一个命令行窗口输入:

C:\bbndk\host_10_3_1_12\win32\x86\usr\bin\blackberry-keytool -genkeypair -storepass 123456 -author iniche

执行成功后会在刚才令牌那个文件夹里生成一个author.p12文件。123456替换成你令牌的密码,iniche替换成你要的令牌作者名称,最好是英文名称。

接下来我们来安装cordova,首先要先安装好nodejs,我们可以到nodejs的官网去下载,nodejs有安装包,安装很简单,这里就不再赘述了。当然注意一下版本,掌叔用的是8.2.1版本的。

装好nodejs之后我们打开一个CMD命令行窗口,在里面输入npm install -g cordova@6.1,电脑开始自动安装cordova需要文件,过一会就会提示安装完毕。 一切都装好之后下面就让我们来创建一个项目吧。

依次在命令行窗口输入如下命令:

$ cordova create hello com.example.hello
$ cd hello
$ cordova platform add blackberry10
$ cordova build

如果一切顺利的话就能看到bar文件打包成功的提示,如下图。

安装包已经打包成功了,接下来我们把应用部署到我们的手机里吧。

首先看一下我们手机的PIN码是多少,方法是系统设置-关于-类别选硬件。然后把PIN码记下来。然后把手机用USB线和电脑连接,在手机上进入安全和隐私-开发模式,打开开发模式。这里有一个IP地址我们也记下来。

下面我们在手机上安装调试令牌,并且安装应用。输入cd platforms\blackberry10\cordova回车切换到这个文件夹。然后输入run.bat --device --keystorepass mypassword,mypassword要替换成你令牌的密码。执行成功后就会在手机里安装调试令牌,并且自动帮你把刚才的hello项目安装到你的手机里了。一切正常话,应用汇自动启动,如下图这样: