残酷的移动互联网竞争环境下，HTML5技术一直受到各方关注，“HTML5颠覆原生App”的争论也从未停止过，不管怎样HTML5生态的构建方兴未艾。不过对于移动开发者来说更关心的问题是如何低成本、周期短开发出体验效果好的App，所以当下用HTML5远比赌HTML5更现实。于是，一个一直被提及但是从没有占据过统治地位的概念又一次走进了移动开发者们的视野，那就是跨平台开发。

AD：WOT2015互联网运维与开发者大会热销抢票

目前国内外已经有很多基于HTML5的跨平台开发工具，你并不需要任何的原生应用编程经验，你只需要一些HTML的相关知识，懂一些CSS和JavaScript，运用工具中所提供的各种丰富的功能模块，便可在很短时间内完成App的开发而且让你的App具备完美的原生体验。

推荐几款跨平台工具

1、Appcelerator

Appcelerator的Titanium开发平台使开发者可以通过HTML、PHP、JavaScript、Ruby、Python等Web编程语言开发手机、平板和桌面的原生App。其优势在于它可以让用户轻松地访问超过300个API以及定位信息。

此外，Appcelerator提供针对特定行为或事件定制的统计。App的数据既可储存在云端，也可储存在设备上。

2、APICloud

APICloud是一款“云端一体”的移动开发平台，信仰“云端一体”的理念，重新定义了移动应用开发。APICloud为开发者从“云”和“端”两个方向提供API，简化移动应用开发技术，让移动应用的开发周期从一个月缩短到7天。APICloud由“云API”和“端API”两部分组成，可以帮助开发者快速实现移动应用的开发、测试、发布、管理和运营的全生命周期管理。

2、PhoneGap

PhoneGap是一个免费且开源的开发环境，使开发者可以开发出在Android、Palm、黑莓、iPhone、iTouch及iPad等设备上运行的App。其使用的是HTML和JavaScript等标准的Web开发语言。开发者使用PhoneGap进行开发，可调用加速计、GPS/定位、照相机、声音等功能。

PhoneGap还提供Adobe AIR App以及在线的培训课程，帮助开发者了解原生API并在他们自己的平台上开发移动App。

4、NativeScript

NativeScript是使用移动平台的JavaScript引擎来进行跨平台开发。逻辑部分自然无需多说，关键在于如何使用平台特性。NativeScript是通过反射得到所有平台API，预编译它们，然后将这些API注入到JavaScript运行环境，接下来在Javascript调用后拦截这个调用，并运行native代码。NativeScript是使用大量web开发的技巧来进行app开发，因为工具链和语言都非常熟悉受到了很多前端开发者的欢迎。

5、Kinvey

Kinvey同样是一个为移动应用开发者提供后台创建服务的平台。Kinvey强调加速移动应用开发与销售的“即取即用”理念。Kinvey的中间层与数据层均托管在多个云服务提供商处，包括Rackspace、Amazon与Microsoft。所有通过Kinvey存储的数据都会有四种方式备份：Amazon EC2、Windows Azure、Rackspace以及Kinvey自己的服务器，假如其中一两个出现了故障，用户的数据依然安然无恙。

总结：

关于HTML5和原生App的争论一直在继续，不论最后谁能取胜，开发者更关心App的开发速度和最终体验。合理的使用工具会让开发效率大大提升，甚至达到事半功倍的效果，希望能有一款适合您。

期待未来有一天，App开发可以像在纸上画画一样简单。

声明：IT之家网站刊登/转载此文出于传递更多信息之目的，并不意味着赞同其观点或论证其描述。

近些年来，随着h5和微信小程序的盛行，给广告业带来一抹新的绿。今天创新梦科技想就从专业的角度为大家分析下微信小程序和HTML5与之间的主要区别。

　　第一条是运行环境的不同。

　　传统的HTML5的运行环境是浏览器，包括webview，而微信小程序的运行环境并非完整的浏览器，大家注意，我这里写的是“非完整的浏览器”，有以下几个原因

　　小程序的开发过程中会用到HTML5相关的技术(并非全部)

　　小程序最后的发布上线需要微信审核，微信在不更新自身软件的情况下可以将小程序更新到自身软件内，这就联想到了React Native框架,并且已经有开发者在微信小程序的开发工具源码中发现使用了React和NodeWebkit库

