小程序input wxss_微信小程序架构原理

微信小程序

微信小程序包含下面四种文件：

• js
• json 配置文件
• wxml 小程序专用 xml 文件
• wxss 小程序专用 css 文件

{{ text }} Page({ data:{ text:"这是一个页面" }, onLoad:function(options){ // 页面初始化 options为页面跳转所带来的参数 }, // ........}) 

微信小程序只能通过其 mvvm 的模板语法来动态改变页面，本身 js 并不支持 BOM 和 DOM 操作。

从开发工具看微信小程序架构

在 mac 端直接解压应用 发现 app.nw 文件夹，即开发工具源码。可以知道该项目由 nw.js 编写； 在 package.json 文件下找到应用入口：app/html/index.html。入口 js 为 dist/app.js 我们可以看到整个编辑器的大致逻辑。

但我们关心的是构建过程，在 weapp 文件夹下存在 build.js 文件。没有找到有用的信息，只看到了 upload 模块，包括对大小限制，上传包命名。

为此怀疑，微信小程序本身和 RN 类似。是在服务端打包成 native 语言的。但是通过 android 边框测试发现，微信小程序根本不是 native 原生内容。

原生界面效果：

编译过程

继续在 trans 文件夹下发现了编译模板。

• transWxmlToJs wxml 转 js
• transWxssToCss wxss 转 css
• transConfigToPf 模板页配置
• transWxmlToHtml wxml 转 html
• transManager 管理器

用到的内容：

• 发现用到了一个模板：app.nw/app/dist/weapp/tpl/pageFrameTpl.js, app.mw/app.dist.weapp/tpl/appserviceTpl.js
• wcc 可执行程序，wcc 用于转转 wxml 中的自定义 tag 为 virtual_dom
• wcsc 可执行程序，用于将 wxss 转为 view 模块使用的 css 代码，使用方式为 wcsc xxx.wxss

在模板中，我们发现使用了 WAWebview.js 文件，WAService.js文件。 在 transWxmlToJs 中我们发现一段 generateFuncReady 事件的函数。对比注册该事件的函数在 WAWebview.js 中。

我们尝试使用 wcc 对input.xml 文件进行编译。

wcc -d input.xml

生成了一段脚本：

window.__wcc_version__ = 'v0.6vv_20161230_fbi'var $gwxcvar $gaic = $gwx = function (path, global) { function _(a, b) { b && a.children.push(b); } ....

通过代码我们发现，调用 $gwx 函数会再生成一个有返回值的函数(前提是 path 填写正确)；于是我们执行如下代码：

$gwx("input.xml")("test")

得出如下内容：

{ "tag": "wx-page