HTML5.dcloud.io-stream-app

dcloud.io提出的Stream App

 

本文僅僅是關於dcloud.io提出的SteamApp初探，所有內容請參考其官網。 

 

1. Application promotion by scaning QR Code

傳統方式: 1. 掃描二維碼, 跳轉App Store/Market  2.下載App  3.啟動App

StreamApp方式: 1. 掃描二維碼 2.下載 & 啟動 (僅Android平台 360手機助手)

 

2. HTML5 Plus

HTML5 Plus 文檔

http://www.html5plus.org/doc/

 

2.1 What's HTML5 Plus?

HTML5 Plus是一套HTML5的擴展規范。該規范可參考 http://www.html5plus.org/doc/h5p.html

HTML5 Plus規范包括的能力有 Ref[5.2]:

Accelerometer, Audio, Barcode, Camera, Contacts, Device, Downloader, Events, Gallery, Geolocation, 

IO, Key, Maps, Messaging, NativeObj, NativeUI, Navigator, OAuth, Orientation, Payment, Proximity, Push,

Runtime, Share, Speech, Statistic, Storage, Uploader, Webview, XMLHttpRequest, Zip

   

 

2.2 Native.js

一種通過js調用幾十萬原生API的技術。

同時HTML5 Plus Runtime還實現Native.js, 支持Android/iOS。

Android: http://www.html5plus.org/doc/zh_cn/android.html

iOS: http://www.html5plus.org/doc/zh_cn/ios.html 

 

2.3 HTML5 Plus Runtime

HTML5 Plus Runtime實現Native.js, 閉源的。

Maybe: 通過擴展webkit來實現。

 

 

3. mui

3.1 What's mui?

mui是一個前端框架, 依賴於HTML5+。

開源

mui包含JavaScript, CSS, Font, Icon

輕量，體積小

