Web App

/ / 2016/03/19

•

•

• Web WeUI

• https://github.com/progrape

PARK 00

•

• Web

• Web

Web App

•

•

•

JS-SDK

• 5 500

• 5 1

• 5 1

• 5 5

JS-SDK

•

• JS-SDK

• JS

http://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=sandbox/login

JS-SDK

• URL “#”

• http://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=jsapisign

• Content-Type

JS-SDK

PARK 01

Android

4%3%5%

8%

11%

13%

14%

42%

4.4 5.1 5.0 4.2 4.3 4.1 4.0 others

Android

15%

4%

5%

5%

11%

11%19%

30%

1280*720 1920*1080 854*480 960*540 800*4801176*1080 1184*720 others

10%

5%

8%

20%

57%

WIFI 4G 2G 3G Others

X5

PARK 02

• Android WebView

•

X5

•

1

•

•

• —— ——

• URL

//triggerWebViewCacheCleanup

2 flex

•

• autoprefixer

• flex-wrap

•

•

3

4

• controls

• ontimeupdate currentTime

• autoplay touchstart WeixinJSBridge ready

cookie localStorage

• cookie localStorage • WebView cookie localStorage

•

•

•

•

•• cookie localStorage

UIWebView

• history.pushState

• hash

UI

PARK 03

UI

WeUI

•

• UI

•

http://weui.io

WeUI

weui.js react-weui vue-weui/vux

UI

UI

UI

PARK 04

•

• JS-SDK

• Chrome DevTools

•

• weinre

Web

X5

Webkit —> Blink

X5

• 2016 2

• 2016 3 19 70%

• 2016 3 4 100%

X5 with Blink

• Chrome inspect

•

• flex

• canvas CSS

• filter:blur

•

•

• autoplay

• controls

X5 Webkit X5 Blink

Q&A