殘酷的移動互聯網競爭環境下，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 提供全局樣式與局部樣式