WEEX H5 Render 解讀(2)之加載步驟

接上篇文章,上一篇文章中寫道袭蝗,weex h5 渲染經歷3次文檔加載:

  1. 加載index.html
  2. 加載weex框架
  3. 加載我們寫的程序

可能大家對第一步有疑問,明明它寫的是一長串url般婆,而且這個url中并沒有index.html字樣到腥。我是怎么知道加載了index.html呢?其實我是通過調試器發(fā)現(xiàn)的蔚袍。



下面我們來閱讀index.html是怎么寫的

1. head標簽里的內容

<meta charset="utf-8">
  <title>Weex HTML5</title>
  <meta name="apple-mobile-web-app-capable" content="yes" />
  <meta name="apple-mobile-web-app-status-bar-style" content="black" />
  <meta name="apple-touch-fullscreen" content="yes" />
  <meta name="format-detection" content="telephone=no, email=no" />
  <style>
    html, body, #weex {
      width: 100%;
      height: 100%;
    }
  </style>
  <script src="./dist/weex.js"></script>

這里面的meta標簽是對ios web 進行全局處理的乡范,不熟悉的話,可以百度。在head里利用script標簽引入了weex.js

2. body里的內容

body里的內容比較簡單只有一個div和一個script標簽篓足。
在script里,定義了一個自執(zhí)行函數(shù)闰蚕。
<code>(function(){})();</code>
首先在自執(zhí)行函數(shù)內部:

 function getUrlParam (key) {
      var reg = new RegExp('[?|&]' + key + '=([^&]+)')
      var match = location.search.match(reg)
      return match && match[1]
    }

這個函數(shù)主要用對url的參數(shù)進行過濾
<code>/[?|&]KEY=([^&]+)/</code>是用來匹配&KEY=testWorld值用的栈拖,testWorld是不能包含&字符的。
接下來:

    var loader = getUrlParam('loader') || 'xhr'
    var page = getUrlParam('page') || 'demo/build/index.js'

用于初始化loader和page參數(shù)没陡,然后利用weex.init()實例化weex頁面

    window.weex.init({
      appId: location.href,
      loader: loader,
      source: page,
      rootId: 'weex'
    })

下面我們講對weex框架文件進行閱讀


為了支持簡書涩哟,請在簡書內閱讀,請勿轉載

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 序言:七十年代末盼玄,一起剝皮案震驚了整個濱河市贴彼,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌埃儿,老刑警劉巖器仗,帶你破解...
    沈念sama閱讀 221,273評論 6 515
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異童番,居然都是意外死亡精钮,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,349評論 3 398
  • 文/潘曉璐 我一進店門剃斧,熙熙樓的掌柜王于貴愁眉苦臉地迎上來轨香,“玉大人,你說我怎么就攤上這事幼东”廴荩” “怎么了?”我有些...
    開封第一講書人閱讀 167,709評論 0 360
  • 文/不壞的土叔 我叫張陵根蟹,是天一觀的道長脓杉。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 59,520評論 1 296
  • 正文 為了忘掉前任祭示,我火速辦了婚禮蔑赘,結果婚禮上,老公的妹妹穿的比我還像新娘翠勉。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 68,515評論 6 397
  • 文/花漫 我一把揭開白布嘁灯。 她就那樣靜靜地躺著,像睡著了一般躲舌。 火紅的嫁衣襯著肌膚如雪丑婿。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 52,158評論 1 308
  • 那天,我揣著相機與錄音羹奉,去河邊找鬼秒旋。 笑死,一個胖子當著我的面吹牛诀拭,可吹牛的內容都是我干的迁筛。 我是一名探鬼主播,決...
    沈念sama閱讀 40,755評論 3 421
  • 文/蒼蘭香墨 我猛地睜開眼耕挨,長吁一口氣:“原來是場噩夢啊……” “哼细卧!你這毒婦竟也來了?” 一聲冷哼從身側響起筒占,我...
    開封第一講書人閱讀 39,660評論 0 276
  • 序言:老撾萬榮一對情侶失蹤贪庙,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后翰苫,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體止邮,經...
    沈念sama閱讀 46,203評論 1 319
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 38,287評論 3 340
  • 正文 我和宋清朗相戀三年奏窑,在試婚紗的時候發(fā)現(xiàn)自己被綠了农尖。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 40,427評論 1 352
  • 序言:一個原本活蹦亂跳的男人離奇死亡良哲,死狀恐怖盛卡,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情筑凫,我是刑警寧澤滑沧,帶...
    沈念sama閱讀 36,122評論 5 349
  • 正文 年R本政府宣布,位于F島的核電站巍实,受9級特大地震影響滓技,放射性物質發(fā)生泄漏。R本人自食惡果不足惜棚潦,卻給世界環(huán)境...
    茶點故事閱讀 41,801評論 3 333
  • 文/蒙蒙 一令漂、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧丸边,春花似錦叠必、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,272評論 0 23
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至骄呼,卻和暖如春共苛,著一層夾襖步出監(jiān)牢的瞬間判没,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,393評論 1 272
  • 我被黑心中介騙來泰國打工隅茎, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留澄峰,地道東北人。 一個月前我還...
    沈念sama閱讀 48,808評論 3 376
  • 正文 我出身青樓辟犀,卻偏偏與公主長得像俏竞,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子踪蹬,可洞房花燭夜當晚...
    茶點故事閱讀 45,440評論 2 359

推薦閱讀更多精彩內容

  • Spring Cloud為開發(fā)人員提供了快速構建分布式系統(tǒng)中一些常見模式的工具(例如配置管理,服務發(fā)現(xiàn)臣咖,斷路器跃捣,智...
    卡卡羅2017閱讀 134,693評論 18 139
  • 前言 2016年4月21日,阿里巴巴在Qcon大會上宣布跨平臺移動開發(fā)工具Weex開放內測邀請夺蛇。Weex能夠完美兼...
    一縷殤流化隱半邊冰霜閱讀 38,994評論 135 366
  • 22年12月更新:個人網(wǎng)站關停疚漆,如果仍舊對舊教程有興趣參考 Github 的markdown內容[https://...
    tangyefei閱讀 35,186評論 22 257
  • 一:在制作一個Web應用或Web站點的過程中,你是如何考慮他的UI娶聘、安全性、高性能丸升、SEO牺氨、可維護性以及技術因素的...
    Arno_z閱讀 1,172評論 0 1
  • 1.這周的任務 :完成java 基礎 今天早上線程猴凹,之后線程張孝祥郊霎! 明天:張孝祥 兩個面試題。 JAVA 星期天...
    雷一凡閱讀 184評論 0 0