weex页面中html页面引入js,WEEX H5 Render 解读（2）之加载步骤

接上篇文章，上一篇文章中写道，weex h5 渲染经历3次文档加载：

加载index.html

加载weex框架

加载我们写的程序

可能大家对第一步有疑问，明明它写的是一长串url，而且这个url中并没有index.html字样。我是怎么知道加载了index.html呢？其实我是通过调试器发现的。

下面我们来阅读index.html是怎么写的

1. head标签里的内容

Weex HTML5

html, body, #weex {

width: 100%;

height: 100%;

}

这里面的meta标签是对ios web 进行全局处理的，不熟悉的话，可以百度。在head里利用script标签引入了weex.js

2. body里的内容

body里的内容比较简单只有一个div和一个script标签。

在script里，定义了一个自执行函数。

(function(){})();

首先在自执行函数内部：

function getUrlParam (key) {

var reg = new RegExp('[?|&]' + key + '=([^&]+)')

var match = location.search.match(reg)

return match && match[1]

}

这个函数主要用对url的参数进行过滤

/[?|&]KEY=([^&]+)/是用来匹配&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框架文件进行阅读

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