基於ratchet (http://goratchet.com/, Build mobile apps with simple HTML‚ CSS‚ and JS components.)

 

 

mui github

https://github.com/dcloudio/mui 

 

mui文檔

http://dev.dcloud.net.cn/mui/ui/ 

 

4. HTML5 Plus SDK

封裝HTML5 Plus(H5+) Runtime得到的HTML5 Plus SDK，主要應用於：

A: 使用H5+ SDK進行本地打包

HBuilder支持雲端打包, 包的大小限制為40M以下。

B: 原生代碼來擴展H5+ Runtime的能力

C: 集成SDK到已有的App Project中。替換原有的webview 或者 運營HTML5 Plus App。

 

集成方式	應用場景
Widget插件	在現有應用的基礎上使用HTML5 Plus SDK顯示一個手機端的HTML5 Plus APP
Webview	顯示一個支持HTML5 Plus擴展能力的WebView

 

 

 

 

 

4.1 Android Platform 

SDK zip: 36M

SDK包含: assets, libs, res, src

 

SDK中包含的lib, 所有的lib有16M。

libs包含的庫

AMap_3DMap_V2.4.1.jar
AMap_Services_V2.4.0.jar
BaiduLBS_Android.jar
GetuiExt-2.0.3.jar
GetuiSDK2.7.0.0.jar
MapApiLocation_1.3.3.jar
Msc.jar
alipaysdk.jar
alipaysecsdk.jar
alipayutdid.jar
android-support-v4.jar
aps-dhPush.jar
aps-igexin.jar
aps.jar
armeabi/
armeabi-v7a/
audio.jar
barcode.jar
camera.jar
contacts.jar
device.jar
downloader.jar
file.jar
gallery.jar
geolocation-amap.jar
geolocation-baidu.jar
geolocation-system.jar
geolocation.jar
invocation.jar
json_simple-1.1.jar
map-amap.jar
map-baidu.jar
messaging.jar
nativeObj.jar
nativeui.jar
navigatorui.jar
nineoldandroids-2.4.0.jar
nopermission.jar
oauth-qq.jar
oauth-sina.jar
oauth-weixin.jar
oauth.jar
open_sdk_r5043_lite.jar
payment-alipay.jar
payment-weixin.jar
payment.jar
pdr.jar
sensor.jar
share-qq.jar
share-sina.jar
share-tencent.jar
share-weixin.jar
share.jar
speech.jar
speech_ifly.jar
statistics-umeng.jar
tx_weibo_sdk-httpclient-3.0.1.jar
tx_weibo_sdk.jar
tx_weibo_sdk_component.jar
tx_wx.jar
ui.jar
umeng-analytics-v5.6.1.jar
universal-image-loader-1.9.0.jar
uploader.jar
weibosdk.jar
weibosdkcore.jar
x86/
xhr.jar

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

4.2 iOS Platform

SDK zip: 136M 

SDK包含: inc, Bundles, Libs

Bundles: 4.3M Libs: 337M

 

Libs包含的所有library和framework

Libs包含的所有library和framework

AMapSearchKit.framework
AlipaySDK.framework
BaiduMapAPI.framework
MAMapKit.framework
TencentOpenAPI.framework
iflyMSC.framework
libAMapImp.a
libASIHttpRequest.a
libBaiduKeyVerify.a
libBaiduMobStatForSDK.a
libBaiduWalletSDK.a
libGeTuiPush.a
libGeTuiSdk.a
libIAPPay.a
libJSONKit.a
libMobClickLibrary.a
libPushSDK.a
libQQOauth.a
libQQShare.a
libSDWebImage.a
libSinaShare.a
libSinaWBOauth.a
libTCWeiboSDK.a
libTencentShare.a
libTouchJSON.a
libUPPayPlugin.a
libWXOauth.a
libWeChatSDK.a
libWeiboSDK.a
libalixpayment.a
libbmapimp.a
libcoreSupport.a
libiflySpeech.a
liblibAccelerometer.a
liblibBarcode.a
liblibCache.a
liblibCamera.a
liblibContacts.a
liblibGeolocation.a
liblibIO.a
liblibLog.a
liblibMap.a
liblibMedia.a
liblibMessage.a
liblibNativeObj.a
liblibNativeUI.a
liblibNavigator.a
liblibOauth.a
liblibOrientation.a
liblibPDRCore.a
liblibPGInvocation.a
liblibPGProximity.a
liblibPayment.a
liblibPush.a
liblibShare.a
liblibSpeech.a
liblibStatistic.a
liblibStorage.a
liblibUI.a
liblibWebNavi.a
liblibWidget.a
liblibXHR.a
liblibZip.a
liblist.txt
libopencore-amrnb.a
libpingpp.a
libpingpppay.a
libweixinShare.a
libwxpay.a

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

引入SDK到已有App Project中會使最終的安裝包變大；以及可能帶來的library沖突。

5. HTML5 Plus/MUI Application

HTML5, CSS, JavaScript, HTML5 Plus Runtime, Mui Framework 

5.1 HTML5 Plus vs. React Native 

http://ask.dcloud.net.cn/question/2900

 

	React Native	HTML5 Plus
開發語言	JavaScript JSX(JavaScript syntax extension)	HTML5 CSS JavaScript
平台支持	iOS 7+; Android 4.1+	iOS 5+; Android 2.3+
運行時的大小
性能	Android平台有卡頓 (2016.02)
文檔	相對完備，組織有序	質量比較差，組織雜亂

 

 

 

 

 

 

 

 

5.2 Manifest.json文檔說明 manifest配置

http://ask.dcloud.net.cn/article/94 

Manifest.json文件是HTML5 Plus App的配置文件。

用於 配置應用信息, App圖標和啟動圖片, 配置SDK信息(地圖，支付，推送),

模塊裁減以及權限配置, 配置頁面引用關系。 

 

 

6. HBuilder

開發HTML5 Plus App, Stream App的IDE。

基於Eclipse開發。 

 

7. Stream Application

http://dcloud.io/ (官網) 

7.1 What?

HTML5 Plus Application + Page Reference Configuration 

A: 頁面引用關系

用來描述App Project中頁面與項目資源文件之間引用的關系

B: 生成頁面引用關系 

"Project"右擊->發行->發布為流應用 

生成頁面引用關系的方法: HBulder掃描代碼; 通過運行應用; 手動配置。

頁面引用關系本質是 有向無環圖。

 

7.2 Traits

差量更新+即時更新

多端發布(iOS, Android等)

可提高用戶轉化率 (“實現5秒內完成App的安裝和啟動”)

基於DCloud快碼提高轉化率

 

 

7.3 Cons

依賴網絡, 本地緩存較弱

 

僅Android平台 

 

流暢度稍弱 (Android版本的)

Case1: Hello mui 中的 chat列子，鍵盤第一次響應非常慢。

Case2: Hello mui 中的 image viewer列子，圖片滑動遲鈍(視不同的Android設備)。

 

7.4 Company Behind Stream Application

DCloud 數字天堂 

 

7.5 DCloud快碼

DCloud快碼是DCloud推出的App推廣碼。

快碼一個碼集成了多個推廣信息，包括 流應用、原生App地址、微信公眾號、微博等信息，使用不同軟件掃碼可以得到不同結果。

微信掃快碼

關注微信公眾號或下載App，下載App時又會根據設備支持情況秒裝流應用或下載原生App

微博掃快碼

訪問關注微博 

 

DCloud快碼的申請

只有發布過流應用的App才可以申請快碼

 

7.5 Is Stream Application suppored on iOS Platform? 

iOS Platform不支持。

 

7.6 vs. React Native

 

7.7 Scenario & Case

應用場景

從Wap站點/Mobile站點遷移 

某單一功能點獨立為流應用

對交互流暢度不高的應用

 

案例

應用案例包括: 京東秒殺，有道詞典 Ref[6]

應用案例多分布於 O2O, 資訊, 電商 行業。

 

 

 

---

Reference

1. 流應用

http://www.dcloud.io/streamapp.html

http://ask.dcloud.net.cn/docs/  (文檔)

2. ratchet

https://github.com/twbs/ratchet

Build mobile apps with simple HTML, CSS, and JS components.

3. 關於DCloud的一些視頻教程

http://edu.yuantuan.com/course/explore/DCloud

4. DCloud - 流應用專題

http://edu.yuantuan.com/course/171/lesson/list

5. HTML5 Plus

5.1 http://www.html5plus.org

5.2 http://www.html5plus.org/doc/zh_cn/runtime.html

6. 流應用案例

http://dcloud.io/case/#group-1 

 

---

Others

1. wex5

http://www.wex5.com/wex5/

2. App Promotion 

http://buildfire.com/free-app-promotion/

http://www.shoutmeloud.com/how-to-promote-android-app-game.html