江剑锋 - 微信 Web App 开发最佳实践_部分1

2020-02-27 54浏览

  • 1.
  • 2.ங‫ מ‬Web App ୏‫๋֯ݎ‬ਫ᪢ ࿯‫ڻ‬᲋ ங‫מ‬चᏐԾߝ᮱ / ᦡᦇӾஞ / ‫ڹ‬ᒒ᯿຅ᕟ 2016/03/19
  • 3.‫ى‬ԭ౯ • ࿯‫ڻ‬᲋ • ங‫מ‬ਥᗑ̵‫ل‬ռଘ‫୏̵ݣ‬නଘ‫̵ݣ‬ங‫מ‬ᗑᶭᇇ • ங‫ מ‬Web ଫአ̵WeUI •https://github.com/progrape
  • 4.PARK 00 ᙧว
  • 5.ங‫ מ‬Web App ୏‫ݎ‬ᙧว • ங‫޾מ‬ங‫لמ‬ռ‫ݩ‬ள᭛ฦ݊ • ᩼๶᩼ग़୏‫ݎ‬ᘏࣁங‫ ݎ୏ٖמ‬Web ଫአ • ங‫ ٖמ‬Web ଫአ᩼๶᩼ӿ੄
  • 6.ங‫ מ‬JS-SDK • चԭங‫ٖמ‬ጱᗑᶭ୏‫ݎ‬ૡٍ۱ • ፗളֵአೌᆙ̵ᭌࢶ̵᧍ᶪ̵֖ᗝᒵಋ๢ᔮᕹጱᚆ‫ێ‬ • ፗളֵአங‫ړמ‬Ձ̵ಚӞಚ̵‫̵ڭܜ‬ඪ՞ᒵங‫מ‬൉‫׀‬ጱᚆ‫ێ‬
  • 7.ங‫ מ‬JS-SDK • 5 ੜ෸ 500 ‫ل‬ռ‫ݩ‬ • 5 ॠ 1ӡ ‫ل‬ռ‫ݩ‬ • 5 ޮ 1Պ ෭᧣አᰁ • 5 ӻ์ 5 Պ ෭᧣አᰁ
  • 8.ԅՋԍ౯ٟӻᶉாᶭᶎ҅᮷ᵱᥝ౯ࣁ‫ݸ‬ᒒኞ౮ᓋ‫ݷ‬Ҙ
  • 9.‫ل‬ռଘ‫ݣ‬ၥᦶ‫ݩ‬ • ‫ق‬᮱‫ل‬ռ‫ݩ‬ള‫ݗ‬๦ᴴ • ‫ق‬᮱ JS-SDK ๦ᴴ • JS ള‫ݗ‬ਞ‫ق‬ऒ‫̵ݷ‬ᗑᶭദ๦ࢧ᧣ऒ‫ݷ‬http://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=sandbox/login
  • 10.ங‫מ‬JS-SDK ᓋ‫ݷ‬ᳯ᷌
  • 11.ங‫ מ‬JS-SDK • URL ۖா឴‫҅ݐ‬ӧଫᧆ۱‫“ ތ‬#” ݊‫ݸ‬ᶎ᮱‫ړ‬ • ໊ḵᓋ‫ ݷ‬http://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=jsapisign• ୑ྍ឴‫ݐ‬ᓋ‫҅ݷ‬ള‫ݗ‬๚ᦡᗝྋᏟጱ Content-Type
  • 12.PARK 01 አಁં௔
  • 13.ங‫ מ‬Android ਮಁᒒᔮᕹᇇ๜‫૲ړ‬ 3% 4% 5% 8% 42% 11% 13% 14% 4.4 5.1 5.0 4.2 4.3 4.1 4.0 others
  • 14.ங‫ מ‬Android ਮಁᒒ‫ړ‬ᬙሲ‫૲ړ‬ 15% 30% 4% 5% 5% 1280*720 1176*1080 11% 19% 11% 1920*1080 1184*720 854*480 others 960*540 800*480
  • 15.ங‫מ‬አಁᗑᕶ‫૲ړ‬ 10% 5% 8% 57% 20% WIFI 4G 2G 3G Others
  • 16.PARK 02 X5
  • 17.X5 • ಾଘӧ‫ ݶ‬Android ᇇ๜̵ӧ‫ݶ‬๢ࣳ WebView ጱ૧୑ • ਧ‫ګ‬۸ද᭜҅൉‫֛܋‬ḵ • ࣗํᅩ‫د‬ग़
  • 18.ࣗ1ғᖨਂ • ᖨਂय़ • ‫ץ‬දӧኞප
  • 19.ऴࣗ • ᦡᗝ——᭗አ——Ⴔቘᖨਂ • URL ‫ے‬෸ᳵ౿
  • 20.ἓᑀದғ//triggerWebViewCacheCleanup
  • 21.ࣗ2ғflex • ᮱‫ړ‬ඪ೮ • ᘌٟဩ҅വគ autoprefixer ᤑ‫ق‬ • ӧඪ೮ flex-wrap ᒵ
  • 22.ࣗ3ғۖኮ • ۖኮ‫ܜ‬ᶷ • ։‫ز‬ᔰӧඪ೮ۖኮපຎ
  • 23.ࣗ4ғᥤ᷇ • controls ഴ‫ګ‬๵஠ᶳਂࣁ • ontimeupdate Ԫկ‫ݢ‬զ᥶‫ ֕҅ݎ‬currentTime ӧ‫ٵ‬Ꮯ • autoplay ෫ප ‫ݢ‬զፊ‫ ލ‬touchstart Ԫկ҅౲ WeixinJSBridge ጱ ready Ԫկ҅ࣁࢧ᧣᯾᧣አඎන
  • 24.ٌ՜ࣗ
  • 25.cookie ޾ localStorage • cookie ౲ localStorage ०ප • ங‫מ‬ဌํ੒ WebView ጱ cookie ޾ localStorage ؉ᇙྛ॒ቘ • ‫ݢ‬ᚆܻࢩғ • ٖਂӧ᪃ • ᬰᑕᤩ๤ • ங‫מ‬Ԇۖ๤ധ • አಁႴቘᖨਂ • ֵአୌᦓғ‫ݶ‬෸ֵአ cookie ޾ localStorage
  • 26.UIWebView • history.pushState ᪠ኧᳯ᷌ • ‫ݢ‬զֵአ hash դ๊
  • 27.PARK 03 UI֛ḵ
  • 28.UI֛ḵ
  • 29.WeUI • ங‫ࢫמ‬ᴚᦡᦇ޾ਫሿ • Өங‫ܻמ‬ኞ UI ֛ḵӞᛘ • դᎱ॔አhttp://weui.io
  • 30.WeUI ಘ઀ weui.js react-weui vue-weui/vux
  • 31.ਫֺ
  • 32.UIਫֺ
  • 33.UIਫֺ
  • 34.
  • 35.
  • 36.
  • 37.UIਫֺ
  • 38.PARK 04 ᧣ᦶ
  • 39.ங‫ מ‬Web ୏‫ݎ‬ᘏૡٍ • ᗑᶭദ๦ • JS-SDKཛྷ೙ᬌ‫޾ف‬ᬌ‫ڊ‬ • ᵞ౮ Chrome DevTools • ඪ೮ᦡᗝդቘ • ඪ೮ weinre
  • 40.
  • 41.X5 ‫܋‬ᕆԧ Webkit —> Blink
  • 42.X5 ‫܋‬ᕆ • 2016 ଙ 2 ์ӥෲᅍଶනᰁ • 2016 ଙ 3 ์ 19 ෭҅य़ᕅ 70% • 2016 ଙ 3 ์ବᛗ4์‫҅ڡ‬100% නᰁਠླ
  • 43.෫ᵱ‫܋‬ᕆਮಁᒒᇇ๜
  • 44.X5 with Blink • Chrome inspect • ຽ‫ٵ‬ጱᖨਂᒽኼ • ਠෆඪ೮ flex • canvas ඪ೮ CSS ᦡᗝᙧวᜋ • filter:blurํཛྷᔡපຎ • ද࠺ۖኮ‫ܜ‬ᶷᳯ᷌ • ։‫ز‬ᔰඪ೮ۖኮපຎ • autoplay ં௔ํප҅‫ݢ‬զᛔۖඎන • ᥤ᷇ጱ controls ഴ‫ګ‬๵ׁᆐਂࣁ
  • 45.᪒‫ړ‬ X5 Webkit X5 Blink