android 微信小程序原理,微信小程序架构原理

前言

昨日看朋友圈，据说有人花钱买star，不知道真的假的？以前以为只是大家开玩笑。今日早读文章由百度EUX@田光宇投稿分享。

正文从这开始~~

微信小程序

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

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

在模板中，我们发现使用了 WAWe