接上篇文章，上一篇文章中寫道，weex h5 渲染經歷3次文檔加載：

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

可能大家對第一步有疑問，明明它寫的是一長串url，而且這個url中并沒有index.html字樣。我是怎么知道加載了index.html呢？其實我是通過調試器發現的。

下面我們來閱讀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里，定義了一個自執行函數。
<code>(function(){})();</code>
首先在自執行函數內部：

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

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

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

用于初始化loader和page參數，然后利用weex.init()實例化weex頁面

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

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

為了支持簡書，請在簡書內閱讀，請勿轉載