weexWeex开发weex社区

WEEX H5 Render 解读(2)之加载步骤

2016-07-25  本文已影响767人  cpu_driver

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


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

上一篇 下一篇

猜你喜欢

热点阅读