流行移动web技术发展与应用

Posted 2021-04-30 统天科技

移动web前端框架趋势：

1、基于React与响应式设计；

2、基于ionic与AngularJS；

3、微信小程序；

4、Google渐进式应用  PWA (Progressive Web Apps)。

 

移动web交互体验：

1、手势交互：支持下拉刷新，旋转，缩放，页面滚动渲染添加新数据，等等；

2、适配屏幕：通过媒体查询，rem网页根元素设置字体大小等响应式设计体验；

3、体验优化：通过服务端渲染、设置缓存优化初次体验，优化和减少API交互请求；

4、交互安全：全站HTTPS协议提升安全。

 

移动webApp 经典案例：

平安口袋银行APP：cordova+backbone.js

走客-旅游APP：ionic+phonegap

一倍半-跳槽专用APP：ionic+phonegap

可及返利APP：ionic+phonegap

Sworkit私人教练APP：ionic+phonegap

心情温度计APP：ionic+cordova/phonegap

AppRanks：phonegap+TPM

CNodeJs APP: phonegap+angularjs+ionic

 

一、基于ionic与AngularJS

Ionic是基于html5创建类似于手机平台原生应用的开发框架，通过SASS构建应用程序，提供了很多UI组件来帮助开发者开发强大的应用，以流行的原生移动开发SDK为蓝本，使用javascript MVVM框架和AngularJS来增强应用。提供数据的双向绑定，成为Web和移动开发者的共同选择，基于PhoneGap的编译平台，可以实现编译成各个平台的应用程序。HTML5移动app开发速度是很重要的，Ionic在最新的移动设备中表现非常卓越，运行非常流畅。

Ionic可以说是AngularJS移动端解决方案，Ionic利用AngularJS创造出一款最适合开发丰富而强大应用的框架，它的核心架构是为开发专业应用创建，和AngularJS完美融合。

AngularJS2 发布于2016年9月份，它是基于ES6（ECMAScript 6.0）来开发的，是一款开源JavaScript库，由Google维护，用来协助单一页面应用程序运行。

 

二、基于React与响应式设计

React 起源于Facebook的内部项目，是一个用于构建用户界面（UI）的 JAVASCRIPT 库，拥有较高的性能，代码逻辑非常简单，全新思路的前端UI框架，完全接管了UI开发中最为复杂的局部更新部分，擅长在复杂场景下保证高性能，同时引入了基于组件的开发思想，可组合，可重用，可维护，可测试，提高开发效率。

声明式设计：React采用声明范式，可以轻松描述应用。

高效：React通过对DOM的模拟，最大限度地减少与DOM的交互。

灵活：React可以与已知的库或框架很好地配合。

组件：通过 React 构建组件，使得代码更加容易得到复用，能够很好的应用在大项目的开发中。

单向响应的数据流：React 实现了单向响应的数据流，从而减少了重复代码，比传统数据绑定更简单。

 

三、微信小程序

微信小程序是腾讯微信团队推出的基于微信生态的应用号，是一种跨平台，媲美原生App操作体验的web应用，它拥有，即用即走、离线存储、跨平台等特点。

Page Frame

Web应用在微信下实现如原生应用般体验，主要靠Page Frame，Native会预先加载一个WebView，当打开小程序落地页面的时候，就直接通过下载CDN上的资源以及数据渲染页面，请求数据则局部刷新，页面返回直接history弹栈，退出小程序，View状态并不会销毁。

MVVM

微信小程序的前端架构设计，以及开发模式，充分参考了Vue、React这一类MV*的前端开发框架，模块化思想都是现在前端框架必备基础。

组件

微信小程序框架与其他开发框架不同，比如vue、react都是只管安心做好框架，UE层面的套件库都由使用者来贡献，微信小程序直接提供了在小程序开发过程中常用的UE组件，小程序的组件遵循web component标准，并使用polymer框架实现web component。视图容器、表单组件、导航、媒体组件、地图组件、画布这些基础的元素级组件，以及分享、登录、支付等功能性组件。

API

在appservice层，微信提供了N多API，其实就是jsbridge，用于提供js访问native的能力和通道。

 

小程序必须通过扫描、搜索等方式才能找到：

（1）线下扫码。

（2）微信搜索。

（5）历史记录查找，在微信客户端“发现-小程序”列表里会保留历史记录。

 

小程序新增功能：

突破1M大小限制：解决小程序拓展问题，在小程序上添加更多功能。

文件操作功能：场景应用在图文修改上。

网络状态优化：对网络切换判定，有效节省在没有WIFI场景下的流量，用户进入商家店内，小程序自动连接商家WIFI，场景应用深入生活。

重力感应：支持横向查看信息，摇晃切换所需的界面和功能。

消息模版：支持消息推送，解决用户在信息触达的问题，第一时间推送小程序通知信息。

WebSocket通讯：不同于大部分APP使用HTTP无状态协议进行通讯，小程序使用了websocket通讯技术，该技术可以实现双向点对点实时通讯，可以催生很多应用场景，例如，小程序直接给共享单车的车锁发指令，而不需要经过云端。小程序重新定义许多异于寻常的商业场景，进而给用户带来极佳的服务体验。

 

四、Google渐进式应用  PWA (Progressive Web Apps)

渐进式Web应用程序是下一代具有互动性的网络app，它们提供了一个全新的用户体验，由于谷歌被索引页面的固有局限性，在开发这些应用程序接口时，确保正确编码以被识别，渐进式Web应用程序可以补充现有的网站，结合了原生与web应用程序的优势，具有以下特点：

应用程序不需要安装；

不依赖网络连接，支持离线应用；

提供类原生APP体验；

自带响应式用户界面；

持续更新，通过Service Worker 让应用程序保持最新更新；

可以安装到桌面。