发送私信成功
满足所有需求，助您轻松工作
看看这三大移动Web开发框架哪个适合你
10:14 && 浏览量（676） &&
本文作者为W.Jason Gilmore，他曾开发了大量PHP和MySQL应用程序，并在各大专业媒体发表了众多脍炙人口的文章。
经常浏览Developer.com的读者也许注意到了这点：我最近特别关注JavaScript驱动的移动应用开发解决方案，先后撰文介绍了众多的相关话题，包括jQuery Mobile、jQTouch、Sencha Touch和PhoneGap。我得承认，要搞清楚这一批前沿技术并非易事，于是我这回概述一下这些主要的移动开发解决方案的主要特性和优点。但愿这篇概述多少可以帮你确定哪一种解决方案最适合你项目的具体要求。
jQuery Mobile适合你吗?
差不多二十年来，处理跨浏览器的HTML和CSS不一致问题一直让许多开发人员颇为苦恼。而Ajax的出现更是加剧了这些问题，因为开发人员现在要处理新的问题：无数与JavaScript有关的浏览器不兼容问题和异常现象。后来出现了jQuery：由于可以对基本的JavaScript任务进行强大的抽象处理，jQuery大大减轻了编写复杂的跨浏览器代码方面的压力。难怪jQuery一下子火了起来。
眼下移动应用开发人员面临可能更艰巨的挑战，这不仅是由于要处理各种各样的移动浏览器不兼容问题，还由于需要设计合理布局，以便适合移动设备所固有的各种外观尺寸和有限资源。这时候，jQuery Mobile应运而生，它自诩是“一种针对触摸而优化的Web框架，面向智能手机和平板电脑”，可以充分发挥jQuery和jQuery UI(查看jQuery UI实例http://jqueryui.com/)的优势。
虽然jQuery Mobile目前仍是测试版(第二个测试版在去年8月3日宣布发布)，但已经支持数量多得惊人的移动平台，包括安卓、黑莓、iOS和Windows Mobile等其他平台。同样出色的是，它还支持众多的窗口组件：由于jQuery Mobile对渐进增强(progressive enhancement)很重视，开发人员可以利用这些窗口组件，轻松创建统一的、跨移动设备的界面。务必将演示程序(查看演示程序地址http://jquerymobile.com/demos/1.0b2/#/demos/1.0b2/)装入到众多不同的设备上(包括你的桌面浏览器)，领略一下界面是如何变化以适合目标设备的。
此外，务必从桌面浏览器里面来查看演示程序的源代码;连刚入门的jQuery用户也会注意到该程序的代码很注重全面隔离页面布局和JavaScript驱动的功能。你会看到，整个应用程序都在一个文档里面，每个“页面”及其组成部分使用与自定义属性有关的DIV来定义。比如说：
&div&id="home"&target="_blank"&&
&&&&h1&WJGilmore,&LLC&/h1&&
&&&&p&Check&back®ularly&for&the&latest&information&about&Jason's&books!&/p&&&&&&&&
&&&&h1&Copyright&(C)&2011&W.J.&Gilmore,&LLC&/h1&&
jQuery Mobile的主要特性
虽然使用jQuery Mobile的理由有多个，但是下面三个理由显得尤为突出：
jQuery开发人员使用jQuery Mobile时会觉得驾轻就熟，那是由于两者使用共享的代码库。
如果目标用户群并不局限于使用某一种设备，关注跨平台兼容性这个优点很理想。
社区和企业的广泛参与促使像Dreamweaver CS 5.5这些广受欢迎的开发产品和像非常出色的Photo Swipe这一批值得关注的插件内置了对jQuery Mobile的支持。
jQTouch适合你吗?
那边厢，jQuery Mobile力求提供在众多移动设备上兼容的功能;这边厢，jQTouch项目而是将大部分精力投入到了支持基于WebKit的浏览器(Chrome和Safari)的设备上。因而，jQTouch应该与旨在部署到iPhone和安卓设备上的Web应用程序结合使用。支持针对WebKit而优化的动画以及旨在与移动设备的式样融为一体的多个主题。
要熟悉jQTouch的功能，最容易的办法就是通过你的移动设备或WebKit浏览器，仔细研究演示网站(演示网站地址http://jqtouch.com/preview/demos/main/#home)。我尤其建议查看演示程序的源代码；你会看到，与jQuery Mobile一样， jQTouch“页面”也使用一系列DIV元素和相关属性来组装，设计人员对这种方法应该会很熟悉。
jQTouch的主要特性
虽然使用jQTouch的理由有多个，但是下面两个理由显得尤为突出：
虽然jQTouch同样基于jQuery，但是其侧重点主要是为基于WebKit的浏览器提供经过优化的支持。因而，如果你打算一心锁定使用基于iOS或安卓的设备的用户，那么jQTouch可能比较合适。
与jQuery Mobile一样，jQTouch也采用了以HTML和CSS为中心的方法来开发页面，使用JavaScript专门致力于添加事件、动画及其他功能。如果你在与设计人员合作，或者开发人员不是特别精通JavaScript，在想方设法逐步熟悉移动Web开发，那么这种方法就很吸引人。
Sencha Touch适合你吗?
较之与jQuery Mobile和jQTouch，Sencha Touch学起来难度相对比较复杂，不过有弊也有利：虽然比较复杂，但是带来了强大的功能。作为Sencha公司的一款双许可证(商业版和GPL/FLOSS版)产品，Sencha Touch采用了与上述的几种移动开发框架全然不同的方法，原因在于布局和界面窗口组件是使用出色的JavaScript库构建而成的，而该JavaScript库恰好拥有丰富的实用特性，比如离线支持、独特布局和轻松制作主题的功能。
此外，Sencha Touch采取了从极其全面的角度来应对应用程序开发所固有的挑战，原因在于它支持可以完全直接开发MVC驱动的应用程序。为了形象地说明开发Sencha Touch应用程序与开发jQuery Mobile / jQTouch应用程序之间的反差到底有多明显，不妨将jQuery Mobile/jQTouch演示程序里面的源代码与用于仅仅创建和启动视口的下列Sencha Touch代码作一比较：
Ext.regApplication({&
&&name:&'App',&
&&defaultUrl:&'Index/index',&
&&launch:&function()&
&&&&this.viewport&=&new&App.views.Viewport();&
虽然这种方法对相对不熟悉JavaScript的新手来说可能难度很大，不过我还是建议花点时间尝试一下Sencha Touch，因为直观的语法、编写清晰的文档以及众多的配套实例对于你尽快上手会大有帮助。
Sencha Touch的主要特性
虽然使用Sencha Touch的理由有多个，但是下面三个理由显得尤为突出：
原生的MVC架构致力于为面向框架的开发人员消除紧张，他们可能在为如何合理地组织和管理JavaScript代码而苦恼。
Sencha开发人员已付出了很大的努力，在Sencha网站(Sencha网站地址http://www.sencha.com/)上发布了众多的教程和演示应用程序。
对于之前熟悉窗口组件工具包(想一想Swing和GTK+)的开发人员来说，窗口组件的布局和组织方面采用JavaScript驱动的方法自然很熟悉。
读者最后总是问我应该选择哪一种框架。回答总是一样：这得看情况。毫无疑问，Sencha Touch是这种开发框架当中功能最丰富的，不过有时候学起来比较困难。话虽如此，如果你的目的仅仅是为现有的应用程序提供对用户友好的移动界面，那么jQuery Mobile或jQTouch可能会提供一条阻力最小的道路。如果你给移动应用程序设的目标比较高，那么Sencha Touch极有可能完全值得你为此投入时间。不管你最后选择了什么样的解决方案，我都很想听听你使用后的感受!欢迎留言。
& 收藏(0) 收藏 +1 已收藏 取消
& 推荐上头条 推荐 +1 推荐上头条 已推荐
文章上传作者
jy的热门文章
暂时没有热门文章噢~&
开发者交流群：
DevStore技术交流群2：
运营交流群：
产品交流群：
深圳尺子科技有限公司
深圳市南山区蛇口网谷万海大厦C栋504
Copyright (C) 2015 DevStore. All Rights Reserved
DevStore用户登录
还没有DevStore帐号？
快捷登录：6 大主流Web框架优缺点对比!
6 大主流 Web 框架优缺点对比!
2017年末了，是该读些评论和做一些总结的时候了。当我们开始写这个系列博客的时候，我们知道 JavaScript/web
应用框架并不太好总结。我们努力对这个不可回答的问题作出回答：我该用什么样的框架?
在这篇文章中，我们将对这个系列中所提到的每款框架做一个总结，包括我们所认为的强项和弱项。另外，我们为你留下了一些值得思考的问题。
我是否需要使用框架?
如果不尝试回答这个问题就是我们的失职，这越来越成为社会上某些人的口头禅，在网络平台上的争论也已经发展到犹如不需要额外编写 API 能更简单创建 Web
应用那样的地步。就像本系列中所有的内容一样，我们的回答也大都是依据这些内容。
虽然无框架也能正常工作，但是，这也是有代价的。那些主张无框架手写 Javascript
的人，那些通常会被我们认为是斯德哥尔摩综合症(情感上会依赖他人且容易受感动的人)的人，忘记了网络平台上有多套快速发展的 API
，至少有三种不同的技术，三种截然不同的语法。web 平台规范并确定了超过 12000 个 API，事实上浏览器中的维恩图也显示了这些巨大差距。
如果你是一个有着深厚技术和经验的人，确实可以坦诚的不使用框架。但你团队的其他成员呢?你手下的那些人呢?或者当你的决定把你自己陷入困境的时候呢?
这种情况下，我们将会看到一个不用框架的团队在展开冒险，最后他们会发现自己创建了一个需要自己着手维护的框架。接着就会出现寻找人才的问题，他们不需要知道框架是如何工作的，只需要寻找会调用网络平台
API 的高级技能人才或者一些自称有经验的人才，最后却发现缺少利于团队发展的技能深度和经验。
团队应该避免虚假等价(false equivalence)的陷阱，很显然，在 web
技术的应用方面具有创新性的公司在不断提高他们的市场价值和竞争力，Google、Facebook 和 Netflix
公司都是很好的例子。但是大多数公司不是这样，他们应该承认这一点。
angular 2+ 有什么优势?
Angular 2+ 的最大优势在于它的流行程度。也有人认为它和 Google 密切相关的名字，会影响团队使用它。Angular 1
的迅速流行是因为那些来自其他交互式应用程序开发环境的人会发现对于开发单页面 web 应用程序具有相似的模型-视图模式。
通过对 Angular 1 进行现代化演变和重新构建框架的某些部分，Angular 2+
已经真正的爆发了，大量的正式的和非正式培训机构数量都让人印象深刻，开发者有很强的市场竞争力。对于用户来说它有一套用于构建用户界面的丰富组件，这也是本系列中少有的几个框架能够做到这点。
有什么弱点和挑战?
我们觉得 Angular 框架着重于在单个页面应用程序中创建用户界面并没有处理构建完整的 web
应用这个更大的关注点，如果不及早确定下来，这将会导致整个项目难以维护，在实际项目中，运行时提供不属于核心框架的技术往往让人觉得不可思议，这大大降低了
TypeScript 对最终开发者的价值。
未来将何去何从
Angular 5 刚刚发布，这看来是 Angular 已经成功的印证了快速发布版本的承诺，在 Google 的持续支持下，Angular
会越来越成熟。
像许多的大型组织一样，Google 具有多重(分裂)的人格，从外表上看，Angular
团队和那些专注于浏览器标准的团队之间显得很和谐。但我们的观点是，和谐只是一层薄薄的窗户纸。Angular 团队对于 web 组件和渐进式 web
应用没有一个真正解决方案。我们认为，业界普遍认可的标准将会在 Angular 框架中会逐步实现，这将会影响到如何更好的构建 Angular
应用将成为一个中/长期的风险。
何时选择angular 2+
如果你需要在一个大型的框架内获取技术资源，框架内的技术通常很容易移植;或者你需要在框架中训练开发人员，并且还要有一定的信心，他们会在短期内获得一定的开发能力，这样的话你可以考虑
Angular 2+ 。需要注意的是 Angular1(angular.js)与 Angular2+ 是截然不同的，其中的应用、技术和经验不能直接移植到
Angular2+ 的开发中去。
如果你的 web 应用能够很好的转化为标准的模型-视图模式，那么你也可以忽略其他直接考虑使用 Angular2+ 。
如果你对 Google Material UX 设计模式满意，那么 Material Angular
是遵循该模式的一种快速、简单且可靠的方式。
react + redux 有什么优势?
React 和 Redux
的最大优势在于它们相对简单和专注。做一件事情并把它做好是非常困难的，但这两个库都很有效地完成了它们的目标。虽然对于某些状态容器方法可能是外部的，但大多数开发人员还是可以轻松掌握概念，并了解单向数据体系结构的好处，简化大量的用户界面应用程序。
有什么弱点和挑战?
React 和 Redux 最大的弱点不是它们是什么，而是它们不是什么。要构建一个功能丰富的 Web 应用程序，你需要许多功能，一旦脱离 React
和 Redux 和其他一些库的核心，你将发现一个非常分散的社区，拥有无数的解决方案和模式，不容易整合在一起。
因此，虽然 React 和 Redux
都是非常专注的库，但缺乏经验的团队还是会很容易地生成不可维护的解决方案，而不是意识到他们所做的选择会导致性能不佳或错误。
即使有经验的开发人员也可能意识到，一个松散的架构或惯例可能会在未来困扰他们。
假省钱是一种对自己的欺骗，组织范围内采用 React 和 Redux 将轻松降低无效率问题。 没有其他库和模式的广泛约定和标准化，标准化 React
+ Redux 比较于我们正在采用的 JavaScript 来编写我们的应用程序效率要高。
未来将何去何从?
Facebook 和 React 最近从繁琐的附加专利纠纷中抽离，他们认识到，就像其他项目一样，更广泛的社区能够提高自己的声音。 我觉得这有助于
Facebook 意识到他们还不能更好地了解我们，相信我们来引导项目。 希望这将继续贯穿项目的特点和技术方向。
很难预测 React 和 Redux 的未来。 但是，将库集中在一起，确实会显着提高适应性，大多数React + Redux
模式都会促进一个分离的体系结构，从而可以轻松地进行重构和迭代。 两年前，大家喜欢的还是React + Flux，但整个社区很快就拥抱了Redux。
思维或模式的其他重大转变可能很容易被采纳。 这种关键能力可能会持续到未来。
如何选择 react + redux?
如果你很少需要手把手指导，并且正在寻找更好的库而不是全面的框架，那么 React + Redux 可能是正确的。
在这一过程中，你不仅需要对你的团队和组织的能力保持诚实，还要在你的初始开发过程中，以及在整个应用程序的长期维护过程中保持诚实。
Vue.js 有什么优势?
渐进式构建能力是 vue.js 最大的优势，vue 有一个简洁而且合理的架构，使得它易于理解和构建。
vue 有一个强大的充满激情人群的社区，这为 vue.js 增加了巨大的价值，使得为一个空白项目创建一个综合的解决方案变得十分容易。
有什么弱点和挑战?
在模型-视图应用程序和状态容器类型的应用程序之间的互相转换可能会令人感到困惑，即使没有完美包含一个模式到另一个模式的完美转换，但让人感觉希望能维持两个模式的相关性。对于那些期待
vue.js 完美解决方案，并可能导致难以维护不一致的应用程序的人来说，这至少是令人困惑的。
一个更大的挑战是 vue.js
依赖于一个单独的人，很明显，其他的项目基本是由一个组织提供支持，但这让人感觉更加有意义，虽然它有一个强大文件的社区和许多有创新的新增项目，但是 vue
核心的开发基本落在一个人身上。
我们很高兴看到 vue 更加容易接受新兴的标准方法，但是它的类似于 web 组件的模式，而不是真正的 web 组件，这可能是 vue
所得不偿失的地方。
未来将何去何从?
虽然 vue.js
有相当广泛的应用，但也很难预测在中期发展中这个势头能持续多久，它不是由一个商业组织直接支持并维护，因此，这很大程度上依赖于维护者的生存能力和继续维护下去的愿望来决定。
它也表现出了一定程度的语言适应能力，并且随着某些模式的落伍和失宠而继续保持自身语言的现代化和时代性，目前没有迹象表明 vue.js
架构将来无法适应进一步发展。
何时选择Vue.js
如果你有一个传统的 web 应用程序，并需要一个强壮稳健的应用程序层，那么 vue.js
可能是一个很好的选择，它有清晰的模式，即使没有经验的团队也能正确或者错误的使用它。尽管 vue UX 框架没有开箱即用的功能，但在 vue.js
上也能大量持续性构建应用，这将有利于你的项目。
Dojo2 有什么优势?
Dojo2 专注于带来更多构建在状态容器体系之上的动态组件的体验模式，填补了 react+redux 等框架的许多空白。
Dojo2 也知道它不单单只是在自己的生态圈发展，通过包含 web
组件导入和导出功能，也意识到需要支持不同的应用实例，但它依旧提供了一个结构化和固有的框架价值，Dojo2 的核心基础仍然是专注于提供交互性。
Dojo2 觉得它提供了大量重要的功能和解决方案，这对于构建完整的 web
应用是十分重要的，对于其他大多数框架而言这并不是重点。提供一个国际化系统和广泛的易接入性的模式也是其中之一，同时也提供一个主题系统和演进模式，用以确保不仅能为
Typescript/JavaScript 提供良好的代码开发，也能像 CSS 那样管理资源。
Dojo2 专注于提供一个结构化和符合人体工程学的开发环境，通过使用 typescript
和其他开发模式，它试图提供安全的防护机制去引导新手开发人员，通过专注于提高框架开发效率和开发安全性，旨在让开发团队能够快速交付更好的 web 应用程序。
有什么弱点和挑战?
有争论的是，通过进一步延长 Dojo2 的发布时间的做法是否是在阻碍框架的发展，反观其他项目由于其资源的扩大能够继续发展和快速迭代，导致 Dojo2
目前明确的处在一个拥挤的竞争环境之中。
这也许是一个潜在的发展机遇和挑战，同时希望能够在灵活性和交互性上而不是别的特殊理由去使用 Dojo2 。
未来将何去何从?
Dojo2 将是未来优秀 web 框架之一，它将继续努力为构建可扩展性的 web 应用程序提供清晰的模式和指导。随着新标准的不断出现，Dojo2
将进一步努力去在框架中实现新的标准方法，继续尝试扩大框架的开放性和交互性，创造适合更多人使用的解决方案。
何时选择Dojo2?
如果你想采用一个灵活的、现代的、响应式的 web 应用程序架构，并且你需要很多智能化的默认设置，那么 Dojo2
将是一个不错的选择。不用去拼凑和构建一个管道，并且为你提供更高阶的命令模式让你可以更加专注的开发项目，更加确认它是直接为你可以直接生产开发所准备的。另外，如果你了解
typescript 的优势，Dojo2 会十分严谨的使用 typescript 来管理并提供一个稳健的开发者开发环境。
Wmber.js有什么优势?
Ember.js可能是最固执己见的主流框架，这也是其最大的优势。它有创建Ember.js应用程序的正确方法，通常只有一种方法来创建应用程序。Ember.js更类似于一个产品或平台，在那里你会到一个供应商的长期支持和维护。Ember.js提供了对其平台的全面版本管理，升级工具以及对API升级的强大指导和工具。成熟，是对Ember.js的一个很好的总结。
Ember.js多年来已经证明，它可以保持其框架并使其与现代标准保持一致，同时不会过早遗忘传统浏览器。
Ember.js有一个清晰合理的架构来全面构建Web应用程序。
有什么弱点和挑战?
Ember.js可能是最固执己见的主流框架，这也是它最大的弱点。虽然社区是开放的并且接受投资，但是仍然需要找到一个正确的方式来摆脱下滑的趋势，这可能是具有挑战性的问题。
拥有一个丰富的第三方社区也可能具有挑战性。由于没有开箱即用的UX组件，这很可能会让你使用第三方套件。你可能会发现，虽然这些套件并不全面，你将需要建立或寻找其他组件。由于Ember.js没有扩展，所以对如何交互和管理DOM，你会发现你有不一致的部件，而且也没有提供一个易于管理的界面。
未来该何去何从?
Ember.js的主要贡献者是JavaScript语言标准委员会TC39的核心参与者。在过去的几年中，Ember.js对JavaScript的方向比任何其他框架都有更直接的影响。我们的观点是，这将在未来继续受影响，并帮助促进JavaScript的特性和模式。这也意味着Ember.js将继续保持与未来标准的紧密结合的关系。
Ember.js不可能在将来随时消失，尽管他们的创新很可能是通过与Ember.js紧密结合的其他项目来实现的，比如Glimmer，它为Ember.js应用程序提供了一个新的UI框架，该框架基于TypeScript。
为什么我会选择Ember.js
如果你在框架中寻找成熟度，那么Ember.js很难出错。另外，由于Ember.js提供的内容被理解，并且有广泛的官方和官方认可的培训，以及严格的结构，找到能够建立基于Ember.js的应用程序的人才可能比其他框架更容易。也可以教大型团队如何构建应用程序，并确保整个团队的共同对话和理解。
如果你想要对社区保持信心，并批判性地思考他们平台的变化，那么Ember.js会是一个很好的考虑因素。您可以花更少的时间跟随当前的技术趋势，并更多地关注创建应用程序。
aurelia有哪些优势?弱点和挑战?
Aurelia有很多关于构建Web应用程序的方法，结构和想法。 这个框架的编写有很多技术上的优点。
我们估计最大的挑战就是核心发展的动力和临界物质的缺乏。我们感觉很多的观点和概念都是我们对其他框架的批评性的想法，但是这些愿望都没有完全交付。它似乎就像是一个正在进行的工作一样，就像Dojo
2，但是它已经是一个已发布的框架。
大部分的Aurelia是坐落在一个人的肩膀上，如果这个人的的注意力或可用性改变，那么将会带来挑战。
未来会如何?
对于Aurelia来说，有一个很大的机会。如果它能够实现他的愿景，他将要完整的保存这个构建Web应用程序的已有的模板，但会以更健全、更完整的方式交付。我们不知道Aurelia是否能够充分的利用这次机会。
为什么我会选择aurelia?
如果您致力于Web模型视图应用程序模块，并且你和你的团队试图想把一些事做的更好，那么Aurelia会是一个选择。它就像是一个正在寻求一个更大的社区来帮助它的发展和进化的框架。
最后的思考
真心希望这一系列的帖子至少给了你一点思考，你应该很容易有这样的想法那就是不可能有可验证的正确决定。同时，希望你也意识到没有普遍的错误决定，你应该用一些问题和思考来武装自己，帮助你选择框架。
一个框架仅仅是一些模式的体现，一些科技的集成，源码帮助我们更加容易去构建和维护网站应用，如果你是个体开发者，我们能提供的最好的建议是花费尽可能多的时间使用那些你认为可以为你所用的框架。
如果你是公司的管理者或骨干领导要去做决定，请记住特点列表只是决定的一方面，有时候并不是越多越好。挑战你自己活着你的团队使用一个整体的框架，但是首先，列出对你和你的组织重要的列表，尤其是那些技术之外特点。
成都Web前端培训哪家好，当然是成都达内培训，成都达内是一家专业的程序员培训机构，专注于网络营销课程，，成都软件测试培训，成都php培训，成都java培训，成都安卓培训，成都会计实操培训，web前端开发，成都网络营销培训，成都it培训，成都编程培训，成都程序员培训等IT培训,专业的成都软件培训机构，专业师资授课，真实项目实战、零首付、低押金、名企就业，达内培训，成都Web前端培训机构www.cdtedu.com/pxkc/web/
(责任编辑：成都达内)
未获取畅言代码，错误消息：sign error
成都达内：代码质量是优秀程序员......
成都it培训：程序员究竟该如何治......
程序员和产品经理之间的故事大家......
成都IT培训：程序员在2017年需要面......
成都达内：一位学员，写给自己的......
达内培训：Linux云计算学员红帽考......
成都达内：参加达内Linux云计算培......
成都it培训：Linux工程师到底是做......
CopyRight (C)
成都达内科技职业技能培训学校 （www.cdtedu.com）
川公网安备 07号为什么我们需要一个兼容「微信小程序」的Web框架？a year ago赞赏还没有人赞赏，快来当第一个赞赏的人吧！43收藏分享举报文章被以下专栏收录待我代码编成，娶你为妻可好 @花仲马{&debug&:false,&apiRoot&:&&,&paySDK&:&https:\u002F\u002Fpay.zhihu.com\u002Fapi\u002Fjs&,&wechatConfigAPI&:&\u002Fapi\u002Fwechat\u002Fjssdkconfig&,&name&:&production&,&instance&:&column&,&tokens&:{&X-XSRF-TOKEN&:null,&X-UDID&:null,&Authorization&:&oauth c3cef7c66aa9e6a1e3160e20&}}{&database&:{&Post&:{&&:{&isPending&:false,&contributes&:[{&sourceColumn&:{&lastUpdated&:,&description&:&待我代码编成，娶你为妻可好 @花仲马&,&permission&:&COLUMN_PUBLIC&,&memberId&:2055680,&contributePermission&:&COLUMN_PUBLIC&,&translatedCommentPermission&:&all&,&canManage&:true,&intro&:&待我代码编成，娶你为妻可好 @花仲马&,&urlToken&:&phodal&,&id&:9221,&imagePath&:&6eaca946f1f2b19b58b2.jpeg&,&slug&:&phodal&,&applyReason&:&&,&name&:&Phodal - 手工艺人&,&title&:&Phodal - 手工艺人&,&url&:&https:\u002F\u002Fzhuanlan.zhihu.com\u002Fphodal&,&commentPermission&:&COLUMN_ALL_CAN_COMMENT&,&canPost&:true,&created&:,&state&:&COLUMN_NORMAL&,&followers&:11162,&avatar&:{&id&:&6eaca946f1f2b19b58b2&,&template&:&https:\u002F\u002Fpic2.zhimg.com\u002F{id}_{size}.jpg&},&activateAuthorRequested&:false,&following&:false,&imageUrl&:&https:\u002F\u002Fpic2.zhimg.com\u002F6eaca946f1f2b19b58b2_l.jpg&,&articlesCount&:142},&state&:&accepted&,&targetPost&:{&titleImage&:&https:\u002F\u002Fpic1.zhimg.com\u002Fv2-0b19bca43c0b27b341a90_r.jpg&,&lastUpdated&:,&imagePath&:&v2-0b19bca43c0b27b341a90.jpg&,&permission&:&ARTICLE_PUBLIC&,&topics&:[225,],&summary&:&在这几天的代码探索里，我写了几篇文章：\u003Ca href=\&http:\u002F\u002Fmp.weixin.qq.com\u002Fs?__biz=MjM5Mjg4NDMwMA==&mid=&idx=1&sn=47c7f672caf629cd846e315b8df2b1c5&scene=21#wechat_redirect\& data-editable=\&true\& data-title=\&「微信小程序」官方示例代码浅析\&\u003E「微信小程序」官方示例代码浅析\u003C\u002Fa\u003E\u003Ca href=\&http:\u002F\u002Fmp.weixin.qq.com\u002Fs?__biz=MjM5Mjg4NDMwMA==&mid=&idx=1&sn=ea8bb7d1bfb1&scene=21#wechat_redirect\& data-editable=\&true\& data-title=\&「微信小程序」剖析（一）：运行机制\&\u003E「微信小程序」剖析（一）：运行机制\u003C\u002Fa\u003E\u003Ca href=\&http:\u002F\u002Fmp.weixin.qq.com\u002Fs?__biz=MjM5Mjg4NDMwMA==&mid=&idx=1&sn=93a868cdb59b5dd77c65c7a&scene=21#wechat_redirect\& data-editable=\&true\& data-title=\&「微信小程序」剖析（二）：框架原理\&\u003E「微信小程序」剖析（二）：框架原理\u003C\u002Fa\u003E我的目的其实比较简单：我们需要想一个办法，来让让微信小程序运行在普通浏览器。对于产品经理、CEO等等的人…&,©Permission&:&ARTICLE_COPYABLE&,&translatedCommentPermission&:&all&,&likes&:0,&origAuthorId&:0,&publishedTime&:&T22:48:09+08:00&,&sourceUrl&:&&,&urlToken&:,&id&:1234553,&withContent&:false,&slug&:,&bigTitleImage&:false,&title&:&为什么我们需要一个兼容「微信小程序」的Web框架？&,&url&:&\u002Fp\u002F&,&commentPermission&:&ARTICLE_ALL_CAN_COMMENT&,&snapshotUrl&:&&,&created&:,&comments&:0,&columnId&:9221,&content&:&&,&parentId&:0,&state&:&ARTICLE_PUBLISHED&,&imageUrl&:&https:\u002F\u002Fpic1.zhimg.com\u002Fv2-0b19bca43c0b27b341a90_r.jpg&,&author&:{&bio&:&待我代码编成，娶你为妻可好 @花仲马&,&isFollowing&:false,&hash&:&fea2f801ab1dc87a87f8bdeb6fdb3394&,&uid&:20,&isOrg&:false,&slug&:&phodal&,&isFollowed&:false,&description&:&工程师 \u002F 咨询师 \u002F 作家 \u002F 设计学徒&,&name&:&phodal&,&profileUrl&:&https:\u002F\u002Fwww.zhihu.com\u002Fpeople\u002Fphodal&,&avatar&:{&id&:&cebfe26a7aecb4&,&template&:&https:\u002F\u002Fpic2.zhimg.com\u002F{id}_{size}.jpg&},&isOrgWhiteList&:false,&isBanned&:false},&memberId&:2055680,&excerptTitle&:&&,&voteType&:&ARTICLE_VOTE_CLEAR&},&id&:438395}],&title&:&为什么我们需要一个兼容「微信小程序」的Web框架？&,&author&:&phodal&,&content&:&\u003Cp\u003E在这几天的代码探索里，我写了几篇文章：\u003C\u002Fp\u003E\u003Col\u003E\u003Cli\u003E\u003Ca href=\&http:\u002F\u002Flink.zhihu.com\u002F?target=http%3A\u002F\u002Fmp.weixin.qq.com\u002Fs%3F__biz%3DMjM5Mjg4NDMwMA%3D%3D%26mid%3D%26idx%3D1%26sn%3D47c7f672caf629cd846e315b8df2b1c5%26scene%3D21%23wechat_redirect\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003E「微信小程序」官方示例代码浅析\u003C\u002Fa\u003E\u003C\u002Fli\u003E\u003Cli\u003E\u003Ca href=\&http:\u002F\u002Flink.zhihu.com\u002F?target=http%3A\u002F\u002Fmp.weixin.qq.com\u002Fs%3F__biz%3DMjM5Mjg4NDMwMA%3D%3D%26mid%3D%26idx%3D1%26sn%3Dea8bb7d1bfb1%26scene%3D21%23wechat_redirect\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003E「微信小程序」剖析（一）：运行机制\u003C\u002Fa\u003E\u003C\u002Fli\u003E\u003Cli\u003E\u003Ca href=\&http:\u002F\u002Flink.zhihu.com\u002F?target=http%3A\u002F\u002Fmp.weixin.qq.com\u002Fs%3F__biz%3DMjM5Mjg4NDMwMA%3D%3D%26mid%3D%26idx%3D1%26sn%3D93a868cdb59b5dd77c65c7a%26scene%3D21%23wechat_redirect\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003E「微信小程序」剖析（二）：框架原理\u003C\u002Fa\u003E\u003C\u002Fli\u003E\u003C\u002Fol\u003E\u003Cp\u003E我的目的其实比较简单：\u003C\u002Fp\u003E\u003Cblockquote\u003E\u003Cp\u003E我们需要想一个办法，来让让微信小程序运行在普通浏览器。\u003C\u002Fp\u003E\u003C\u002Fblockquote\u003E\u003Cp\u003E对于产品经理、CEO等等的人来说，这并不重要，但是对于开发者来说这相当的重要。\u003C\u002Fp\u003E\u003Ch2\u003E从微信web开发者工具说起\u003C\u002Fh2\u003E\u003Cp\u003E微信web开发者工具带来了内置了完整的web开发工具集：\u003C\u002Fp\u003E\u003Cul\u003E\u003Cli\u003EIDE\u003C\u002Fli\u003E\u003Cli\u003E构建系统\u003C\u002Fli\u003E\u003Cli\u003E自动化脚本\u003C\u002Fli\u003E\u003Cli\u003E。。。\u003C\u002Fli\u003E\u003C\u002Ful\u003E\u003Cp\u003E我们所要做的事情就只是编写我们的代码，这个开发者工具就会帮我们照顾其他工作。想想就觉得很美好，但是最后我们发布出去的是一个wx包——微信wx包。尽管从上一篇文章里，我们可以猜测到它在开发时是WebView，运行时是WebView + Native。\u003C\u002Fp\u003E\u003Cp\u003E而在这个wx包里压缩的则是我们编写的wxml + wxss + js，这也意味着我们在微信客户端上安装这个APP的时候，下载下来极有可能就是这个wx包，然后解压运行。当时如果它是纯WebView的话，那么它就可以在服务器上运行一些预编译的工作了。\u003C\u002Fp\u003E\u003Cp\u003E这并不重要，重要的是我们写的web应用已经无法在Web上运行了。而这个工具称之为 web 开发者工具。\u003C\u002Fp\u003E\u003Ch2\u003ECordova与ATM平台Web框架\u003C\u002Fh2\u003E\u003Cp\u003E以前，我们为iOS平台、Android平台写代码；\u003Cbr\u003E现在，我们为微信平台写代码；\u003Cbr\u003E以后，我们还会有支付宝等等的平台写代码。\u003C\u002Fp\u003E\u003Cp\u003E这就变成一个很有趣的循环。\u003C\u002Fp\u003E\u003Cp\u003E故事最开始的时候：\u003C\u002Fp\u003E\u003Cp\u003E有了iOS平台，人们开始为自己的应用写Objective-C代码；\u003Cbr\u003E有了Android平台，人们开始自己的应用写Android代码；\u003C\u002Fp\u003E\u003Cp\u003E有一天，人们开始受不了不同平台的问题，于是写了Cordova，现在我们只需要写一份代码即可。\u003C\u002Fp\u003E\u003Cp\u003E现在就更有意思了，毕竟小程序这种东西，巨头们都是不会放过的。。。\u003C\u002Fp\u003E\u003Cp\u003E有了微信小程序，人们开始用WXML + WXSS写微信web小程序。\u003Cbr\u003E有了支付宝小程序，人们开始有ALIML + ALISS写支付宝小程序。\u003C\u002Fp\u003E\u003Cp\u003E有一天，人们又受不了不同平台的问题，于是写了Avodroc，现在我们仍只需要写一份代码即可。\u003C\u002Fp\u003E\u003Cp\u003E乐观地一想，我们可以顺手用Cordova + Avodroc 做一个微信小程序的平台，在上面运行的程序就不会受到数量限制了。除去安装量的限制，我们就不会受各大应用商店的限制——当然我说的是Android平台。\u003C\u002Fp\u003E\u003Cp\u003E你说呢？\u003C\u002Fp\u003E\u003Cfigure\u003E\u003Cnoscript\u003E\u003Cimg src=\&https:\u002F\u002Fpic4.zhimg.com\u002F6dbbfd4eaf255d_b.jpg\& data-rawwidth=\&344\& data-rawheight=\&344\& class=\&content_image\& width=\&344\&\u003E\u003C\u002Fnoscript\u003E\u003Cimg src=\&data:image\u002Fsvg+utf8,&svg%20xmlns='http:\u002F\u002Fwww.w3.org\u002FFsvg'%20width='344'%20height='344'&&\u002Fsvg&\& data-rawwidth=\&344\& data-rawheight=\&344\& class=\&content_image lazy\& width=\&344\& data-actualsrc=\&https:\u002F\u002Fpic4.zhimg.com\u002F6dbbfd4eaf255d_b.jpg\&\u003E\u003C\u002Ffigure\u003E&,&updated&:new Date(&T14:48:09.000Z&),&canComment&:false,&commentPermission&:&anyone&,&commentCount&:11,&collapsedCount&:0,&likeCount&:43,&state&:&published&,&isLiked&:false,&slug&:&&,&lastestTipjarors&:[],&isTitleImageFullScreen&:false,&rating&:&none&,&titleImage&:&https:\u002F\u002Fpic1.zhimg.com\u002Fv2-0b19bca43c0b27b341a90_r.jpg&,&links&:{&comments&:&\u002Fapi\u002Fposts\u002F2Fcomments&},&reviewers&:[],&topics&:[{&url&:&https:\u002F\u002Fwww.zhihu.com\u002Ftopic\u002F&,&id&:&&,&name&:&前端开发&},{&url&:&https:\u002F\u002Fwww.zhihu.com\u002Ftopic\u002F&,&id&:&&,&name&:&微信&},{&url&:&https:\u002F\u002Fwww.zhihu.com\u002Ftopic\u002F&,&id&:&&,&name&:&程序员&}],&adminClosedComment&:false,&titleImageSize&:{&width&:700,&height&:274},&href&:&\u002Fapi\u002Fposts\u002F&,&excerptTitle&:&&,&column&:{&slug&:&phodal&,&name&:&Phodal - 手工艺人&},&tipjarState&:&activated&,&tipjarTagLine&:&真诚赞赏，手留余香&,&sourceUrl&:&&,&pageCommentsCount&:11,&tipjarorCount&:0,&annotationAction&:[],&hasPublishingDraft&:false,&snapshotUrl&:&&,&publishedTime&:&T22:48:09+08:00&,&url&:&\u002Fp\u002F&,&lastestLikers&:[{&bio&:&算法工程师&,&isFollowing&:false,&hash&:&36d885fc893ea2e2a8eab110fc9031c8&,&uid&:32,&isOrg&:false,&slug&:&iamsile&,&isFollowed&:false,&description&:&赢得了天下，输了她，后来发现天下也没有赢过&,&name&:&iamsile&,&profileUrl&:&https:\u002F\u002Fwww.zhihu.com\u002Fpeople\u002Fiamsile&,&avatar&:{&id&:&ead123db2&,&template&:&https:\u002F\u002Fpic2.zhimg.com\u002F{id}_{size}.jpg&},&isOrgWhiteList&:false,&isBanned&:false},{&bio&:&&,&isFollowing&:false,&hash&:&86c6db9ab9a42ab72d68a3&,&uid&:80,&isOrg&:false,&slug&:&ke-le-21-61&,&isFollowed&:false,&description&:&&,&name&:&可乐&,&profileUrl&:&https:\u002F\u002Fwww.zhihu.com\u002Fpeople\u002Fke-le-21-61&,&avatar&:{&id&:&v2-c136dfb48b849a54aefefb&,&template&:&https:\u002F\u002Fpic3.zhimg.com\u002F{id}_{size}.jpg&},&isOrgWhiteList&:false,&isBanned&:false},{&bio&:&挖掘机攻城狮&,&isFollowing&:false,&hash&:&fcc31eb5f1fbb&,&uid&:44,&isOrg&:false,&slug&:&tankle&,&isFollowed&:false,&description&:&卖身给三石哥，前往杭州搬砖了。&,&name&:&Jason Tan&,&profileUrl&:&https:\u002F\u002Fwww.zhihu.com\u002Fpeople\u002Ftankle&,&avatar&:{&id&:&d2e41fdc9cb5&,&template&:&https:\u002F\u002Fpic3.zhimg.com\u002F{id}_{size}.jpg&},&isOrgWhiteList&:false,&isBanned&:false},{&bio&:&一无所知的小白&,&isFollowing&:false,&hash&:&a10a505f078ea52a5dd7b2&,&uid&:985900,&isOrg&:false,&slug&:&Canaan234&,&isFollowed&:false,&description&:&&,&name&:&Canaan&,&profileUrl&:&https:\u002F\u002Fwww.zhihu.com\u002Fpeople\u002FCanaan234&,&avatar&:{&id&:&6e0af261480dcece4b347b&,&template&:&https:\u002F\u002Fpic3.zhimg.com\u002F{id}_{size}.jpg&},&isOrgWhiteList&:false,&isBanned&:false},{&bio&:&&,&isFollowing&:false,&hash&:&d59a8e9a1118&,&uid&:877440,&isOrg&:false,&slug&:&halo117&,&isFollowed&:false,&description&:&&,&name&:&halo117&,&profileUrl&:&https:\u002F\u002Fwww.zhihu.com\u002Fpeople\u002Fhalo117&,&avatar&:{&id&:&22a6e993c22e3cd9c466c&,&template&:&https:\u002F\u002Fpic3.zhimg.com\u002F{id}_{size}.jpg&},&isOrgWhiteList&:false,&isBanned&:false}],&summary&:&\u003Cimg src=\&https:\u002F\u002Fpic4.zhimg.com\u002F6dbbfd4eaf255d_200x112.jpg\& data-rawwidth=\&344\& data-rawheight=\&344\& class=\&origin_image inline-img zh-lightbox-thumb\& data-original=\&https:\u002F\u002Fpic4.zhimg.com\u002F6dbbfd4eaf255d_r.jpg\&\u003E在这几天的代码探索里，我写了几篇文章：\u003Ca href=\&http:\u002F\u002Fmp.weixin.qq.com\u002Fs?__biz=MjM5Mjg4NDMwMA==&mid=&idx=1&sn=47c7f672caf629cd846e315b8df2b1c5&scene=21#wechat_redirect\& data-editable=\&true\& data-title=\&「微信小程序」官方示例代码浅析\&\u003E「微信小程序」官方示例代码浅析\u003C\u002Fa\u003E\u003Ca href=\&http:\u002F\u002Fmp.weixin.qq.com\u002Fs?__biz=MjM5Mjg4NDMwMA==&mid=&idx=1&sn=ea8bb7d1bfb1&scene=21#wechat_redirect\& data-editable=\&true\& data-title=\&「微信小程序」剖析（一）：运行机制\&\u003E「微信小程序」剖析（一）：运行机制\u003C\u002Fa\u003E\u003Ca href=\&http:\u002F\u002Fmp.weixin.qq.com\u002Fs?__biz=MjM5Mjg4NDMwMA==&mid=&idx=1&sn=93a868cdb59b5dd77c65c7a&scene=21#wechat_redirect\& data-editable=\&true\& data-title=\&「微信小程序」剖析（二）：框架原理\&\u003E「微信小程序」剖析（二）：框架原理\u003C\u002Fa\u003E我的目的其实比较简单：我们需要想一个办法，来让让微信小程序运行在普通浏览器。对于产品经理、CEO等等的人…&,&reviewingCommentsCount&:0,&meta&:{&previous&:{&isTitleImageFullScreen&:false,&rating&:&none&,&titleImage&:&https:\u002F\u002Fpic3.zhimg.com\u002F50\u002Fv2-4c2b665e242ffdcbbf893a7fc4841898_xl.jpg&,&links&:{&comments&:&\u002Fapi\u002Fposts\u002F2Fcomments&},&topics&:[{&url&:&https:\u002F\u002Fwww.zhihu.com\u002Ftopic\u002F&,&id&:&&,&name&:&微信&},{&url&:&https:\u002F\u002Fwww.zhihu.com\u002Ftopic\u002F&,&id&:&&,&name&:&前端开发&},{&url&:&https:\u002F\u002Fwww.zhihu.com\u002Ftopic\u002F&,&id&:&&,&name&:&程序员&}],&adminClosedComment&:false,&href&:&\u002Fapi\u002Fposts\u002F&,&excerptTitle&:&&,&author&:{&bio&:&待我代码编成，娶你为妻可好 @花仲马&,&isFollowing&:false,&hash&:&fea2f801ab1dc87a87f8bdeb6fdb3394&,&uid&:20,&isOrg&:false,&slug&:&phodal&,&isFollowed&:false,&description&:&工程师 \u002F 咨询师 \u002F 作家 \u002F 设计学徒&,&name&:&phodal&,&profileUrl&:&https:\u002F\u002Fwww.zhihu.com\u002Fpeople\u002Fphodal&,&avatar&:{&id&:&cebfe26a7aecb4&,&template&:&https:\u002F\u002Fpic2.zhimg.com\u002F{id}_{size}.jpg&},&isOrgWhiteList&:false,&isBanned&:false},&column&:{&slug&:&phodal&,&name&:&Phodal - 手工艺人&},&content&:&\u003Cp\u003E本来想的是昨天晚上写这篇文章的，后来昨天在写一个Cordova上的iOS插件的时候各种不顺。对接的第三方SDK不给力，于是六点多回到家的时候，我就就开始娱乐了，哈哈哈~~\u003C\u002Fp\u003E\u003Cp\u003E其实这篇文章应该算是一篇拾遗。\u003C\u002Fp\u003E\u003Ch2\u003E从map组件说起\u003C\u002Fh2\u003E\u003Cp\u003E在今天公布的开发文档里，我们知道使用一个地图组件的时候是这样子的：\u003C\u002Fp\u003E\u003Cbr\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-text\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003E&map longitude=\&23.099994\& latitude=\&113.324520\& markers=\&{{markers}}\& covers=\&{{covers}}\& style=\&width: 375 height: 200\&&&\u002Fmap&\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Cp\u003E在之前的文件里，我们提到过这个文件是wxml文件，然后我们要用wxcc将其转换为virtual dom中的方法，如：\u003C\u002Fp\u003E\u003Cbr\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-bash\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003E.\u002Fwcc -d map.xml\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Cp\u003E它就会返回一个js的方法，如：\u003C\u002Fp\u003E\u003Cbr\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-js\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003E\u003Cspan class=\&cm\&\u003E\u002F*v0.7cc_*\u002F\u003C\u002Fspan\u003E\n\u003Cspan class=\&kd\&\u003Evar\u003C\u002Fspan\u003E \u003Cspan class=\&nx\&\u003E$gwxc\u003C\u002Fspan\u003E\n\u003Cspan class=\&kd\&\u003Evar\u003C\u002Fspan\u003E \u003Cspan class=\&nx\&\u003E$gaic\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E=\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E{}\u003C\u002Fspan\u003E\n\u003Cspan class=\&nx\&\u003E$gwx\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E=\u003C\u002Fspan\u003E\u003Cspan class=\&kd\&\u003Efunction\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Epath\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E,\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Eglobal\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E){\u003C\u002Fspan\u003E\n\u003Cspan class=\&kd\&\u003Efunction\u003C\u002Fspan\u003E \u003Cspan class=\&nx\&\u003E_\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Ea\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E,\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Eb\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E){\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Eb\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E&&\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Ea\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E.\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Echildren\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E.\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Epush\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Eb\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E);}\u003C\u002Fspan\u003E\n\u003Cspan class=\&kd\&\u003Efunction\u003C\u002Fspan\u003E \u003Cspan class=\&nx\&\u003E_n\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Etag\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E){\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003E$gwxc\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E++\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E;\u003C\u002Fspan\u003E\u003Cspan class=\&k\&\u003Eif\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003E$gwxc\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E&=\u003C\u002Fspan\u003E\u003Cspan class=\&mi\&\u003E1C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E){\u003C\u002Fspan\u003E\u003Cspan class=\&k\&\u003Ethrow\u003C\u002Fspan\u003E \u003Cspan class=\&s1\&\u003E'enough, dom limit exceeded, you don\\'t do stupid things, do you?'\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E};\u003C\u002Fspan\u003E\u003Cspan class=\&k\&\u003Ereturn\u003C\u002Fspan\u003E \u003Cspan class=\&p\&\u003E{\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Etag\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E:\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Etag\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E.\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Esubstr\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\&mi\&\u003E0\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E,\u003C\u002Fspan\u003E\u003Cspan class=\&mi\&\u003E3\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E)\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E==\u003C\u002Fspan\u003E\u003Cspan class=\&s1\&\u003E'wx-'\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E?\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Etag\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E:\u003C\u002Fspan\u003E\u003Cspan class=\&s1\&\u003E'wx-'\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E+\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Etag\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E,\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Eattr\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E:\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E{},\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Echildren\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E:\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E[]}}\u003C\u002Fspan\u003E\n\u003Cspan class=\&kd\&\u003Efunction\u003C\u002Fspan\u003E \u003Cspan class=\&nx\&\u003E_s\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Escope\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E,\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Eenv\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E,\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Ekey\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E){\u003C\u002Fspan\u003E\u003Cspan class=\&k\&\u003Ereturn\u003C\u002Fspan\u003E \u003Cspan class=\&k\&\u003Etypeof\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Escope\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E[\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Ekey\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E])\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E!=\u003C\u002Fspan\u003E\u003Cspan class=\&s1\&\u003E'undefined'\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E?\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Escope\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E[\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Ekey\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E]\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E:\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Eenv\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E[\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Ekey\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E]}\u003C\u002Fspan\u003E\n\u003Cspan class=\&p\&\u003E...\u003C\u002Fspan\u003E\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Cp\u003E插播一句：上面有一个count，很有意思$gwxc & 16000，这个就是dom数的count。超了就来个异常：enough, dom limit exceeded, you don't do stupid things, do you?，中文意思就是：你个愚蠢的人类，你是一个前端开发人员吗？\u003C\u002Fp\u003E\u003Cp\u003E随后，在浏览器里调试一下：\u003C\u002Fp\u003E\u003Cbr\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-js\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003EJSON\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E.\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Estringify\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003E$gwx\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\&s1\&\u003E'map.wxml'\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E)(\u003C\u002Fspan\u003E\u003Cspan class=\&s1\&\u003E'test'\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E))\u003C\u002Fspan\u003E\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Cp\u003E在小程序中是要这样调用的：\u003C\u002Fp\u003E\u003Cbr\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-js\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003E
\u003Cspan class=\&nb\&\u003Edocument\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E.\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003EdispatchEvent\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\&k\&\u003Enew\u003C\u002Fspan\u003E \u003Cspan class=\&nx\&\u003ECustomEvent\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\&s2\&\u003E\&generateFuncReady\&\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E,\u003C\u002Fspan\u003E \u003Cspan class=\&p\&\u003E{\u003C\u002Fspan\u003E\n
\u003Cspan class=\&nx\&\u003Edetail\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E:\u003C\u002Fspan\u003E \u003Cspan class=\&p\&\u003E{\u003C\u002Fspan\u003E\n
\u003Cspan class=\&nx\&\u003EgenerateFunc\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E:\u003C\u002Fspan\u003E \u003Cspan class=\&nx\&\u003E$gwx\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\&s1\&\u003E'map.wxml'\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E)\u003C\u002Fspan\u003E\n
\u003Cspan class=\&p\&\u003E}\u003C\u002Fspan\u003E\n
\u003Cspan class=\&p\&\u003E}))\u003C\u002Fspan\u003E\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Cp\u003E就会返回下面的结果：\u003C\u002Fp\u003E\u003Cbr\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-text\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003E{\n
\&children\&: [\n
\&attr\&: {\n
\&covers\&: \&\&,\n
\&latitude\&: \&113.324520\&,\n
\&longitude\&: \&23.099994\&,\n
\&markers\&: \&\&,\n
\&style\&: \&width: 375 height: 200\&\n
\&children\&: [],\n
\&tag\&: \&wx-map\&\n
\&tag\&: \&wx-page\&\n}\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Cp\u003E看来这个名为wx-map的标签就是微信下的map标签，它是wx-page的children。然后让我们在WAWebview中搜索一下，就会发现一个很有意思的代码:\u003C\u002Fp\u003E\u003Cbr\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-js\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E{\u003C\u002Fspan\u003E\n
\u003Cspan class=\&nx\&\u003Eis\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E:\u003C\u002Fspan\u003E \u003Cspan class=\&s2\&\u003E\&wx-map\&\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E,\u003C\u002Fspan\u003E\n
\u003Cspan class=\&nx\&\u003Ebehaviors\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E:\u003C\u002Fspan\u003E \u003Cspan class=\&p\&\u003E[\u003C\u002Fspan\u003E\u003Cspan class=\&s2\&\u003E\&wx-base\&\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E,\u003C\u002Fspan\u003E \u003Cspan class=\&s2\&\u003E\&wx-native\&\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E],\u003C\u002Fspan\u003E\n
\u003Cspan class=\&nx\&\u003Etemplate\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E:\u003C\u002Fspan\u003E \u003Cspan class=\&s1\&\u003E'&div id=\&map\& style=\&width: 100%; height: 100%;\&&&\u002Fdiv&'\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E,\u003C\u002Fspan\u003E\n
\u003Cspan class=\&nx\&\u003Eproperties\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E:\u003C\u002Fspan\u003E \u003Cspan class=\&p\&\u003E{\u003C\u002Fspan\u003E\n
\u003Cspan class=\&nx\&\u003Elatitude\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E:\u003C\u002Fspan\u003E \u003Cspan class=\&p\&\u003E{\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Etype\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E:\u003C\u002Fspan\u003E \u003Cspan class=\&nb\&\u003ENumber\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E,\u003C\u002Fspan\u003E \u003Cspan class=\&nx\&\u003EreflectToAttribute\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E:\u003C\u002Fspan\u003E \u003Cspan class=\&o\&\u003E!\u003C\u002Fspan\u003E\u003Cspan class=\&mi\&\u003E0\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E,\u003C\u002Fspan\u003E \u003Cspan class=\&nx\&\u003Eobserver\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E:\u003C\u002Fspan\u003E \u003Cspan class=\&s2\&\u003E\&latitudeChanged\&\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E,\u003C\u002Fspan\u003E \u003Cspan class=\&nx\&\u003Evalue\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E:\u003C\u002Fspan\u003E \u003Cspan class=\&mf\&\u003E39.92\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E},\u003C\u002Fspan\u003E\n
\u003Cspan class=\&nx\&\u003Elongitude\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E:\u003C\u002Fspan\u003E \u003Cspan class=\&p\&\u003E{\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Etype\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E:\u003C\u002Fspan\u003E \u003Cspan class=\&nb\&\u003ENumber\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E,\u003C\u002Fspan\u003E \u003Cspan class=\&nx\&\u003EreflectToAttribute\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E:\u003C\u002Fspan\u003E \u003Cspan class=\&o\&\u003E!\u003C\u002Fspan\u003E\u003Cspan class=\&mi\&\u003E0\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E,\u003C\u002Fspan\u003E \u003Cspan class=\&nx\&\u003Eobserver\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E:\u003C\u002Fspan\u003E \u003Cspan class=\&s2\&\u003E\&longitudeChanged\&\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E,\u003C\u002Fspan\u003E \u003Cspan class=\&nx\&\u003Evalue\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E:\u003C\u002Fspan\u003E \u003Cspan class=\&mf\&\u003E116.46\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E},\u003C\u002Fspan\u003E\n
\u003Cspan class=\&nx\&\u003Escale\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E:\u003C\u002Fspan\u003E \u003Cspan class=\&p\&\u003E{\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Etype\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E:\u003C\u002Fspan\u003E \u003Cspan class=\&nb\&\u003ENumber\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E,\u003C\u002Fspan\u003E \u003Cspan class=\&nx\&\u003EreflectToAttribute\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E:\u003C\u002Fspan\u003E \u003Cspan class=\&o\&\u003E!\u003C\u002Fspan\u003E\u003Cspan class=\&mi\&\u003E0\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E,\u003C\u002Fspan\u003E \u003Cspan class=\&nx\&\u003Eobserver\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E:\u003C\u002Fspan\u003E \u003Cspan class=\&s2\&\u003E\&scaleChanged\&\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E,\u003C\u002Fspan\u003E \u003Cspan class=\&nx\&\u003Escale\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E:\u003C\u002Fspan\u003E \u003Cspan class=\&mi\&\u003E16\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E},\u003C\u002Fspan\u003E\n
\u003Cspan class=\&nx\&\u003Emarkers\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E:\u003C\u002Fspan\u003E \u003Cspan class=\&p\&\u003E{\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Etype\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E:\u003C\u002Fspan\u003E \u003Cspan class=\&nb\&\u003EArray\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E,\u003C\u002Fspan\u003E \u003Cspan class=\&nx\&\u003Evalue\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E:\u003C\u002Fspan\u003E \u003Cspan class=\&p\&\u003E[],\u003C\u002Fspan\u003E \u003Cspan class=\&nx\&\u003EreflectToAttribute\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E:\u003C\u002Fspan\u003E \u003Cspan class=\&o\&\u003E!\u003C\u002Fspan\u003E\u003Cspan class=\&mi\&\u003E1\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E,\u003C\u002Fspan\u003E \u003Cspan class=\&nx\&\u003Eobserver\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E:\u003C\u002Fspan\u003E \u003Cspan class=\&s2\&\u003E\&markersChanged\&\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E},\u003C\u002Fspan\u003E\n
\u003Cspan class=\&nx\&\u003Ecovers\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E:\u003C\u002Fspan\u003E \u003Cspan class=\&p\&\u003E{\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Etype\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E:\u003C\u002Fspan\u003E \u003Cspan class=\&nb\&\u003EArray\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E,\u003C\u002Fspan\u003E \u003Cspan class=\&nx\&\u003Evalue\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E:\u003C\u002Fspan\u003E \u003Cspan class=\&p\&\u003E[],\u003C\u002Fspan\u003E \u003Cspan class=\&nx\&\u003EreflectToAttribute\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E:\u003C\u002Fspan\u003E \u003Cspan class=\&o\&\u003E!\u003C\u002Fspan\u003E\u003Cspan class=\&mi\&\u003E1\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E,\u003C\u002Fspan\u003E \u003Cspan class=\&nx\&\u003Eobserver\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E:\u003C\u002Fspan\u003E \u003Cspan class=\&s2\&\u003E\&coversChanged\&\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E},\u003C\u002Fspan\u003E\n
\u003Cspan class=\&nx\&\u003E_mapId\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E:\u003C\u002Fspan\u003E \u003Cspan class=\&p\&\u003E{\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Etype\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E:\u003C\u002Fspan\u003E \u003Cspan class=\&nb\&\u003ENumber\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E}\u003C\u002Fspan\u003E\n
\u003Cspan class=\&p\&\u003E}\u003C\u002Fspan\u003E\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Cp\u003E它的behaviors中有一句：wx-native，这莫非就是传说中的native组件：\u003C\u002Fp\u003E\u003Cfigure\u003E\u003Cimg src=\&https:\u002F\u002Fpic3.zhimg.com\u002Fv2-ddefce59e034a183b5aadc0_b.jpg\& data-rawwidth=\&720\& data-rawheight=\&1280\& class=\&origin_image zh-lightbox-thumb\& width=\&720\& data-original=\&https:\u002F\u002Fpic3.zhimg.com\u002Fv2-ddefce59e034a183b5aadc0_r.jpg\&\u003E\u003C\u002Ffigure\u003E\u003Cp\u003E顺便再看一个video是不是也是一样的：\u003C\u002Fp\u003E\u003Cbr\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-text\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003E{\n
is: \&wx-video\&,\n
behaviors: [\&wx-base\&, \&wx-player\&, \&wx-native\&],\n
template: '&div class=\&container\&&\\n
&video id=\&player\& webkit-playsinline style=\&display:\&&&\u002Fvideo&\\n
&div id=\&default\& class=\&bar\& style=\&display:\&&\\n
&div id=\&button\& class$=\&button {{_buttonType}}\&&&\u002Fdiv&\\n
&div class=\&time currenttime\& parse-text-content&{{_currentTime}}&\u002Fdiv&\\n
&div id=\&progress\& class=\&progress\&&\\n
&div id=\&ball\& class=\&ball\& style$=\&left: {{_progressLeft}}\&&\\n
&div class=\&inner\&&&\u002Fdiv&\\n
&\u002Fdiv&\\n
&div class=\&inner\& style$=\&width: {{_progressLength}}\&&&\u002Fdiv&\\n
&\u002Fdiv&\\n
&div class=\&time duration\& parse-text-content&{{_duration}}&\u002Fdiv&\\n
&div id=\&fullscreen\& class=\&fullscreen\&&&\u002Fdiv&\\n
&\u002Fdiv&\\n
&\u002Fdiv&\\n
&div id=\&fakebutton\&&&\u002Fdiv&',\n
properties: {\n
_videoId: {type: Number},\n
_progressLeft: {type: Number, value: -22},\n
_progressLength: {type: Number, value: 0}\n}\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Cp\u003E好了，你那么聪明，我就这么说一半好了，剩下你自己去猜。\u003C\u002Fp\u003E\u003Cp\u003E可以肯定的是：\u003C\u002Fp\u003E\u003Cul\u003E\u003Cli\u003Emap标签在开发的时候会变成HTML + CSS\u003C\u002Fli\u003E\u003Cli\u003Emap标签在微信上可以使用类似于Cordova的形式调用 Native组件\u003C\u002Fli\u003E\u003C\u002Ful\u003E\u003Cp\u003E再接着说，virtual dom的事，回到示例代码里的map.js:\u003C\u002Fp\u003E\u003Cbr\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-js\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003EPage\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E({\u003C\u002Fspan\u003E\n
\u003Cspan class=\&nx\&\u003Edata\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E:\u003C\u002Fspan\u003E \u003Cspan class=\&p\&\u003E{\u003C\u002Fspan\u003E\n
\u003Cspan class=\&nx\&\u003Emarkers\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E:\u003C\u002Fspan\u003E \u003Cspan class=\&p\&\u003E[{\u003C\u002Fspan\u003E\n
\u003Cspan class=\&nx\&\u003Elatitude\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E:\u003C\u002Fspan\u003E \u003Cspan class=\&mf\&\u003E23.3C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E,\u003C\u002Fspan\u003E\n
\u003Cspan class=\&nx\&\u003Elongitude\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E:\u003C\u002Fspan\u003E \u003Cspan class=\&mf\&\u003E113.3C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E,\u003C\u002Fspan\u003E\n
\u003Cspan class=\&nx\&\u003Ename\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E:\u003C\u002Fspan\u003E \u003Cspan class=\&s1\&\u003E'T.I.T 创意园'\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E,\u003C\u002Fspan\u003E\n
\u003Cspan class=\&nx\&\u003Edesc\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E:\u003C\u002Fspan\u003E \u003Cspan class=\&s1\&\u003E'我现在的位置'\u003C\u002Fspan\u003E\n
\u003Cspan class=\&p\&\u003E}],\u003C\u002Fspan\u003E\n
\u003Cspan class=\&nx\&\u003Ecovers\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E:\u003C\u002Fspan\u003E \u003Cspan class=\&p\&\u003E[{\u003C\u002Fspan\u003E\n
\u003Cspan class=\&nx\&\u003Elatitude\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E:\u003C\u002Fspan\u003E \u003Cspan class=\&mf\&\u003E23.3C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E,\u003C\u002Fspan\u003E\n
\u003Cspan class=\&nx\&\u003Elongitude\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E:\u003C\u002Fspan\u003E \u003Cspan class=\&mf\&\u003E113.3C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E,\u003C\u002Fspan\u003E\n
\u003Cspan class=\&nx\&\u003EicaonPath\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E:\u003C\u002Fspan\u003E \u003Cspan class=\&s1\&\u003E'..\u002Fimages\u002Fcar.png'\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E,\u003C\u002Fspan\u003E\n
\u003Cspan class=\&nx\&\u003Erotate\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E:\u003C\u002Fspan\u003E \u003Cspan class=\&mi\&\u003E10\u003C\u002Fspan\u003E\n
\u003Cspan class=\&p\&\u003E},\u003C\u002Fspan\u003E \u003Cspan class=\&p\&\u003E{\u003C\u002Fspan\u003E\n
\u003Cspan class=\&nx\&\u003Elatitude\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E:\u003C\u002Fspan\u003E \u003Cspan class=\&mf\&\u003E23.3C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E,\u003C\u002Fspan\u003E\n
\u003Cspan class=\&nx\&\u003Elongitude\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E:\u003C\u002Fspan\u003E \u003Cspan class=\&mf\&\u003E113.3C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E,\u003C\u002Fspan\u003E\n
\u003Cspan class=\&nx\&\u003EiconPath\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E:\u003C\u002Fspan\u003E \u003Cspan class=\&s1\&\u003E'..\u002Fimages\u002Fcar.png'\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E,\u003C\u002Fspan\u003E\n
\u003Cspan class=\&nx\&\u003Erotate\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E:\u003C\u002Fspan\u003E \u003Cspan class=\&mi\&\u003E90\u003C\u002Fspan\u003E\n
\u003Cspan class=\&p\&\u003E}]\u003C\u002Fspan\u003E\n
\u003Cspan class=\&p\&\u003E}\u003C\u002Fspan\u003E\n\u003Cspan class=\&p\&\u003E})\u003C\u002Fspan\u003E\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Cp\u003Ejs里只放置了data，剩下的都是依据上面的值变动的observer，如：\u003C\u002Fp\u003E\u003Cul\u003E\u003Cli\u003E_updatePosition\u003C\u002Fli\u003E\u003Cli\u003E_hiddenChanged\u003C\u002Fli\u003E\u003Cli\u003ElatitudeChanged\u003C\u002Fli\u003E\u003Cli\u003ElongitudeChanged\u003C\u002Fli\u003E\u003Cli\u003EscaleChanged\u003C\u002Fli\u003E\u003Cli\u003EcoversChanged\u003C\u002Fli\u003E\u003Cli\u003E...\u003C\u002Fli\u003E\u003C\u002Ful\u003E\u003Cp\u003E这种代码的感觉比React更进了一步的节奏，本来你还需要编码来观察state，现在只需要state变动了就可以了。。。23333....，你们这些程序员都会被fire的。\u003C\u002Fp\u003E\u003Cp\u003E好了，这里差不多就这样了~~。\u003C\u002Fp\u003E\u003Ch2\u003E重新审视WXWebview.js\u003C\u002Fh2\u003E\u003Cp\u003E于是，我重新逛逛WXWebview.js，发现这个文件里面不只有component的内容，还有：\u003C\u002Fp\u003E\u003Cul\u003E\u003Cli\u003EreportSDK\u003C\u002Fli\u003E\u003Cli\u003EwebviewSDK ??\u003C\u002Fli\u003E\u003Cli\u003Evirtual_dom\u003C\u002Fli\u003E\u003Cli\u003Eexparser\u003C\u002Fli\u003E\u003Cli\u003Ewx-components.js\u003C\u002Fli\u003E\u003Cli\u003Ewx-components.css\u003C\u002Fli\u003E\u003C\u002Ful\u003E\u003Cp\u003E等等，你是不是已经猜到我在说什么了，上一篇中我们说到了PageFrame：\u003C\u002Fp\u003E\u003Cbr\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-html\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003E
\u003Cspan class=\&c\&\u003E&!-- percodes --&\u003C\u002Fspan\u003E\n
\u003Cspan class=\&c\&\u003E&!--{{WAWebview}}--&\u003C\u002Fspan\u003E\n
\u003Cspan class=\&c\&\u003E&!--{{reportSDK}}--&\u003C\u002Fspan\u003E\n
\u003Cspan class=\&c\&\u003E&!--{{webviewSDK}}--&\u003C\u002Fspan\u003E\n
\u003Cspan class=\&c\&\u003E&!--{{exparser}}--&\u003C\u002Fspan\u003E\n
\u003Cspan class=\&c\&\u003E&!--{{components_js}}--&\u003C\u002Fspan\u003E\n
\u003Cspan class=\&c\&\u003E&!--{{virtual_dom}}--&\u003C\u002Fspan\u003E\n
\u003Cspan class=\&c\&\u003E&!--{{components_css}}--&\u003C\u002Fspan\u003E\n
\u003Cspan class=\&c\&\u003E&!--{{allWXML}}--&\u003C\u002Fspan\u003E\n
\u003Cspan class=\&c\&\u003E&!--{{eruda}}--&\u003C\u002Fspan\u003E\n
\u003Cspan class=\&c\&\u003E&!--{{style}}--&\u003C\u002Fspan\u003E\n
\u003Cspan class=\&c\&\u003E&!--{{currentstyle}}--&\u003C\u002Fspan\u003E\n
\u003Cspan class=\&c\&\u003E&!--{{generateFunc}}--&\u003C\u002Fspan\u003E\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Cp\u003E在之前的想法里，我觉得我必须要集齐上面的SDK，才能招唤中神龙。后来，我看到了这句：\u003C\u002Fp\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-js\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003EisDev\u003C\u002Fspan\u003E \u003Cspan class=\&o\&\u003E?\u003C\u002Fspan\u003E \u003Cspan class=\&p\&\u003E{\u003C\u002Fspan\u003E\n
\u003Cspan class=\&s2\&\u003E\&&!--{{reportSDK}}--&\&\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E:\u003C\u002Fspan\u003E \u003Cspan class=\&s2\&\u003E\&reporter-sdk.js\&\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E,\u003C\u002Fspan\u003E\n
\u003Cspan class=\&s2\&\u003E\&&!--{{webviewSDK}}--&\&\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E:\u003C\u002Fspan\u003E \u003Cspan class=\&s2\&\u003E\&webview-sdk.js\&\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E,\u003C\u002Fspan\u003E\n
\u003Cspan class=\&s2\&\u003E\&&!--{{virtual_dom}}--&\&\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E:\u003C\u002Fspan\u003E \u003Cspan class=\&s2\&\u003E\&virtual_dom.js\&\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E,\u003C\u002Fspan\u003E\n
\u003Cspan class=\&s2\&\u003E\&&!--{{exparser}}--&\&\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E:\u003C\u002Fspan\u003E \u003Cspan class=\&s2\&\u003E\&exparser.js\&\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E,\u003C\u002Fspan\u003E\n
\u003Cspan class=\&s2\&\u003E\&&!--{{components_js}}--&\&\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E:\u003C\u002Fspan\u003E \u003Cspan class=\&s2\&\u003E\&wx-components.js\&\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E,\u003C\u002Fspan\u003E\n
\u003Cspan class=\&s2\&\u003E\&&!--{{components_css}}--&\&\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E:\u003C\u002Fspan\u003E \u003Cspan class=\&s2\&\u003E\&wx-components.css\&\u003C\u002Fspan\u003E\n
\u003Cspan class=\&p\&\u003E}\u003C\u002Fspan\u003E \u003Cspan class=\&o\&\u003E:\u003C\u002Fspan\u003E \u003Cspan class=\&p\&\u003E{\u003C\u002Fspan\u003E\u003Cspan class=\&s2\&\u003E\&&!--{{WAWebview}}--&\&\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E:\u003C\u002Fspan\u003E \u003Cspan class=\&s2\&\u003E\&WAWebview.js\&\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E}\u003C\u002Fspan\u003E\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Cp\u003E如果不是开发环境就使用WAWebview.js，在开发环境中使用使用xxSDK，那么生产环境是怎么回事？如果是在开发环境会去下载最新的SDK，好像不对~~，哈哈。。\u003C\u002Fp\u003E\u003Cp\u003E我猜这部分，我需要一个内测id，才能猜出这个答案。\u003C\u002Fp\u003E\u003Cp\u003E有意思的是，IDE会对比version.json，然后去获取最新的，用于预览？\u003C\u002Fp\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-text\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003E{\n
\&WAService.js\&: ,\n
\&WAWebview.js\&: ,\n
\&wcc\&: ,\n
\&wcsc\&: \n}\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Cp\u003E上面已经解释清楚了WAWebview的功能了，那么WAService.js呢——就是封装那些API的，如downloadFile：\u003C\u002Fp\u003E\u003Cbr\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-text\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003EuploadFile: function (e) {\n
u(\&uploadFile\&, e, {url: \&\&, filePath: \&\&, name: \&\&}) && (0, s.invokeMethod)(\&uploadFile\&, e)\n}, downloadFile: function (e) {\n
u(\&downloadFile\&, e, {url: \&\&}) && (0, s.invokeMethod)(\&downloadFile\&, e)\n}\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Cp\u003E这一点上仍然相当有趣，在我们开发的时候仍然是WAWebview做了相当多的事，而它和WAService的打包是分离的。\u003C\u002Fp\u003E\u003Cp\u003E那么，我们从理论上来说，只需要有WAWebview就可以Render页面了。\u003C\u002Fp\u003E\u003Ch4\u003E好了，那么问题来了，如何在浏览器上运行呢？\u003C\u002Fh4\u003E\u003Cp\u003E答案见下期，哈哈——我也不知道什么时候是下期：\u003C\u002Fp\u003E\u003Cfigure\u003E\u003Cimg src=\&https:\u002F\u002Fpic4.zhimg.com\u002F6dbbfd4eaf255d_b.jpg\& data-rawwidth=\&344\& data-rawheight=\&344\& class=\&content_image\& width=\&344\&\u003E\u003C\u002Ffigure\u003E\u003Cp\u003E补充一句：\u003C\u002Fp\u003E\u003Cp\u003E为什么要在浏览器上运行？？？？？？？？\u003C\u002Fp\u003E\u003Cp\u003EWeb是自由的，让我们为自由而Hack~~~~。\u003C\u002Fp\u003E\u003Cfigure\u003E\u003Cimg src=\&https:\u002F\u002Fpic1.zhimg.com\u002Fv2-d0b230f8c9c1cbb25408_b.jpg\& data-rawwidth=\&2929\& data-rawheight=\&1951\& class=\&origin_image zh-lightbox-thumb\& width=\&2929\& data-original=\&https:\u002F\u002Fpic1.zhimg.com\u002Fv2-d0b230f8c9c1cbb25408_r.jpg\&\u003E\u003C\u002Ffigure\u003E\u003Cp\u003E未完成的Demo地址： \u003Ca href=\&https:\u002F\u002Flink.zhihu.com\u002F?target=https%3A\u002F\u002Fgithub.com\u002Fphodal\u002Fweapp-webdemo\& class=\& external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003E\u003Cspan class=\&invisible\&\u003Ehttps:\u002F\u002F\u003C\u002Fspan\u003E\u003Cspan class=\&visible\&\u003Egithub.com\u002Fphodal\u002Fweapp\u003C\u002Fspan\u003E\u003Cspan class=\&invisible\&\u003E-webdemo\u003C\u002Fspan\u003E\u003Cspan class=\&ellipsis\&\u003E\u003C\u002Fspan\u003E\u003C\u002Fa\u003E\u003C\u002Fp\u003E&,&state&:&published&,&sourceUrl&:&&,&pageCommentsCount&:0,&canComment&:false,&snapshotUrl&:&&,&slug&:,&publishedTime&:&T17:03:53+08:00&,&url&:&\u002Fp\u002F&,&title&:&「微信小程序」剖析（二）：框架原理 | 在浏览器上运行的猜想&,&summary&:&本来想的是昨天晚上写这篇文章的，后来昨天在写一个Cordova上的iOS插件的时候各种不顺。对接的第三方SDK不给力，于是六点多回到家的时候，我就就开始娱乐了，哈哈哈~~其实这篇文章应该算是一篇拾遗。从map组件说起在今天公布的开发文档里，我们知道使用一个…&,&reviewingCommentsCount&:0,&meta&:{&previous&:null,&next&:null},&commentPermission&:&anyone&,&commentsCount&:9,&likesCount&:43},&next&:{&isTitleImageFullScreen&:false,&rating&:&none&,&titleImage&:&https:\u002F\u002Fpic1.zhimg.com\u002F50\u002Fv2-8ae0ecbeb_xl.jpg&,&links&:{&comments&:&\u002Fapi\u002Fposts\u002F2Fcomments&},&topics&:[{&url&:&https:\u002F\u002Fwww.zhihu.com\u002Ftopic\u002F&,&id&:&&,&name&:&程序员&},{&url&:&https:\u002F\u002Fwww.zhihu.com\u002Ftopic\u002F&,&id&:&&,&name&:&微信&},{&url&:&https:\u002F\u002Fwww.zhihu.com\u002Ftopic\u002F&,&id&:&&,&name&:&前端开发&}],&adminClosedComment&:false,&href&:&\u002Fapi\u002Fposts\u002F&,&excerptTitle&:&&,&author&:{&bio&:&待我代码编成，娶你为妻可好 @花仲马&,&isFollowing&:false,&hash&:&fea2f801ab1dc87a87f8bdeb6fdb3394&,&uid&:20,&isOrg&:false,&slug&:&phodal&,&isFollowed&:false,&description&:&工程师 \u002F 咨询师 \u002F 作家 \u002F 设计学徒&,&name&:&phodal&,&profileUrl&:&https:\u002F\u002Fwww.zhihu.com\u002Fpeople\u002Fphodal&,&avatar&:{&id&:&cebfe26a7aecb4&,&template&:&https:\u002F\u002Fpic2.zhimg.com\u002F{id}_{size}.jpg&},&isOrgWhiteList&:false,&isBanned&:false},&column&:{&slug&:&phodal&,&name&:&Phodal - 手工艺人&},&content&:&\u003Cp\u003E微信小程序」的开发框架体验起来，还不错——自带了UI框架。但是问题是他的IDE，表现起来相当的糟糕——其实主要是因为，我当时买WebStorm License买了好多年。所以，我觉得他的IDE真不如我这个付费好用。\u003C\u002Fp\u003E\u003Cfigure\u003E\u003Cimg src=\&http:\u002F\u002Fpic4.zhimg.com\u002Fv2-1bfc9b50b93db431bdac30d19832d02f_b.png\& data-rawwidth=\&1306\& data-rawheight=\&818\& class=\&origin_image zh-lightbox-thumb\& width=\&1306\& data-original=\&http:\u002F\u002Fpic4.zhimg.com\u002Fv2-1bfc9b50b93db431bdac30d19832d02f_r.png\&\u003E\u003C\u002Ffigure\u003E\u003Cp\u003E而且，作为一个拥护自由和开源的 「GitHub 中国区首席Markdown程序员」。微信在「微信小程序」引导着Web开向封闭，我们再也不能愉快地分享我们的代码了。\u003C\u002Fp\u003E\u003Cp\u003E如果我们放任下去，未来的Web世界令人堪忧。\u003C\u002Fp\u003E\u003Cfigure\u003E\u003Cimg src=\&http:\u002F\u002Fpic2.zhimg.com\u002Fv2-afae5a2b63a80de7c64cdb_b.jpg\& data-rawwidth=\&393\& data-rawheight=\&298\& class=\&content_imag
