江苏龙网

  1. 主页 > 生活百科 > >

微信小程序架构原理

微信小程序

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

  • js
  • json 配置文件
  • wxml 小程序专用 xml 文件
  • wxss 小程序专用 css 文件
<view> <text class="window">{{ text }}</text></view> 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 文件进行编译 。


    推荐阅读


    上一篇：蚊香液漏了一手怎么办 蚊香液弄到手上会怎么样

    下一篇：是时候拯救我的 HTML 技术了