前言
昨日看朋友圈,据说有人花钱买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