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框架文件进行阅读


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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,923评论 18 139
  • 前言 2016年4月21日,阿里巴巴在Qcon大会上宣布跨平台移动开发工具Weex开放内测邀请。Weex能够完美兼...
    一缕殇流化隐半边冰霜阅读 39,074评论 135 366
  • 22年12月更新:个人网站关停,如果仍旧对旧教程有兴趣参考 Github 的markdown内容[https://...
    tangyefei阅读 35,224评论 22 257
  • 一:在制作一个Web应用或Web站点的过程中,你是如何考虑他的UI、安全性、高性能、SEO、可维护性以及技术因素的...
    Arno_z阅读 1,212评论 0 1
  • 1.这周的任务 :完成java 基础 今天早上线程,之后线程张孝祥! 明天:张孝祥 两个面试题。 JAVA 星期天...
    雷一凡阅读 185评论 0 0