WEEX H5 Render 解读（2）之加载步骤

接上篇文章，上一篇文章中写道，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框架文件进行阅读

---

为了支持简书，请在简书内阅读，请勿转载