解压应用

简单的说明一下:

  1. app 目录下放置了app的代码
  2. modified_modules 即一些修改后的模块
  3. node_modules 地球人都知道
  4. package.json 配置了NW相关的内容

在modified_modules目录下有两个子模块:

  1. anyproxy,从名字就可以看起来这是一个代理模块
  2. weinre,远程调试工具

IDE

这是一个NodeWebkit封装的Web应用。

1
2
3
4
node-webkit能做什么?
用Web技术(Node.JS,JavaScript,HTML5)开发桌面应用程序。Node.js是一个Javascript运行环境(runtime environment)。实质是对Chrome V8引擎进行了封装。

Node.js使用Module模块去划分不同的功能,以简化应用的开发。Modules模块有点像C++语言中的类库。每一个Node.js的类库都包含了十分丰富的各类函数,比如http模块就包含了和http功能相关的很多函数,可以帮助开发者很容易地对比如http,tcp/udp等进行操作,还可以很容易的创建http和tcp/udp的服务器。

在package.json中的”main”: “app/html/index.html”,即定义了这个APP的入口是这个index.html,而不是别的文件。

这是一个React应用。

1
React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript MVC 框架,都不满意,就决定自己写一套。

其中的编辑环境是基于Monaco。

1
monaco editor是微软开源的一款web版代码编辑器。它支持智能提示,代码高亮,代码格式化。

WeAPP运行机制

wxml: html,wxss : css。对应的有几个不同的transform:

  1. transWxmlToJs
  2. transWxssToCss
  3. transConfigToPf
  4. transWxmlToHtml
  5. transManager

PF指代的是PageFrame的意思,pageFrame有一个对应的模板文件。

名为wcc以及一个名为wcsc的工具。wcc用于转换wxml中的自定义tag为virtual_dom。wcsc转换wxss为css

可以理解为微信小应用有点类似于 Virtual Dom + WebView,毕竟上面有个WAWebView文件 ,还有一个webviewSDK文件 。

当然无论是React + WebView,或者Vue + WebView都不重要,现在有了 WA + WebView

在本地写的WeApp都会被提交到微信服务器,然后打包,上传到服务器,交给CDN。

1
CDN系统能够实时地根据网络流量和各节点的连接、负载状况以及到用户的距离和响应时间等综合信息将用户的请求重新导向离用户最近的服务节点上。

上传的过程大致如下:

  1. APP会被打包成以日期命名 + .wx文件。
  2. IDE会检测包的大小,并提示:代码包大小为 xx kb,超过限制 xx kb,请删除文件后重试。这个xx好像是1024,所以APP的大小是1M。
  3. APP将会上传。