　　官方文档中着重强调了脚本内是无法使用浏览器中常用的window对象和document对象(基于这一点，像zepto/jquery这种操作dom的库就被完全抛弃了)

　　所以我个人认为，小程序的运行环境很有可能是微信开发团队基于浏览器内核完全重构的一个内置解析器，针对小程序专门做了优化，配合自己定义的开发语言标准，提升了小程序的性能。

　　不过由于微信给开发者提供了开发工具，而开发工具中也内置了编程、调试、开发环境、发布于一身，我们也不用再探讨它的最终运行环境了，只要按照官方文档进行开发就可以了。并且从微信团队给开发者提供开发工具这一举动，让我联想到了苹果给开发者提供的X-CODE开发工具，可以想象微信的“野心”可见一斑

　　第二条是开发成本的不同。

　　这里我提出了一个问题，当我们面对一个HTML5 web开发需求时，我们需要考虑什么呢?抛去开发工具(vscode、sublimtext、Atom等)不谈，大到前端框架(Angular、react、vue、backbone等)、模块管理工具(Webpack 、Browserify 等)、任务管理工具(Grunt、Gulp等)，小到UI库选择、接口调用工具(ajax、Fetch Api等)、浏览器兼容性等都要我们一一考略，再不济用jqery插件写H5，也要在开发过程中去寻找合适的jquery插件来配合项目。尽管这些工具可定制化非常高，并且提高了开发者的开发效率，但我相信项目开发的配置工作已经消耗了不少精力，尽管大部分开发者都有自己的配置模板，但长久以来对于项目中使用的各种外部库的版本迭代、版本升级所产生的成本应该也不低。

　　而当我们面对一个微信小程序的开发需求时，我们需要考虑什么呢?微信团队提供了开发者工具，并且规范了开发标准，前端常见的HTML、CSS变成了微信自定义的WXML、WXSS，WXML中尽管全部是自定义标签，但官方文档中都有明确的使用介绍，相信上手应该是非常容易的;WXSS、JSON和JS文件中的写法稍有限制，但整体相差不多。在统一了这些标准之后，作为一个开发者，你会发现，自己只要专注写程序就可以了：

　　当需要调用后端接口时，调用发起请求API

　　当需要上传下载时，调用上传下载API

　　当需要数据缓存时，调用本地存储API

　　引入地图、使用罗盘、调用支付、调用扫码等等功能都可以直接使用

　　UI库方面，框架自然带有自家weui库加成

　　并且在使用这些API时，你不用再去顾虑浏览器兼容性，不用担心生产环境中出现不可预料的奇妙BUG，可见微信小程序的开发成本确实相比以往的web开发低很多。

　　第三条是获取系统级权限的不同。

　　微信小程序相对于HTML5 web应用能获得更多的系统权限，比如网络通信状态、数据缓存能力等，这些系统级权限都可以和微信小程序无缝衔接，也就是官方宣称的拥有Native App的流畅性能，而这一点恰巧是HTML5 web应用经常被诟病的地方，这也是HTML5的大多应用场景被定位在业务逻辑简单、功能单一的原因。

　　第四条便是应用在生产环境的运行流畅度。

　　这条无论对于用户还是开发者来说，都是最直观的感受。长久以来，当HTML5应用面对复杂的业务逻辑或者丰富的页面交互时，它的体验总是不尽人意，需要不断的对项目优化来提升用户体验。但是由于微信小程序运行环境独立，尽管同样用html+css+js去开发，但配合微信的解析器最终渲染出来的是原生组件的效果，自然体验上将会更进一步。

. 微信小程序组件的生命周期？

答案：

生命周期函数-onLoad: 页面加载

一个页面只会调用一次，可以在 onLoad 中获取打开当前页面所调用的 query 参数。

-onShow: 页面显示

每次打开页面都会调用一次。

-onReady: 页面初次渲染完成

一个页面只会调用一次，代表页面已经准备妥当，可以和视图层进行交互。

-onHide: 页面隐藏

当navigateTo或底部tab切换时调用。

-onUnload: 页面卸载

2 简单描述下微信小程序的相关文件类型

答案：

微信小程序项目结构主要有四个文件类型,如下

.json 后缀的 JSON 配置文件

.wxml 后缀的 WXML 模板文件

.wxss 后缀的 WXSS 样式文件

.js 后缀的 JS 脚本逻辑文件

3、app.json 是对当前小程序的全局配置，讲述三个配置各个项的含义

答案：

