You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@weex.apache.org by so...@apache.org on 2017/06/20 03:04:27 UTC
[47/51] [abbrv] [partial] incubator-weex-site git commit: Site
updated: 2017-06-20 11:03:26
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/55f57f79/cn/guide/intro/app-architecture.html
----------------------------------------------------------------------
diff --git a/cn/guide/intro/app-architecture.html b/cn/guide/intro/app-architecture.html
deleted file mode 100644
index 91bada8..0000000
--- a/cn/guide/intro/app-architecture.html
+++ /dev/null
@@ -1,534 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
- <meta charset="utf-8">
-
- <title>用 Weex 构建移动应用 | Weex</title>
- <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
- <meta name="description" content="用 Weex 构建移动应用今天的移动应用这里谈一谈 Weex 对移动应用的理解。 移动应用需要支撑并行研发如今移动应用的开发需要并行研发的能力，当一个移动应用发展到一定规模的时候，能否支撑大规模的并行研发就成为了一件非常关键而又重要的事情。否则很容易变成工程瓶颈。 移动应用需要动态性如今移动应用不论从研发节奏、部署的灵活性和时效性、包大小、还是从研发到发布再到反馈的迭代周期上，都和移动互联网的发展">
-<meta property="og:type" content="website">
-<meta property="og:title" content="用 Weex 构建移动应用">
-<meta property="og:url" content="https://weex-project.io/cn/guide/intro/app-architecture.html">
-<meta property="og:site_name" content="Weex">
-<meta property="og:description" content="用 Weex 构建移动应用今天的移动应用这里谈一谈 Weex 对移动应用的理解。 移动应用需要支撑并行研发如今移动应用的开发需要并行研发的能力，当一个移动应用发展到一定规模的时候，能否支撑大规模的并行研发就成为了一件非常关键而又重要的事情。否则很容易变成工程瓶颈。 移动应用需要动态性如今移动应用不论从研发节奏、部署的灵活性和时效性、包大小、还是从研发到发布再到反馈的迭代周期上，都和移动互联网的发展">
-<meta property="og:updated_time" content="2017-06-14T04:08:17.000Z">
-<meta name="twitter:card" content="summary">
-<meta name="twitter:title" content="用 Weex 构建移动应用">
-<meta name="twitter:description" content="用 Weex 构建移动应用今天的移动应用这里谈一谈 Weex 对移动应用的理解。 移动应用需要支撑并行研发如今移动应用的开发需要并行研发的能力，当一个移动应用发展到一定规模的时候，能否支撑大规模的并行研发就成为了一件非常关键而又重要的事情。否则很容易变成工程瓶颈。 移动应用需要动态性如今移动应用不论从研发节奏、部署的灵活性和时效性、包大小、还是从研发到发布再到反馈的迭代周期上，都和移动互联网的发展">
-
- <link rel="alternate" href="/atom.xml" title="Weex" type="application/atom+xml">
-
-
- <link rel="icon" href="//gw.alicdn.com/tps/TB1XNqxPXXXXXcSXVXXXXXXXXXX-64-63.png">
-
-
- <link href="//fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet" type="text/css">
-
- <link rel="stylesheet" href="/css/style.css">
- <link rel="stylesheet" href="/css/swiper.min.css">
-</head>
-
-<body id="guide" class="lang-cn">
-
- <script>
- window.PAGE_TYPE = "guide";
- window.ROOT = "/"
- </script>
- <header id="header">
- <div class="navbar">
- <a id="logo" href="/cn/">
- <img src="//img.alicdn.com/tps/TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59.svg" />
- </a>
- <div class="main-nav">
- <ul class="links">
- <li><a href="/cn/guide">教程</a></li>
- <li><a href="/cn/references">手册</a></li>
- <li class="dropdown">
- <a href="javascript:;">参考</a>
- <ul class="dropdown-menu subnav">
- <li>
- <a href="/cn/faq.html">FAQ</a>
- </li>
- <li>
- <a href="/cn/releasenote.html">版本说明</a>
- </li>
- </ul>
- </li>
- <li class="dropdown">
- <a href="javascript:;">工具和服务</a>
- <ul class="dropdown-menu subnav">
- <li>
- <a href="/cn/playground.html">Playground</a>
- </li>
- <li>
- <a href="/cn/guide/tools/toolkit.html">Weex-toolkit</a>
- </li>
- <li>
- <a href="http://dotwe.org" target="_blank">Code Snippets</a>
- </li>
- <li>
- <a href="https://market.dotwe.org" target="_blank">Market</a>
- </li>
- </ul>
- </li>
- </ul>
- <ul class="info">
- <li><a href="https://github.com/apache/incubator-weex/" target="_blank"><span class="btn-github iconfont icon-github"></span></a></li>
- </ul>
- <ul class="tools">
- <li>
- <div class="search">
- <form id="search-form" class="search-form"> <!-- 搜索框相关 -->
- <input type="text" id="search-input-header" name="q" results="0" class="form-control search-input" autocomplete="off" autocorrect="off"/>
- <span class="iconfont icon-search"></span>
- </form>
- <div class="results-panel">
- </div>
-</div>
- </li>
- <li>
- <div class="dropdown select-lang">
- <a href="javascript:;" class="dropdown-toggle">
- Language
- <span class="caret"></span>
- </a>
- <ul class="dropdown-menu pick-lang">
- <li>
- <a href="/guide/intro/app-architecture.html" data-lang="en">English</a>
- </li>
- <li>
- <a href="/cn/guide/intro/app-architecture.html" data-lang="zh-cn">中文</a>
- </li>
- </ul>
- </div>
- </li>
- <!--<li></li>-->
- </ul>
- </div>
- </div>
- <div id="mobile-nav">
- <a id="logo" href="/cn/">
- <img src="//img.alicdn.com/tps/TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59.svg" />
- </a>
- <a class="btn-menu"><span class="iconfont icon-nav"></span></a>
- </div>
-</header>
-
- <div id="sidebar" class="">
- <div class="sidebar-menu">
-
- <div class="search">
- <form id="search-form" class="search-form"> <!-- 搜索框相关 -->
- <input type="text" id="search-input-sidebar" name="q" results="0" class="form-control search-input" autocomplete="off" autocorrect="off"/>
- <span class="iconfont icon-search"></span>
- </form>
- <div class="results-panel">
- </div>
-</div>
-
-
-<div class="doc-nav-version">
- <select class="versionBtn" stype="/cn/guide">
-
- <option value="2v" selected>v2.x</option>
- <option value="1v">v1.x</option>
-
- </select>
-</div>
-<div class="summary">
- <h2 class="part-title">
-
- 教程
-
- </h2>
- <ul class="doc-summary">
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- <li>
- <h3 class="chapter-title"><a href="/cn/guide/index.html" class="sidebar-link ">快速上手</a></h3>
-
- <ul class="chapter">
-
- <li>
- <a href="/cn/guide/set-up-env.html" class="sidebar-link ">搭建开发环境</a>
- </li>
-
- <li>
- <a href="/cn/guide/integrate-to-your-app.html" class="sidebar-link ">集成 Weex 到已有应用</a>
- </li>
-
- </ul>
-
- </li>
-
- <li>
- <h3 class="chapter-title"><a href="/cn/guide/intro/index.html" class="sidebar-link ">介绍</a></h3>
-
- <ul class="chapter">
-
- <li>
- <a href="/cn/guide/intro/how-it-works.html" class="sidebar-link ">工作原理</a>
- </li>
-
- <li>
- <a href="/cn/guide/intro/web-dev-experience.html" class="sidebar-link ">Web 开发体验</a>
- </li>
-
- <li>
- <a href="/cn/guide/intro/using-vue.html" class="sidebar-link ">使用 Vue 开发 Weex 页面</a>
- </li>
-
- <li>
- <a href="/cn/guide/intro/write-once.html" class="sidebar-link ">一次撰写，多端运行</a>
- </li>
-
- <li>
- <a href="/cn/guide/intro/app-architecture.html" class="sidebar-link current ">用 Weex 构建移动应用</a>
- </li>
-
- <li>
- <a href="/cn/guide/intro/page-architecture.html" class="sidebar-link ">Weex 页面结构</a>
- </li>
-
- </ul>
-
- </li>
-
- <li>
- <h3 class="chapter-title"><a href="/cn/guide/tools/index.html" class="sidebar-link ">周边工具</a></h3>
-
- <ul class="chapter">
-
- <li>
- <a href="/cn/guide/tools/toolkit.html" class="sidebar-link ">使用 weex-toolkit</a>
- </li>
-
- </ul>
-
- </li>
-
- <li>
- <h3 class="chapter-title"><a href="/cn/guide/contributing.html" class="sidebar-link ">如何参与社区</a></h3>
-
- </li>
-
-
- </ul>
-</div>
-
- <a class="btn-close-sidebar iconfont icon-close"></a>
- </div>
-</div>
-
- <div class="article-wrapper page-layout">
- <div class="doc-nav">
-
-
-
-<div class="doc-nav-version">
- <select class="versionBtn" stype="/cn/guide">
-
- <option value="2v" selected>v2.x</option>
- <option value="1v">v1.x</option>
-
- </select>
-</div>
-<div class="summary">
- <h2 class="part-title">
-
- 教程
-
- </h2>
- <ul class="doc-summary">
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- <li>
- <h3 class="chapter-title"><a href="/cn/guide/index.html" class="sidebar-link ">快速上手</a></h3>
-
- <ul class="chapter">
-
- <li>
- <a href="/cn/guide/set-up-env.html" class="sidebar-link ">搭建开发环境</a>
- </li>
-
- <li>
- <a href="/cn/guide/integrate-to-your-app.html" class="sidebar-link ">集成 Weex 到已有应用</a>
- </li>
-
- </ul>
-
- </li>
-
- <li>
- <h3 class="chapter-title"><a href="/cn/guide/intro/index.html" class="sidebar-link ">介绍</a></h3>
-
- <ul class="chapter">
-
- <li>
- <a href="/cn/guide/intro/how-it-works.html" class="sidebar-link ">工作原理</a>
- </li>
-
- <li>
- <a href="/cn/guide/intro/web-dev-experience.html" class="sidebar-link ">Web 开发体验</a>
- </li>
-
- <li>
- <a href="/cn/guide/intro/using-vue.html" class="sidebar-link ">使用 Vue 开发 Weex 页面</a>
- </li>
-
- <li>
- <a href="/cn/guide/intro/write-once.html" class="sidebar-link ">一次撰写，多端运行</a>
- </li>
-
- <li>
- <a href="/cn/guide/intro/app-architecture.html" class="sidebar-link current ">用 Weex 构建移动应用</a>
- </li>
-
- <li>
- <a href="/cn/guide/intro/page-architecture.html" class="sidebar-link ">Weex 页面结构</a>
- </li>
-
- </ul>
-
- </li>
-
- <li>
- <h3 class="chapter-title"><a href="/cn/guide/tools/index.html" class="sidebar-link ">周边工具</a></h3>
-
- <ul class="chapter">
-
- <li>
- <a href="/cn/guide/tools/toolkit.html" class="sidebar-link ">使用 weex-toolkit</a>
- </li>
-
- </ul>
-
- </li>
-
- <li>
- <h3 class="chapter-title"><a href="/cn/guide/contributing.html" class="sidebar-link ">如何参与社区</a></h3>
-
- </li>
-
-
- </ul>
-</div>
- </div>
-
-
-<article class="article article-type-guide">
- <div class="article-entry" itemprop="articleBody">
- <header class="article-header">
-
-
- <h1 class="article-title" itemprop="name">
- 用 Weex 构建移动应用
- </h1>
-
-
- <time class="article-date" datetime="2017-06-14T04:08:17.000Z">Updated time: 14/06/2017</time>
-</header>
- <h1 id="用-Weex-构建移动应用" class="article-heading"><a href="#用-Weex-构建移动应用" class="headerlink" title="用 Weex 构建移动应用"></a>用 Weex 构建移动应用<a class="article-anchor" href="#用-Weex-构建移动应用" aria-hidden="true"></a></h1><h2 id="今天的移动应用" class="article-heading"><a href="#今天的移动应用" class="headerlink" title="今天的移动应用"></a>今天的移动应用<a class="article-anchor" href="#今天的移动应用" aria-hidden="true"></a></h2><p>这里谈一谈 Weex 对移动应用的理解。</p>
-<h3 id="移动应用需要支撑并行研发" class="article-heading"><a href="#移动应用需要支撑并行研发" class="headerlink" title="移动应用需要支撑并行研发"></a>移动应用需要支撑并行研发<a class="article-anchor" href="#移动应用需要支撑并行研发" aria-hidden="true"></a></h3><p>如今移动应用的开发需要并行研发的能力，当一个移动应用发展到一定规模的时候，能否支撑大规模的并行研发就成为了一件非常关键而又重要的事情。否则很容易变成工程瓶颈。</p>
-<h3 id="移动应用需要动态性" class="article-heading"><a href="#移动应用需要动态性" class="headerlink" title="移动应用需要动态性"></a>移动应用需要动态性<a class="article-anchor" href="#移动应用需要动态性" aria-hidden="true"></a></h3><p>如今移动应用不论从研发节奏、部署的灵活性和时效性、包大小、还是从研发到发布再到反馈的迭代周期上，都和移动互联网的发展速度极不相符。移动应用需要更简单轻量的研发模型，需要摆脱版本部署和分发的笨重过程。</p>
-<h3 id="移动应用需要开放互联" class="article-heading"><a href="#移动应用需要开放互联" class="headerlink" title="移动应用需要开放互联"></a>移动应用需要开放互联<a class="article-anchor" href="#移动应用需要开放互联" aria-hidden="true"></a></h3><p>如今移动应用的内容和信息都是相互孤立的，应用之间的交流变得非常复杂和困难，也缺乏一定的标准和规范化的容器来承载。</p>
-<h2 id="整体结构设计" class="article-heading"><a href="#整体结构设计" class="headerlink" title="整体结构设计"></a>整体结构设计<a class="article-anchor" href="#整体结构设计" aria-hidden="true"></a></h2><p>我们认为一个具有高并行研发能力、动态化和标准化规范化的移动应用应该由以下几个方面构成：</p>
-<figure class="highlight plain"><table><tr><td class="code"><pre><div class="line">|------|------|------|------| |-----|</div><div class="line">| page | page | page | page | | api |</div><div class="line">|------|------|------|------| | api |</div><div class="line">| page | page | page | page | | api |</div><div class="line">|------|------|------|------| | api |</div><div class="line">| page | page | page | page | | api |</div><div class="line">|---------------------------| | api |</div><div class="line">| router | | api |</div><div class="line">|---------------------------| |-----|</div></pre></td></tr></table></figure>
-<ul>
-<li>页面：首先移动应用应该可以被拆解成若干个页面，每个页面相对解耦独立，同时每个页面都有一个 URL 进行唯一标识。</li>
-<li>路由：这些页面将会通过路由机制有机的串联起来，页面之间的关系是通过路由来进行调度的。常见的移动应用路由包括导航栏、tab 切换等。</li>
-<li>设备能力：以各种 API 或服务的方式提供出来，供页面自由使用。</li>
-</ul>
-<p>这样的话，在构建一个完整的移动应用之前，先确定你的应用有多少页面，每个页面分别是什么 URL，页面之间的关联和跳转逻辑是怎样的，然后梳理整个移动应用需要的所有 API 和服务。</p>
-<p>然后通过 Weex 创建不同的页面，并分别进行开发、调试和发布。</p>
-<p><strong>相关链接</strong></p>
-<ul>
-<li><a href="./page-architecture.html">页面结构</a></li>
-</ul>
-<p>如果你已经有一个做好的移动应用，只想用 Weex 开发其中的一部分页面甚至仅仅其中的一两个页面，这对 Weex 来说完全不是问题。Weex 只是一个 SDK，对整体的移动应用架构不会产生任何侵入性。并且完全可以和纯 native 界面或 hybrid 页面共存。</p>
-<p>如果需要 WeexSDK 额外的组件、模块或其它功能，可以通过 Weex 的扩展机制进行扩展。这部分工作需要 native 的研发知识，但是随着 Weex 组件和模块的丰富以及业务迭代的深入，这部分成本会承下降和收敛的趋势。</p>
-<p><strong>相关链接</strong></p>
-<ul>
-<li><a href="../../references/advanced/extend-to-ios.html">如何扩展 iOS</a></li>
-<li><a href="../../references/advanced/extend-to-android.html">如何扩展 Android</a></li>
-</ul>
-
- </div>
-
-</article>
-</div>
-
- <footer id="footer">
- <div class="row clearfix">
- <div class="dropdown select-lang">
- <a href="javascript:;" class="dropdown-toggle">
- Language
- <span class="caret"></span>
- </a>
- <ul class="dropdown-menu pick-lang">
- <li>
- <a href="/guide/intro/app-architecture.html" data-lang="en">English</a>
- </li>
- <li>
- <a href="/cn/guide/intro/app-architecture.html" data-lang="zh-cn">中文</a>
- </li>
- </ul>
- </div>
- </div>
- <div class="disclaimer">
- <div><img src="//gw.alicdn.com/tfs/TB1pTBZQFXXXXX9XXXXXXXXXXXX-794-280.png" width="200px" alt="Apache Incubator"></div>
- <div><span class="title">Disclaimer:</span> Apache Weex is an effort undergoing incubation at The Apache Software Foundation (ASF), sponsored by the Apache Incubator. Incubation is required of all newly accepted projects until a further review indicates that the infrastructure, communications, and decision making process have stabilized in a manner consistent with other successful ASF projects. While incubation status is not necessarily a reflection of the completeness or stability of the code, it does indicate that the project has yet to be fully endorsed by the ASF.</div>
- <br/>
- </div>
- <hr>
- <div class="row">
- <p> <img src="//gw.alicdn.com/tfs/TB1bg8SQFXXXXcHXXXXXXXXXXXX-85-170.png" height="50px" alt="Apache"><span>Copyright(c) 2017 The Apache Software Foundation. Licensed under the </span> <a href="http://www.apache.org/licenses/LICENSE-2.0">Apache License, Version 2.0</a></p>
- </div>
- <div class="row clearfix">
- <div></div>
- </div>
-</footer>
- <div style="display: none;">
- <script src="//s95.cnzz.com/z_stat.php?id=1261496509&web_id=1261496509" language="JavaScript"></script>
-</div>
-
- <script src="/js/reqwest.js"></script>
- <script src="/js/common.js"></script>
-</body>
-</html>
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/55f57f79/cn/guide/intro/how-it-works.html
----------------------------------------------------------------------
diff --git a/cn/guide/intro/how-it-works.html b/cn/guide/intro/how-it-works.html
deleted file mode 100644
index f03b3e8..0000000
--- a/cn/guide/intro/how-it-works.html
+++ /dev/null
@@ -1,542 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
- <meta charset="utf-8">
-
- <title>工作原理 | Weex</title>
- <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
- <meta name="description" content="工作原理整体架构Weex 表面上是一个客户端技术，但实际上它串联起了从本地开发环境到云端部署和分发的整个链路。开发者首先可以在本地像撰写 web 页面一样撰写一个 app 的页面，然后编译成一段 JavaScript 代码，形成 Weex 的一个 JS bundle；在云端，开发者可以把生成的 JS bundle 部署上去，然后通过网络请求或预下发的方式传递到用户的移动应用客户端；在移动应用客户端">
-<meta property="og:type" content="website">
-<meta property="og:title" content="工作原理">
-<meta property="og:url" content="https://weex-project.io/cn/guide/intro/how-it-works.html">
-<meta property="og:site_name" content="Weex">
-<meta property="og:description" content="工作原理整体架构Weex 表面上是一个客户端技术，但实际上它串联起了从本地开发环境到云端部署和分发的整个链路。开发者首先可以在本地像撰写 web 页面一样撰写一个 app 的页面，然后编译成一段 JavaScript 代码，形成 Weex 的一个 JS bundle；在云端，开发者可以把生成的 JS bundle 部署上去，然后通过网络请求或预下发的方式传递到用户的移动应用客户端；在移动应用客户端">
-<meta property="og:image" content="https://weex-project.io/cn/guide/images/flow.png">
-<meta property="og:updated_time" content="2017-06-14T04:08:17.000Z">
-<meta name="twitter:card" content="summary">
-<meta name="twitter:title" content="工作原理">
-<meta name="twitter:description" content="工作原理整体架构Weex 表面上是一个客户端技术，但实际上它串联起了从本地开发环境到云端部署和分发的整个链路。开发者首先可以在本地像撰写 web 页面一样撰写一个 app 的页面，然后编译成一段 JavaScript 代码，形成 Weex 的一个 JS bundle；在云端，开发者可以把生成的 JS bundle 部署上去，然后通过网络请求或预下发的方式传递到用户的移动应用客户端；在移动应用客户端">
-<meta name="twitter:image" content="https://weex-project.io/cn/guide/images/flow.png">
-
- <link rel="alternate" href="/atom.xml" title="Weex" type="application/atom+xml">
-
-
- <link rel="icon" href="//gw.alicdn.com/tps/TB1XNqxPXXXXXcSXVXXXXXXXXXX-64-63.png">
-
-
- <link href="//fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet" type="text/css">
-
- <link rel="stylesheet" href="/css/style.css">
- <link rel="stylesheet" href="/css/swiper.min.css">
-</head>
-
-<body id="guide" class="lang-cn">
-
- <script>
- window.PAGE_TYPE = "guide";
- window.ROOT = "/"
- </script>
- <header id="header">
- <div class="navbar">
- <a id="logo" href="/cn/">
- <img src="//img.alicdn.com/tps/TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59.svg" />
- </a>
- <div class="main-nav">
- <ul class="links">
- <li><a href="/cn/guide">教程</a></li>
- <li><a href="/cn/references">手册</a></li>
- <li class="dropdown">
- <a href="javascript:;">参考</a>
- <ul class="dropdown-menu subnav">
- <li>
- <a href="/cn/faq.html">FAQ</a>
- </li>
- <li>
- <a href="/cn/releasenote.html">版本说明</a>
- </li>
- </ul>
- </li>
- <li class="dropdown">
- <a href="javascript:;">工具和服务</a>
- <ul class="dropdown-menu subnav">
- <li>
- <a href="/cn/playground.html">Playground</a>
- </li>
- <li>
- <a href="/cn/guide/tools/toolkit.html">Weex-toolkit</a>
- </li>
- <li>
- <a href="http://dotwe.org" target="_blank">Code Snippets</a>
- </li>
- <li>
- <a href="https://market.dotwe.org" target="_blank">Market</a>
- </li>
- </ul>
- </li>
- </ul>
- <ul class="info">
- <li><a href="https://github.com/apache/incubator-weex/" target="_blank"><span class="btn-github iconfont icon-github"></span></a></li>
- </ul>
- <ul class="tools">
- <li>
- <div class="search">
- <form id="search-form" class="search-form"> <!-- 搜索框相关 -->
- <input type="text" id="search-input-header" name="q" results="0" class="form-control search-input" autocomplete="off" autocorrect="off"/>
- <span class="iconfont icon-search"></span>
- </form>
- <div class="results-panel">
- </div>
-</div>
- </li>
- <li>
- <div class="dropdown select-lang">
- <a href="javascript:;" class="dropdown-toggle">
- Language
- <span class="caret"></span>
- </a>
- <ul class="dropdown-menu pick-lang">
- <li>
- <a href="/guide/intro/how-it-works.html" data-lang="en">English</a>
- </li>
- <li>
- <a href="/cn/guide/intro/how-it-works.html" data-lang="zh-cn">中文</a>
- </li>
- </ul>
- </div>
- </li>
- <!--<li></li>-->
- </ul>
- </div>
- </div>
- <div id="mobile-nav">
- <a id="logo" href="/cn/">
- <img src="//img.alicdn.com/tps/TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59.svg" />
- </a>
- <a class="btn-menu"><span class="iconfont icon-nav"></span></a>
- </div>
-</header>
-
- <div id="sidebar" class="">
- <div class="sidebar-menu">
-
- <div class="search">
- <form id="search-form" class="search-form"> <!-- 搜索框相关 -->
- <input type="text" id="search-input-sidebar" name="q" results="0" class="form-control search-input" autocomplete="off" autocorrect="off"/>
- <span class="iconfont icon-search"></span>
- </form>
- <div class="results-panel">
- </div>
-</div>
-
-
-<div class="doc-nav-version">
- <select class="versionBtn" stype="/cn/guide">
-
- <option value="2v" selected>v2.x</option>
- <option value="1v">v1.x</option>
-
- </select>
-</div>
-<div class="summary">
- <h2 class="part-title">
-
- 教程
-
- </h2>
- <ul class="doc-summary">
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- <li>
- <h3 class="chapter-title"><a href="/cn/guide/index.html" class="sidebar-link ">快速上手</a></h3>
-
- <ul class="chapter">
-
- <li>
- <a href="/cn/guide/set-up-env.html" class="sidebar-link ">搭建开发环境</a>
- </li>
-
- <li>
- <a href="/cn/guide/integrate-to-your-app.html" class="sidebar-link ">集成 Weex 到已有应用</a>
- </li>
-
- </ul>
-
- </li>
-
- <li>
- <h3 class="chapter-title"><a href="/cn/guide/intro/index.html" class="sidebar-link ">介绍</a></h3>
-
- <ul class="chapter">
-
- <li>
- <a href="/cn/guide/intro/how-it-works.html" class="sidebar-link current ">工作原理</a>
- </li>
-
- <li>
- <a href="/cn/guide/intro/web-dev-experience.html" class="sidebar-link ">Web 开发体验</a>
- </li>
-
- <li>
- <a href="/cn/guide/intro/using-vue.html" class="sidebar-link ">使用 Vue 开发 Weex 页面</a>
- </li>
-
- <li>
- <a href="/cn/guide/intro/write-once.html" class="sidebar-link ">一次撰写，多端运行</a>
- </li>
-
- <li>
- <a href="/cn/guide/intro/app-architecture.html" class="sidebar-link ">用 Weex 构建移动应用</a>
- </li>
-
- <li>
- <a href="/cn/guide/intro/page-architecture.html" class="sidebar-link ">Weex 页面结构</a>
- </li>
-
- </ul>
-
- </li>
-
- <li>
- <h3 class="chapter-title"><a href="/cn/guide/tools/index.html" class="sidebar-link ">周边工具</a></h3>
-
- <ul class="chapter">
-
- <li>
- <a href="/cn/guide/tools/toolkit.html" class="sidebar-link ">使用 weex-toolkit</a>
- </li>
-
- </ul>
-
- </li>
-
- <li>
- <h3 class="chapter-title"><a href="/cn/guide/contributing.html" class="sidebar-link ">如何参与社区</a></h3>
-
- </li>
-
-
- </ul>
-</div>
-
- <a class="btn-close-sidebar iconfont icon-close"></a>
- </div>
-</div>
-
- <div class="article-wrapper page-layout">
- <div class="doc-nav">
-
-
-
-<div class="doc-nav-version">
- <select class="versionBtn" stype="/cn/guide">
-
- <option value="2v" selected>v2.x</option>
- <option value="1v">v1.x</option>
-
- </select>
-</div>
-<div class="summary">
- <h2 class="part-title">
-
- 教程
-
- </h2>
- <ul class="doc-summary">
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- <li>
- <h3 class="chapter-title"><a href="/cn/guide/index.html" class="sidebar-link ">快速上手</a></h3>
-
- <ul class="chapter">
-
- <li>
- <a href="/cn/guide/set-up-env.html" class="sidebar-link ">搭建开发环境</a>
- </li>
-
- <li>
- <a href="/cn/guide/integrate-to-your-app.html" class="sidebar-link ">集成 Weex 到已有应用</a>
- </li>
-
- </ul>
-
- </li>
-
- <li>
- <h3 class="chapter-title"><a href="/cn/guide/intro/index.html" class="sidebar-link ">介绍</a></h3>
-
- <ul class="chapter">
-
- <li>
- <a href="/cn/guide/intro/how-it-works.html" class="sidebar-link current ">工作原理</a>
- </li>
-
- <li>
- <a href="/cn/guide/intro/web-dev-experience.html" class="sidebar-link ">Web 开发体验</a>
- </li>
-
- <li>
- <a href="/cn/guide/intro/using-vue.html" class="sidebar-link ">使用 Vue 开发 Weex 页面</a>
- </li>
-
- <li>
- <a href="/cn/guide/intro/write-once.html" class="sidebar-link ">一次撰写，多端运行</a>
- </li>
-
- <li>
- <a href="/cn/guide/intro/app-architecture.html" class="sidebar-link ">用 Weex 构建移动应用</a>
- </li>
-
- <li>
- <a href="/cn/guide/intro/page-architecture.html" class="sidebar-link ">Weex 页面结构</a>
- </li>
-
- </ul>
-
- </li>
-
- <li>
- <h3 class="chapter-title"><a href="/cn/guide/tools/index.html" class="sidebar-link ">周边工具</a></h3>
-
- <ul class="chapter">
-
- <li>
- <a href="/cn/guide/tools/toolkit.html" class="sidebar-link ">使用 weex-toolkit</a>
- </li>
-
- </ul>
-
- </li>
-
- <li>
- <h3 class="chapter-title"><a href="/cn/guide/contributing.html" class="sidebar-link ">如何参与社区</a></h3>
-
- </li>
-
-
- </ul>
-</div>
- </div>
-
-
-<article class="article article-type-guide">
- <div class="article-entry" itemprop="articleBody">
- <header class="article-header">
-
-
- <h1 class="article-title" itemprop="name">
- 工作原理
- </h1>
-
-
- <time class="article-date" datetime="2017-06-14T04:08:17.000Z">Updated time: 14/06/2017</time>
-</header>
- <h1 id="工作原理" class="article-heading"><a href="#工作原理" class="headerlink" title="工作原理"></a>工作原理<a class="article-anchor" href="#工作原理" aria-hidden="true"></a></h1><h2 id="整体架构" class="article-heading"><a href="#整体架构" class="headerlink" title="整体架构"></a>整体架构<a class="article-anchor" href="#整体架构" aria-hidden="true"></a></h2><p>Weex 表面上是一个客户端技术，但实际上它串联起了从本地开发环境到云端部署和分发的整个链路。开发者首先可以在本地像撰写 web 页面一样撰写一个 app 的页面，然后编译成一段 JavaScript 代码，形成 Weex 的一个 JS bundle；在云端，开发者可以把生成的 JS bundle 部署上去，然后通过网络请求或预下发的方式传递到用户的移动应用客户端；在移动应用客户端里，WeexSDK 会准备好一个 JavaScript 引擎，并且在用户打开一个 Weex 页面时执行相应的 JS bundle
，并在执行过程中产生各种命令发送到 native 端进行的界面渲染或数据存储、网络通信、调用设备功能、用户交互响应等移动应用的场景实践；同时，如果用户没有安装移动应用，他仍然可以在浏览器里打开一个相同的 web 页面，这个页面是使用相同的页面源代码，通过浏览器里的 JavaScript 引擎运行起来的。</p>
-<p><img src="../images/flow.png" alt="How it works"></p>
-<h2 id="本地开发环境" class="article-heading"><a href="#本地开发环境" class="headerlink" title="本地开发环境"></a>本地开发环境<a class="article-anchor" href="#本地开发环境" aria-hidden="true"></a></h2><p>Weex 的本地开发环境基于 web 开发体验而设计，web 开发者可以通过自己熟悉的 HTML/CSS/JavaScript 技术和语法实现移动应用的界面。同时 Weex 也对 <a href="https://vuejs.org/" target="_blank" rel="external">Vue.js</a> 这一非常优秀的前端框架做了官方的支持。</p>
-<p>除此之外，Weex 的工程设计也是 web 开发者非常熟悉的，首先 web 开发者可以使用自己熟悉的 npm 进行依赖管理；其次 web 开发者在通过项目脚手架初始化工程、开发、调试、质量控制等各个环节，都可以参考 web 开发已有的最佳实践。</p>
-<p>和如今 web 开发的最佳实践一样，Weex 会把一个页面的源代码全部编译打包成一个 JS bundle，在浏览器中，我们需要把这个 JS bundle 作为一段 <code><script></code> 载入网页，在客户端里，我们把这段 JS bundle 载入本地，并通过 WeexSDK 直接执行。</p>
-<p><strong>相关阅读</strong></p>
-<ul>
-<li><a href="../../references/platform-difference.html">Weex 和 web 平台的差异</a></li>
-<li><a href="../../references/vue/difference-with-web.html">Vue 2.x 在 Weex 和 web 中的差异</a></li>
-<li><a href="../index.html">快速上手</a></li>
-<li><a href="./devtools.html">使用 Devtools</a></li>
-</ul>
-<h2 id="云端部署和分发" class="article-heading"><a href="#云端部署和分发" class="headerlink" title="云端部署和分发"></a>云端部署和分发<a class="article-anchor" href="#云端部署和分发" aria-hidden="true"></a></h2><p>Weex 的 JS bundle 可以作为 web 开发中的一段静态资源进行部署和下发。几乎可以复用 HTML5 所有的工程体系和最佳实践。比如在本地开发环境通过部署工具将 JS bundle 部署到 CDN、通过 CMS 或搭建平台把业务数据和模块化的前端组件自动化拼接生成 JS bundle、通过服务端 JS bundle 的流量和日志统计页面的访问情况、通过 AppCache 或类似的方式对 JS bundle 在客户端进行缓存或预加载以降低网络通信的成本等。</p>
-<h2 id="客户端-JavaScript-引擎" class="article-heading"><a href="#客户端-JavaScript-引擎" class="headerlink" title="客户端 JavaScript 引擎"></a>客户端 JavaScript 引擎<a class="article-anchor" href="#客户端-JavaScript-引擎" aria-hidden="true"></a></h2><p>Weex 的 iOS 和 Android 客户端中都会运行一个 JavaScript 引擎，来执行 JS bundle，同时向各端的渲染层发送规范化的指令，调度客户端的渲染和其它各种能力。我们在 iOS 下选择了 JavaScriptCore 内核，而在 Android 下选择了 UC 提供的 v8 内核。无论是从性能还是稳定性方面都提供了强有力的保障。</p>
-<p>为了让整个移动应用的资源利用得更好，我们在客户端提供的 JavaScript 引擎是单例的，即所有 JS bundle 公用一个 JavaScript 内核实例，同时对每个 JS bundle 在运行时进行了上下文的隔离，使得每个 JS bundle 都能够高效安全的工作。我们还把 Vue 2.0 这样的 JS Framework 做了预置，开发者不必把 JS Framework 打包在每个 JS bundle 里，从而大大减少了 JS bundle 的体积，也就进一步保障了页面打开的速度。</p>
-<h2 id="客户端渲染层" class="article-heading"><a href="#客户端渲染层" class="headerlink" title="客户端渲染层"></a>客户端渲染层<a class="article-anchor" href="#客户端渲染层" aria-hidden="true"></a></h2><p>Weex 目前提供了 iOS 和 Android 两个客户端的 native 渲染层。每个端都基于 DOM 模型设计并实现了标准的界面渲染接口供 JavaScript 引擎调用。并且结合 web 标准和 native 的特点和优势实现了一套统一的组件和模块。Weex 在性能方面的表现也是非常优异的，尤其是界面首屏加载时间、native 下长列表的资源开销和复用情况、CPU、内存、帧率 等关键指标。当然，尽管 Weex 官方已经提供了一组开发者最常用的组件和模块，但面对丰富多样的移动应用研发需求，团队也难免会力不从心，为此我们提供了灵活自由的横向扩展能力，开发者可以根据自身的情况定制属于自己的客户端组件和模块
，进一步丰富 Weex 在客户端上的能力。</p>
-<p><strong>相关链接</strong></p>
-<ul>
-<li><a href="../../references/web-standards.html">Weex 的组件和模块跟 web 标准的区别</a></li>
-<li><a href="../../references/ios-apis.html">如何使用 iOS</a></li>
-<li><a href="../../references/android-apis.html">如何使用 Android</a></li>
-<li><a href="../../references/advanced/extend-to-ios.html">如何扩展 iOS</a></li>
-<li><a href="../../references/advanced/extend-to-android.html">如何扩展 Android</a></li>
-</ul>
-<h2 id="浏览器渲染" class="article-heading"><a href="#浏览器渲染" class="headerlink" title="浏览器渲染"></a>浏览器渲染<a class="article-anchor" href="#浏览器渲染" aria-hidden="true"></a></h2><p>Weex 除了提供 iOS 和 Android 的客户端渲染层之外，还基于 Vue 2.0 对官方的所有组件和模块进行了封装，开发者可以基于 Vue 2.0 用同一套源代码构建出在浏览器中相同效果的页面。并且同样可以横向扩展。</p>
-<p><strong>相关链接</strong></p>
-<ul>
-<li><a href="../../references/html5-apis.html">如何使用 HTML5</a></li>
-<li><a href="../../references/advanced/extend-to-html5.html">如何扩展 HTML5</a></li>
-</ul>
-
- </div>
-
-</article>
-</div>
-
- <footer id="footer">
- <div class="row clearfix">
- <div class="dropdown select-lang">
- <a href="javascript:;" class="dropdown-toggle">
- Language
- <span class="caret"></span>
- </a>
- <ul class="dropdown-menu pick-lang">
- <li>
- <a href="/guide/intro/how-it-works.html" data-lang="en">English</a>
- </li>
- <li>
- <a href="/cn/guide/intro/how-it-works.html" data-lang="zh-cn">中文</a>
- </li>
- </ul>
- </div>
- </div>
- <div class="disclaimer">
- <div><img src="//gw.alicdn.com/tfs/TB1pTBZQFXXXXX9XXXXXXXXXXXX-794-280.png" width="200px" alt="Apache Incubator"></div>
- <div><span class="title">Disclaimer:</span> Apache Weex is an effort undergoing incubation at The Apache Software Foundation (ASF), sponsored by the Apache Incubator. Incubation is required of all newly accepted projects until a further review indicates that the infrastructure, communications, and decision making process have stabilized in a manner consistent with other successful ASF projects. While incubation status is not necessarily a reflection of the completeness or stability of the code, it does indicate that the project has yet to be fully endorsed by the ASF.</div>
- <br/>
- </div>
- <hr>
- <div class="row">
- <p> <img src="//gw.alicdn.com/tfs/TB1bg8SQFXXXXcHXXXXXXXXXXXX-85-170.png" height="50px" alt="Apache"><span>Copyright(c) 2017 The Apache Software Foundation. Licensed under the </span> <a href="http://www.apache.org/licenses/LICENSE-2.0">Apache License, Version 2.0</a></p>
- </div>
- <div class="row clearfix">
- <div></div>
- </div>
-</footer>
- <div style="display: none;">
- <script src="//s95.cnzz.com/z_stat.php?id=1261496509&web_id=1261496509" language="JavaScript"></script>
-</div>
-
- <script src="/js/reqwest.js"></script>
- <script src="/js/common.js"></script>
-</body>
-</html>
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/55f57f79/cn/guide/intro/index.html
----------------------------------------------------------------------
diff --git a/cn/guide/intro/index.html b/cn/guide/intro/index.html
deleted file mode 100644
index a676bab..0000000
--- a/cn/guide/intro/index.html
+++ /dev/null
@@ -1,518 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
- <meta charset="utf-8">
-
- <title>介绍 | Weex</title>
- <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
- <meta name="description" content="Intro 工作原理 Web 开发体验 使用 Vue 开发 Weex 页面 一次撰写，多端运行 用 Weex 构建移动应用 Weex 页面结构">
-<meta property="og:type" content="website">
-<meta property="og:title" content="介绍">
-<meta property="og:url" content="https://weex-project.io/cn/guide/intro/index.html">
-<meta property="og:site_name" content="Weex">
-<meta property="og:description" content="Intro 工作原理 Web 开发体验 使用 Vue 开发 Weex 页面 一次撰写，多端运行 用 Weex 构建移动应用 Weex 页面结构">
-<meta property="og:updated_time" content="2017-06-14T04:08:17.000Z">
-<meta name="twitter:card" content="summary">
-<meta name="twitter:title" content="介绍">
-<meta name="twitter:description" content="Intro 工作原理 Web 开发体验 使用 Vue 开发 Weex 页面 一次撰写，多端运行 用 Weex 构建移动应用 Weex 页面结构">
-
- <link rel="alternate" href="/atom.xml" title="Weex" type="application/atom+xml">
-
-
- <link rel="icon" href="//gw.alicdn.com/tps/TB1XNqxPXXXXXcSXVXXXXXXXXXX-64-63.png">
-
-
- <link href="//fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet" type="text/css">
-
- <link rel="stylesheet" href="/css/style.css">
- <link rel="stylesheet" href="/css/swiper.min.css">
-</head>
-
-<body id="guide" class="lang-cn">
-
- <script>
- window.PAGE_TYPE = "guide";
- window.ROOT = "/"
- </script>
- <header id="header">
- <div class="navbar">
- <a id="logo" href="/cn/">
- <img src="//img.alicdn.com/tps/TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59.svg" />
- </a>
- <div class="main-nav">
- <ul class="links">
- <li><a href="/cn/guide">教程</a></li>
- <li><a href="/cn/references">手册</a></li>
- <li class="dropdown">
- <a href="javascript:;">参考</a>
- <ul class="dropdown-menu subnav">
- <li>
- <a href="/cn/faq.html">FAQ</a>
- </li>
- <li>
- <a href="/cn/releasenote.html">版本说明</a>
- </li>
- </ul>
- </li>
- <li class="dropdown">
- <a href="javascript:;">工具和服务</a>
- <ul class="dropdown-menu subnav">
- <li>
- <a href="/cn/playground.html">Playground</a>
- </li>
- <li>
- <a href="/cn/guide/tools/toolkit.html">Weex-toolkit</a>
- </li>
- <li>
- <a href="http://dotwe.org" target="_blank">Code Snippets</a>
- </li>
- <li>
- <a href="https://market.dotwe.org" target="_blank">Market</a>
- </li>
- </ul>
- </li>
- </ul>
- <ul class="info">
- <li><a href="https://github.com/apache/incubator-weex/" target="_blank"><span class="btn-github iconfont icon-github"></span></a></li>
- </ul>
- <ul class="tools">
- <li>
- <div class="search">
- <form id="search-form" class="search-form"> <!-- 搜索框相关 -->
- <input type="text" id="search-input-header" name="q" results="0" class="form-control search-input" autocomplete="off" autocorrect="off"/>
- <span class="iconfont icon-search"></span>
- </form>
- <div class="results-panel">
- </div>
-</div>
- </li>
- <li>
- <div class="dropdown select-lang">
- <a href="javascript:;" class="dropdown-toggle">
- Language
- <span class="caret"></span>
- </a>
- <ul class="dropdown-menu pick-lang">
- <li>
- <a href="/guide/intro/index.html" data-lang="en">English</a>
- </li>
- <li>
- <a href="/cn/guide/intro/index.html" data-lang="zh-cn">中文</a>
- </li>
- </ul>
- </div>
- </li>
- <!--<li></li>-->
- </ul>
- </div>
- </div>
- <div id="mobile-nav">
- <a id="logo" href="/cn/">
- <img src="//img.alicdn.com/tps/TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59.svg" />
- </a>
- <a class="btn-menu"><span class="iconfont icon-nav"></span></a>
- </div>
-</header>
-
- <div id="sidebar" class="">
- <div class="sidebar-menu">
-
- <div class="search">
- <form id="search-form" class="search-form"> <!-- 搜索框相关 -->
- <input type="text" id="search-input-sidebar" name="q" results="0" class="form-control search-input" autocomplete="off" autocorrect="off"/>
- <span class="iconfont icon-search"></span>
- </form>
- <div class="results-panel">
- </div>
-</div>
-
-
-<div class="doc-nav-version">
- <select class="versionBtn" stype="/cn/guide">
-
- <option value="2v" selected>v2.x</option>
- <option value="1v">v1.x</option>
-
- </select>
-</div>
-<div class="summary">
- <h2 class="part-title">
-
- 教程
-
- </h2>
- <ul class="doc-summary">
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- <li>
- <h3 class="chapter-title"><a href="/cn/guide/index.html" class="sidebar-link ">快速上手</a></h3>
-
- <ul class="chapter">
-
- <li>
- <a href="/cn/guide/set-up-env.html" class="sidebar-link ">搭建开发环境</a>
- </li>
-
- <li>
- <a href="/cn/guide/integrate-to-your-app.html" class="sidebar-link ">集成 Weex 到已有应用</a>
- </li>
-
- </ul>
-
- </li>
-
- <li>
- <h3 class="chapter-title"><a href="/cn/guide/intro/index.html" class="sidebar-link current ">介绍</a></h3>
-
- <ul class="chapter">
-
- <li>
- <a href="/cn/guide/intro/how-it-works.html" class="sidebar-link ">工作原理</a>
- </li>
-
- <li>
- <a href="/cn/guide/intro/web-dev-experience.html" class="sidebar-link ">Web 开发体验</a>
- </li>
-
- <li>
- <a href="/cn/guide/intro/using-vue.html" class="sidebar-link ">使用 Vue 开发 Weex 页面</a>
- </li>
-
- <li>
- <a href="/cn/guide/intro/write-once.html" class="sidebar-link ">一次撰写，多端运行</a>
- </li>
-
- <li>
- <a href="/cn/guide/intro/app-architecture.html" class="sidebar-link ">用 Weex 构建移动应用</a>
- </li>
-
- <li>
- <a href="/cn/guide/intro/page-architecture.html" class="sidebar-link ">Weex 页面结构</a>
- </li>
-
- </ul>
-
- </li>
-
- <li>
- <h3 class="chapter-title"><a href="/cn/guide/tools/index.html" class="sidebar-link ">周边工具</a></h3>
-
- <ul class="chapter">
-
- <li>
- <a href="/cn/guide/tools/toolkit.html" class="sidebar-link ">使用 weex-toolkit</a>
- </li>
-
- </ul>
-
- </li>
-
- <li>
- <h3 class="chapter-title"><a href="/cn/guide/contributing.html" class="sidebar-link ">如何参与社区</a></h3>
-
- </li>
-
-
- </ul>
-</div>
-
- <a class="btn-close-sidebar iconfont icon-close"></a>
- </div>
-</div>
-
- <div class="article-wrapper page-layout">
- <div class="doc-nav">
-
-
-
-<div class="doc-nav-version">
- <select class="versionBtn" stype="/cn/guide">
-
- <option value="2v" selected>v2.x</option>
- <option value="1v">v1.x</option>
-
- </select>
-</div>
-<div class="summary">
- <h2 class="part-title">
-
- 教程
-
- </h2>
- <ul class="doc-summary">
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- <li>
- <h3 class="chapter-title"><a href="/cn/guide/index.html" class="sidebar-link ">快速上手</a></h3>
-
- <ul class="chapter">
-
- <li>
- <a href="/cn/guide/set-up-env.html" class="sidebar-link ">搭建开发环境</a>
- </li>
-
- <li>
- <a href="/cn/guide/integrate-to-your-app.html" class="sidebar-link ">集成 Weex 到已有应用</a>
- </li>
-
- </ul>
-
- </li>
-
- <li>
- <h3 class="chapter-title"><a href="/cn/guide/intro/index.html" class="sidebar-link current ">介绍</a></h3>
-
- <ul class="chapter">
-
- <li>
- <a href="/cn/guide/intro/how-it-works.html" class="sidebar-link ">工作原理</a>
- </li>
-
- <li>
- <a href="/cn/guide/intro/web-dev-experience.html" class="sidebar-link ">Web 开发体验</a>
- </li>
-
- <li>
- <a href="/cn/guide/intro/using-vue.html" class="sidebar-link ">使用 Vue 开发 Weex 页面</a>
- </li>
-
- <li>
- <a href="/cn/guide/intro/write-once.html" class="sidebar-link ">一次撰写，多端运行</a>
- </li>
-
- <li>
- <a href="/cn/guide/intro/app-architecture.html" class="sidebar-link ">用 Weex 构建移动应用</a>
- </li>
-
- <li>
- <a href="/cn/guide/intro/page-architecture.html" class="sidebar-link ">Weex 页面结构</a>
- </li>
-
- </ul>
-
- </li>
-
- <li>
- <h3 class="chapter-title"><a href="/cn/guide/tools/index.html" class="sidebar-link ">周边工具</a></h3>
-
- <ul class="chapter">
-
- <li>
- <a href="/cn/guide/tools/toolkit.html" class="sidebar-link ">使用 weex-toolkit</a>
- </li>
-
- </ul>
-
- </li>
-
- <li>
- <h3 class="chapter-title"><a href="/cn/guide/contributing.html" class="sidebar-link ">如何参与社区</a></h3>
-
- </li>
-
-
- </ul>
-</div>
- </div>
-
-
-<article class="article article-type-guide">
- <div class="article-entry" itemprop="articleBody">
- <header class="article-header">
-
-
- <h1 class="article-title" itemprop="name">
- 介绍
- </h1>
-
-
- <time class="article-date" datetime="2017-06-14T04:08:17.000Z">Updated time: 14/06/2017</time>
-</header>
- <h1 id="Intro" class="article-heading"><a href="#Intro" class="headerlink" title="Intro"></a>Intro<a class="article-anchor" href="#Intro" aria-hidden="true"></a></h1><ul>
-<li><a href="./how-it-works.html">工作原理</a></li>
-<li><a href="./web-dev-experience.html">Web 开发体验</a></li>
-<li><a href="./using-vue.html">使用 Vue 开发 Weex 页面</a></li>
-<li><a href="./write-once.html">一次撰写，多端运行</a></li>
-<li><a href="./app-architecture.html">用 Weex 构建移动应用</a></li>
-<li><a href="./page-architecture.html">Weex 页面结构</a></li>
-</ul>
-
- </div>
-
-</article>
-</div>
-
- <footer id="footer">
- <div class="row clearfix">
- <div class="dropdown select-lang">
- <a href="javascript:;" class="dropdown-toggle">
- Language
- <span class="caret"></span>
- </a>
- <ul class="dropdown-menu pick-lang">
- <li>
- <a href="/guide/intro/index.html" data-lang="en">English</a>
- </li>
- <li>
- <a href="/cn/guide/intro/index.html" data-lang="zh-cn">中文</a>
- </li>
- </ul>
- </div>
- </div>
- <div class="disclaimer">
- <div><img src="//gw.alicdn.com/tfs/TB1pTBZQFXXXXX9XXXXXXXXXXXX-794-280.png" width="200px" alt="Apache Incubator"></div>
- <div><span class="title">Disclaimer:</span> Apache Weex is an effort undergoing incubation at The Apache Software Foundation (ASF), sponsored by the Apache Incubator. Incubation is required of all newly accepted projects until a further review indicates that the infrastructure, communications, and decision making process have stabilized in a manner consistent with other successful ASF projects. While incubation status is not necessarily a reflection of the completeness or stability of the code, it does indicate that the project has yet to be fully endorsed by the ASF.</div>
- <br/>
- </div>
- <hr>
- <div class="row">
- <p> <img src="//gw.alicdn.com/tfs/TB1bg8SQFXXXXcHXXXXXXXXXXXX-85-170.png" height="50px" alt="Apache"><span>Copyright(c) 2017 The Apache Software Foundation. Licensed under the </span> <a href="http://www.apache.org/licenses/LICENSE-2.0">Apache License, Version 2.0</a></p>
- </div>
- <div class="row clearfix">
- <div></div>
- </div>
-</footer>
- <div style="display: none;">
- <script src="//s95.cnzz.com/z_stat.php?id=1261496509&web_id=1261496509" language="JavaScript"></script>
-</div>
-
- <script src="/js/reqwest.js"></script>
- <script src="/js/common.js"></script>
-</body>
-</html>
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/55f57f79/cn/guide/intro/page-architecture.html
----------------------------------------------------------------------
diff --git a/cn/guide/intro/page-architecture.html b/cn/guide/intro/page-architecture.html
deleted file mode 100644
index 59672e1..0000000
--- a/cn/guide/intro/page-architecture.html
+++ /dev/null
@@ -1,533 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
- <meta charset="utf-8">
-
- <title>Weex 页面结构 | Weex</title>
- <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
- <meta name="description" content="Weex 页面结构一个 Weex 页面就是一个相对独立解耦的移动应用界面，它不仅包括了界面展示、更包含了逻辑处理、设备能力使用、生命周期管理等部分。 界面DOM 模型Weex 页面通过类似 HTML DOM 的方式管理界面，首先页面会被分解为一个 DOM 树，，每个 DOM 结点都代表了一个相对独立的 native 视图的单元。然后不同的视图单元之间通过树形结构组合在了一起，构成一个完整的页面。">
-<meta property="og:type" content="website">
-<meta property="og:title" content="Weex 页面结构">
-<meta property="og:url" content="https://weex-project.io/cn/guide/intro/page-architecture.html">
-<meta property="og:site_name" content="Weex">
-<meta property="og:description" content="Weex 页面结构一个 Weex 页面就是一个相对独立解耦的移动应用界面，它不仅包括了界面展示、更包含了逻辑处理、设备能力使用、生命周期管理等部分。 界面DOM 模型Weex 页面通过类似 HTML DOM 的方式管理界面，首先页面会被分解为一个 DOM 树，，每个 DOM 结点都代表了一个相对独立的 native 视图的单元。然后不同的视图单元之间通过树形结构组合在了一起，构成一个完整的页面。">
-<meta property="og:updated_time" content="2017-06-14T04:08:17.000Z">
-<meta name="twitter:card" content="summary">
-<meta name="twitter:title" content="Weex 页面结构">
-<meta name="twitter:description" content="Weex 页面结构一个 Weex 页面就是一个相对独立解耦的移动应用界面，它不仅包括了界面展示、更包含了逻辑处理、设备能力使用、生命周期管理等部分。 界面DOM 模型Weex 页面通过类似 HTML DOM 的方式管理界面，首先页面会被分解为一个 DOM 树，，每个 DOM 结点都代表了一个相对独立的 native 视图的单元。然后不同的视图单元之间通过树形结构组合在了一起，构成一个完整的页面。">
-
- <link rel="alternate" href="/atom.xml" title="Weex" type="application/atom+xml">
-
-
- <link rel="icon" href="//gw.alicdn.com/tps/TB1XNqxPXXXXXcSXVXXXXXXXXXX-64-63.png">
-
-
- <link href="//fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet" type="text/css">
-
- <link rel="stylesheet" href="/css/style.css">
- <link rel="stylesheet" href="/css/swiper.min.css">
-</head>
-
-<body id="guide" class="lang-cn">
-
- <script>
- window.PAGE_TYPE = "guide";
- window.ROOT = "/"
- </script>
- <header id="header">
- <div class="navbar">
- <a id="logo" href="/cn/">
- <img src="//img.alicdn.com/tps/TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59.svg" />
- </a>
- <div class="main-nav">
- <ul class="links">
- <li><a href="/cn/guide">教程</a></li>
- <li><a href="/cn/references">手册</a></li>
- <li class="dropdown">
- <a href="javascript:;">参考</a>
- <ul class="dropdown-menu subnav">
- <li>
- <a href="/cn/faq.html">FAQ</a>
- </li>
- <li>
- <a href="/cn/releasenote.html">版本说明</a>
- </li>
- </ul>
- </li>
- <li class="dropdown">
- <a href="javascript:;">工具和服务</a>
- <ul class="dropdown-menu subnav">
- <li>
- <a href="/cn/playground.html">Playground</a>
- </li>
- <li>
- <a href="/cn/guide/tools/toolkit.html">Weex-toolkit</a>
- </li>
- <li>
- <a href="http://dotwe.org" target="_blank">Code Snippets</a>
- </li>
- <li>
- <a href="https://market.dotwe.org" target="_blank">Market</a>
- </li>
- </ul>
- </li>
- </ul>
- <ul class="info">
- <li><a href="https://github.com/apache/incubator-weex/" target="_blank"><span class="btn-github iconfont icon-github"></span></a></li>
- </ul>
- <ul class="tools">
- <li>
- <div class="search">
- <form id="search-form" class="search-form"> <!-- 搜索框相关 -->
- <input type="text" id="search-input-header" name="q" results="0" class="form-control search-input" autocomplete="off" autocorrect="off"/>
- <span class="iconfont icon-search"></span>
- </form>
- <div class="results-panel">
- </div>
-</div>
- </li>
- <li>
- <div class="dropdown select-lang">
- <a href="javascript:;" class="dropdown-toggle">
- Language
- <span class="caret"></span>
- </a>
- <ul class="dropdown-menu pick-lang">
- <li>
- <a href="/guide/intro/page-architecture.html" data-lang="en">English</a>
- </li>
- <li>
- <a href="/cn/guide/intro/page-architecture.html" data-lang="zh-cn">中文</a>
- </li>
- </ul>
- </div>
- </li>
- <!--<li></li>-->
- </ul>
- </div>
- </div>
- <div id="mobile-nav">
- <a id="logo" href="/cn/">
- <img src="//img.alicdn.com/tps/TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59.svg" />
- </a>
- <a class="btn-menu"><span class="iconfont icon-nav"></span></a>
- </div>
-</header>
-
- <div id="sidebar" class="">
- <div class="sidebar-menu">
-
- <div class="search">
- <form id="search-form" class="search-form"> <!-- 搜索框相关 -->
- <input type="text" id="search-input-sidebar" name="q" results="0" class="form-control search-input" autocomplete="off" autocorrect="off"/>
- <span class="iconfont icon-search"></span>
- </form>
- <div class="results-panel">
- </div>
-</div>
-
-
-<div class="doc-nav-version">
- <select class="versionBtn" stype="/cn/guide">
-
- <option value="2v" selected>v2.x</option>
- <option value="1v">v1.x</option>
-
- </select>
-</div>
-<div class="summary">
- <h2 class="part-title">
-
- 教程
-
- </h2>
- <ul class="doc-summary">
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- <li>
- <h3 class="chapter-title"><a href="/cn/guide/index.html" class="sidebar-link ">快速上手</a></h3>
-
- <ul class="chapter">
-
- <li>
- <a href="/cn/guide/set-up-env.html" class="sidebar-link ">搭建开发环境</a>
- </li>
-
- <li>
- <a href="/cn/guide/integrate-to-your-app.html" class="sidebar-link ">集成 Weex 到已有应用</a>
- </li>
-
- </ul>
-
- </li>
-
- <li>
- <h3 class="chapter-title"><a href="/cn/guide/intro/index.html" class="sidebar-link ">介绍</a></h3>
-
- <ul class="chapter">
-
- <li>
- <a href="/cn/guide/intro/how-it-works.html" class="sidebar-link ">工作原理</a>
- </li>
-
- <li>
- <a href="/cn/guide/intro/web-dev-experience.html" class="sidebar-link ">Web 开发体验</a>
- </li>
-
- <li>
- <a href="/cn/guide/intro/using-vue.html" class="sidebar-link ">使用 Vue 开发 Weex 页面</a>
- </li>
-
- <li>
- <a href="/cn/guide/intro/write-once.html" class="sidebar-link ">一次撰写，多端运行</a>
- </li>
-
- <li>
- <a href="/cn/guide/intro/app-architecture.html" class="sidebar-link ">用 Weex 构建移动应用</a>
- </li>
-
- <li>
- <a href="/cn/guide/intro/page-architecture.html" class="sidebar-link current ">Weex 页面结构</a>
- </li>
-
- </ul>
-
- </li>
-
- <li>
- <h3 class="chapter-title"><a href="/cn/guide/tools/index.html" class="sidebar-link ">周边工具</a></h3>
-
- <ul class="chapter">
-
- <li>
- <a href="/cn/guide/tools/toolkit.html" class="sidebar-link ">使用 weex-toolkit</a>
- </li>
-
- </ul>
-
- </li>
-
- <li>
- <h3 class="chapter-title"><a href="/cn/guide/contributing.html" class="sidebar-link ">如何参与社区</a></h3>
-
- </li>
-
-
- </ul>
-</div>
-
- <a class="btn-close-sidebar iconfont icon-close"></a>
- </div>
-</div>
-
- <div class="article-wrapper page-layout">
- <div class="doc-nav">
-
-
-
-<div class="doc-nav-version">
- <select class="versionBtn" stype="/cn/guide">
-
- <option value="2v" selected>v2.x</option>
- <option value="1v">v1.x</option>
-
- </select>
-</div>
-<div class="summary">
- <h2 class="part-title">
-
- 教程
-
- </h2>
- <ul class="doc-summary">
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- <li>
- <h3 class="chapter-title"><a href="/cn/guide/index.html" class="sidebar-link ">快速上手</a></h3>
-
- <ul class="chapter">
-
- <li>
- <a href="/cn/guide/set-up-env.html" class="sidebar-link ">搭建开发环境</a>
- </li>
-
- <li>
- <a href="/cn/guide/integrate-to-your-app.html" class="sidebar-link ">集成 Weex 到已有应用</a>
- </li>
-
- </ul>
-
- </li>
-
- <li>
- <h3 class="chapter-title"><a href="/cn/guide/intro/index.html" class="sidebar-link ">介绍</a></h3>
-
- <ul class="chapter">
-
- <li>
- <a href="/cn/guide/intro/how-it-works.html" class="sidebar-link ">工作原理</a>
- </li>
-
- <li>
- <a href="/cn/guide/intro/web-dev-experience.html" class="sidebar-link ">Web 开发体验</a>
- </li>
-
- <li>
- <a href="/cn/guide/intro/using-vue.html" class="sidebar-link ">使用 Vue 开发 Weex 页面</a>
- </li>
-
- <li>
- <a href="/cn/guide/intro/write-once.html" class="sidebar-link ">一次撰写，多端运行</a>
- </li>
-
- <li>
- <a href="/cn/guide/intro/app-architecture.html" class="sidebar-link ">用 Weex 构建移动应用</a>
- </li>
-
- <li>
- <a href="/cn/guide/intro/page-architecture.html" class="sidebar-link current ">Weex 页面结构</a>
- </li>
-
- </ul>
-
- </li>
-
- <li>
- <h3 class="chapter-title"><a href="/cn/guide/tools/index.html" class="sidebar-link ">周边工具</a></h3>
-
- <ul class="chapter">
-
- <li>
- <a href="/cn/guide/tools/toolkit.html" class="sidebar-link ">使用 weex-toolkit</a>
- </li>
-
- </ul>
-
- </li>
-
- <li>
- <h3 class="chapter-title"><a href="/cn/guide/contributing.html" class="sidebar-link ">如何参与社区</a></h3>
-
- </li>
-
-
- </ul>
-</div>
- </div>
-
-
-<article class="article article-type-guide">
- <div class="article-entry" itemprop="articleBody">
- <header class="article-header">
-
-
- <h1 class="article-title" itemprop="name">
- Weex 页面结构
- </h1>
-
-
- <time class="article-date" datetime="2017-06-14T04:08:17.000Z">Updated time: 14/06/2017</time>
-</header>
- <h1 id="Weex-页面结构" class="article-heading"><a href="#Weex-页面结构" class="headerlink" title="Weex 页面结构"></a>Weex 页面结构<a class="article-anchor" href="#Weex-页面结构" aria-hidden="true"></a></h1><p>一个 Weex 页面就是一个相对独立解耦的移动应用界面，它不仅包括了界面展示、更包含了逻辑处理、设备能力使用、生命周期管理等部分。</p>
-<h2 id="界面" class="article-heading"><a href="#界面" class="headerlink" title="界面"></a>界面<a class="article-anchor" href="#界面" aria-hidden="true"></a></h2><h3 id="DOM-模型" class="article-heading"><a href="#DOM-模型" class="headerlink" title="DOM 模型"></a>DOM 模型<a class="article-anchor" href="#DOM-模型" aria-hidden="true"></a></h3><p>Weex 页面通过类似 HTML DOM 的方式管理界面，首先页面会被分解为一个 DOM 树，，每个 DOM 结点都代表了一个相对独立的 native 视图的单元。然后不同的视图单元之间通过树形结构组合在了一起，构成一个完整的页面。</p>
-<p><strong>相关链接</strong></p>
-<ul>
-<li><a href="../../references/native-dom-api.html">Weex Native DOM APIs</a></li>
-</ul>
-<h3 id="组件" class="article-heading"><a href="#组件" class="headerlink" title="组件"></a>组件<a class="article-anchor" href="#组件" aria-hidden="true"></a></h3><p>Weex 支持文字、图片、视频等内容型组件，也支持 div、list、scroller 等容器型组件，还包括 slider、input、textarea、switch 等多种特殊的组件。Weex 的界面就是由这些组件以 DOM 树的方式构建出来的。</p>
-<p><strong>相关链接</strong></p>
-<ul>
-<li><a href="../../references/components/index.html">Weex 组件列表</a></li>
-</ul>
-<h3 id="布局系统" class="article-heading"><a href="#布局系统" class="headerlink" title="布局系统"></a>布局系统<a class="article-anchor" href="#布局系统" aria-hidden="true"></a></h3><p>Weex 页面中的组件会按照一定的布局规范来进行排布，我们这里提供了 CSS 中的盒模型、flexbox 和 绝对/相对/固定/吸附布局这三大块布局模型。</p>
-<ul>
-<li>盒模型：通过宽、高、边框、内外边距、边框等 CSS 属性描述一个组件本身的尺寸。</li>
-<li>flexbox：通过 CSS 3 Flexbox 布局规范定义和描述组件之间的空间分布情况。</li>
-<li>position：支持 CSS position 属性中的 <code>absolute</code>, <code>relative</code>, <code>fixed</code>, <code>sticky</code> 位置类型，其中 <code>relative</code> 是默认值。</li>
-</ul>
-<h2 id="功能" class="article-heading"><a href="#功能" class="headerlink" title="功能"></a>功能<a class="article-anchor" href="#功能" aria-hidden="true"></a></h2><p>Weex 提供了非常丰富的系统功能 API，包括弹出存储、网络、导航、弹对话框和 toast 等，开发者可以在 Weex 页面通过获取一个 native module 的方式引入并调用这些客户端功能 API。</p>
-<p><strong>相关链接</strong></p>
-<ul>
-<li><a href="../../references/modules/index.html">Weex 模块列表</a></li>
-</ul>
-<h2 id="生命周期" class="article-heading"><a href="#生命周期" class="headerlink" title="生命周期"></a>生命周期<a class="article-anchor" href="#生命周期" aria-hidden="true"></a></h2><p>每个 Weex 页面都有其自身的生命周期，页面从开始被创建到最后被销毁，会经历到整个过程。这是通过对 Weex 页面的创建和销毁，在路由中通过 SDK 自行定义并实现的。</p>
-
- </div>
-
-</article>
-</div>
-
- <footer id="footer">
- <div class="row clearfix">
- <div class="dropdown select-lang">
- <a href="javascript:;" class="dropdown-toggle">
- Language
- <span class="caret"></span>
- </a>
- <ul class="dropdown-menu pick-lang">
- <li>
- <a href="/guide/intro/page-architecture.html" data-lang="en">English</a>
- </li>
- <li>
- <a href="/cn/guide/intro/page-architecture.html" data-lang="zh-cn">中文</a>
- </li>
- </ul>
- </div>
- </div>
- <div class="disclaimer">
- <div><img src="//gw.alicdn.com/tfs/TB1pTBZQFXXXXX9XXXXXXXXXXXX-794-280.png" width="200px" alt="Apache Incubator"></div>
- <div><span class="title">Disclaimer:</span> Apache Weex is an effort undergoing incubation at The Apache Software Foundation (ASF), sponsored by the Apache Incubator. Incubation is required of all newly accepted projects until a further review indicates that the infrastructure, communications, and decision making process have stabilized in a manner consistent with other successful ASF projects. While incubation status is not necessarily a reflection of the completeness or stability of the code, it does indicate that the project has yet to be fully endorsed by the ASF.</div>
- <br/>
- </div>
- <hr>
- <div class="row">
- <p> <img src="//gw.alicdn.com/tfs/TB1bg8SQFXXXXcHXXXXXXXXXXXX-85-170.png" height="50px" alt="Apache"><span>Copyright(c) 2017 The Apache Software Foundation. Licensed under the </span> <a href="http://www.apache.org/licenses/LICENSE-2.0">Apache License, Version 2.0</a></p>
- </div>
- <div class="row clearfix">
- <div></div>
- </div>
-</footer>
- <div style="display: none;">
- <script src="//s95.cnzz.com/z_stat.php?id=1261496509&web_id=1261496509" language="JavaScript"></script>
-</div>
-
- <script src="/js/reqwest.js"></script>
- <script src="/js/common.js"></script>
-</body>
-</html>