接上篇文章,上一篇文章中寫道袭蝗,weex h5 渲染經歷3次文檔加載:
- 加載index.html
- 加載weex框架
- 加載我們寫的程序
可能大家對第一步有疑問,明明它寫的是一長串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框架文件進行閱讀
為了支持簡書涩哟,請在簡書內閱讀,請勿轉載