pages字段 —— 用于描述当前小程序所有页面路径，这是为了让微信客户端知道当前你的小程序页面定义在哪个目录。

window字段 —— 小程序所有页面的顶部背景颜色，文字颜色定义在这里的

tab字段—小程序全局顶部或底部tab

4.小程序的wxss和css有哪些不一样的地方

答案：

新像素单位 rpx

样式可直接使用import导入

5:小程序有哪些参数传值的方法

答案：

给HTML元素添加data-*属性来传递我们需要的值，然后通过e.currentTarget.dataset或onload的param参数获取。但data-名称不能有大写字母和不可以存放对象；

设置id 的方法标识来传值通过e.currentTarget.id获取设置的id的值,然后通过设置全局对象的方式来传递数值；

在navigator中添加参数传值。

6：小程序有哪些参数传值的方法？

答案：

一、给HTML元素添加data-*属性来传递我们需要的值，然后通过e.currentTarget.dataset或onload的param参数获取。但data-名称不能有大写字母和不可以存放对象

二、设置id 的方法标识来传值通过e.currentTarget.id获取设置的id的值,然后通过设置全局对象的方式来传递数值

三、在navigator中添加参数传值

7：如何提高微信小程序的应用速度？

答案：

一、提高页面加载速度

二、用户行为预测

三、减少默认data的大小

四、组件化方案

8.微信小程序与H5的区别？

答案：

第一条是运行环境的不同

传统的HTML5的运行环境是浏览器，包括webview，而微信小程序的运行环境并非完整的浏览器，是微信开发团队基于浏览器内核完全重构的一个内置解析器，针对小程序专门做了优化，配合自己定义的开发语言标准，提升了小程序的性能。

第二条是开发成本的不同

只在微信中运行，所以不用再去顾虑浏览器兼容性，不用担心生产环境中出现不可预料的奇妙BUG

第三条是获取系统级权限的不同

接系统级权限都可以和微信小程序无缝衔

9小程序获取场景值的方法

let options = wx.getLanchOptionsSync()

10 小程序onPageScroll方法的使用注意什么

由于此方法调用频繁，不需要时，可以去掉，不要保留空方法，并且使用onPageScroll时，尽量避免使用setData()，尽量减少setData()的使用频次。

11 小程序视图渲染结束回调

使用setData(data, callback)，在callback回调方法中添加后续操作代码

12小程序同步API和异步API使用时注意事项

像wx.setStorageSync这种以Sync结尾的API为同步API，使用时使用try-catch来查看异常，如果判定API为异步，可以在其回调方法success、fail、complete中进行下一步操作。

13小程序对wx:if 和 hidden使用的理解

wx:if 有更高的切换消耗。

hidden 有更高的初始渲染消耗。

因此，如果需要频繁切换的情景下，用 hidden 更好，如果在运行时条件不大可能改变则 wx:if 较好。

14.小程序简单介绍下三种事件对象的属性列表

基础事件（BaseEvent）

type: 事件类型

timeStamp：事件生成时的时间戳

target：触发事件的组件的属性值集合

currentTarget：当前组件的一些属性集合

自定义事件（CustomEvent）

detail

触摸事件（TouchEvent）

touches

changedTouches

15.小程序的双向绑定和vue的异同？

答案：

大体相同，但小程序直接this.data的属性是不可以同步到视图的，必须调用this.setData()方法！

16小程序页面间有哪些传递数据的方法？

答案：

使用全局变量实现数据传递

页面跳转或重定向时，使用url带参数传递数据

使用组件模板 template传递参数

使用数据库传递数据

17.小程序wxml与标准的html的异同？

答案：

都是用来描述页面的结构；

都由标签、属性等构成；

标签名字不一样，且小程序标签更少，单一标签更多；

多了一些 wx:if 这样的属性以及 {{ }} 这样的表达式

WXML仅能在微信小程序开发者工具中预览，而HTML可以在浏览器内预览

组件封装不同， WXML对组件进行了重新封装，

小程序运行在JS Core内，没有DOM树和window对象，小程序中无法使用window对象和document对象。

18.小程序WXSS和CSS的异同？

答案：都是用来描述页面的样子；

WXSS 具有 CSS 大部分的特性，也做了一些扩充和修改；

WXSS新增了尺寸单位，WXSS 在底层支持新的尺寸单位 rpx；

WXSS 仅支持部分 CSS 选择器；

WXSS 提供全局样式与局部样式