微信小程序 devtool隐藏的秘密


Posted in Javascript onJanuary 21, 2017

微信小程序 devtool

笔者参与的小程序项目开发也进入尾声了,坑也踩得七七八八,对于哪些没有涵盖和深入使用的功能笔者就不班门弄斧了。

前几篇文章讲了那么多细节也好,策略也好,都是应用层面的东西。自微信小程序公布以来就有先行者不断的探索小程序背后的运行机制。小程序的开发语法和API与前端工程师熟悉的html/js/css非常相似,所以会令很多人疑惑小程序与普通的HTML5应用到底有什么区别。这篇文章其实将小程序的基本运行机制剖析的差不多了,简单概括就是:

  • 大部分内容会转化为常规的html/css/js,并使用webview渲染;
  • 部分组件调用native实现功能。

既然已经有先行者得出了结论,为啥还要写这篇文章呢?当然是为了凑齐七篇啦,哈哈哈...

开玩笑!这篇文章的目的不是重复别人的结论,而是将笔者研究小程序开发工具源码的一些心得和结论记录下来,以方便大家后续更深入的探索。

看看devtool的源码有什么

第一步是找到小程序devtool的源码,以mac系统为例,源码的打开方式如下图:

微信小程序 devtool隐藏的秘密

其他的文件不用理会,我们要研究的主要代码在Content/Resources/app.nw/dist目录下,这个目录包括devtool的功能代码以及对小程序进行执行、编译、打包、上传等功能的代码。当然,这些代码都是经过混淆的,读起来还挺费劲(摊手~

需要着重注意的是Content/Resources/app.nw/dist/weapp目录,以及commit和trans两个子目录:

微信小程序 devtool隐藏的秘密

从文件的命名上大致可以猜到每个文件对应的功能:

  • trans目录下的文件负责将小程序源码进行一系列的转换,最终被转换为浏览器可识别的html、css以及js;
  • commit目录下的文件负责执行小程序的构建、打包、上传等功能。

既然我们知道小程序会进行构建打包流程,想得知小程序运行机制最好的办法就是研究构建完毕之后的代码。有了这个目标之后,下一步就是查看devtool的日志获取小程序构建之后的代码存放位置。

找到日志文件

Content/Resources/app.nw/dist/common/log/log.js是负责管理devtool日志功能的文件,其中有这样一段代码:

const a = require('fs'),
  b = require('log'),
  c = require('path'),
  d = require('../../config/dirConfig.js'),
  e = d.WeappLog;

其中e便是日志文件的存放目录,然后我们追溯到config/dirConfig.js中发现目录路径是由nw.App.getDataPath()生成的,这个函数是node-webkit提供的API,生成结果的规则在不同的操作系统下有差异,可惜笔者并没有找到相关的说明(沮丧)。

但是此次代码的探索并非没有收获,起码我们知道了日志文件存放的目录名为“WeappLog”,我们可以使用强大的命令行从硬盘中搜索此目录:

mdfind WeappLog

大家可以参考这篇文章了解mdfind命令的用法

从输出结果可以得知日志文件在Mac系统的存放目录为/Users/<用户名>/Library/Application Support/微信web开发者工具/WeappLog。进入目录后就会发现很多以.log为后缀的日志文件:

微信小程序 devtool隐藏的秘密

上传小程序的流程打包后的小程序在哪里

找到日志文件后便可以从devtool的执行日志中获取小程序被构建后的代码存放位置。当然,第一步是要讲小程序进行构建,操作方法是在小程序开发工具的“项目”菜单”中点击”预览“:

微信小程序 devtool隐藏的秘密

成功后再日志文件中会出现这么一行记录:

[Wed Jan 18 2017 15:20:24 GMT+0800 (CST)] INFO pack.js create /Users/
<用户名>/Library/Application Support/微信web开发者工具/Weappdest/1484724024071.wx success!

/Users/<用户名>/Library/Application Support/微信web开发者工具/Weappdest/1484724024071.wx就是构建完成的小程序代码!赶紧去看看!

兴致勃勃的找到/Users/<用户名>/Library/Application Support/微信web开发者工具/Weappdest/目录,然后发现:空空如也!

看来微信团队还是很谨慎的,在将小程序源码上传之后便会删除构建产出的文件。但是这点小伎俩难不倒程序员!任何行为都是程序执行的,我们直接修改相关的程序代码就可以了嘛!

做点小手脚,看看打包后的代码

Content/Resources/app.nw/dist/weapp/commit/upload.js中有一段这样的代码:

const a = require('fs'),
  j = require('rmdir');
  //省略无关代码
 _exports.uploadForTest = (l, m, n) => {
  //省略无关代码
  c(l, {
   noCompile: !0
  }, (s, t) => {
   if (s) return void n(s.toString());
   let u = d.join(k, `${+new Date}.wx`);
   b(t, u, (v, w) => {
    j(t, (A, B, C) => {});
    //省略无关代码
    if (y > q) return a.unlink(u, () => {}), void n(`代码包大小为 ${y} kb,超出限制 ${y-q} kb,请删除文件后重试`);
    //省略无关代码
})

上述代码省略了一些与我们当前讨论内容无关的代码,感兴趣的读者可以自行研究。

上述代码有两个删除文件的行为:

rmdir:删除构建完成但是并未打包的代码目录;

fs.unlink:删除打包完成的文件。

将执行删除的代码注释以后,再通过小程序开发者工具进行预览上传操作后,在上文中我们得到的目录中便会留下构建以及打包后的文件了。如下:

微信小程序 devtool隐藏的秘密

其中以.wx为后缀的文件是经过打包后的文件,也就是上传到微信服务器的文件。其同名的目录文件夹是构建完成且打包之前的源文件。

config.js为例,构建后的代码如下:

'use strict';
Object.defineProperty(exports, '__esModule', {
 value: true
});
exports.default = {
 basePath: 'https://djtest.cn',
 fileBasePath: 'https://djtest.cn'
};

其实仅仅将ES6的语法转译成了ES5语法。其余的wxml、wxss以及js文件基本也是这样的状态,所以可以推断源码上传至微信服务器后会执行真正的构建动作,开发工具只执行了一些简单地构建行为。

虽然笔者并未从这份代码中得到全部的真相,但希望这篇文章能够给后续的探索者提供一些微薄的帮助。

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
javaScript - 如何引入js代码
Mar 09 Javascript
jQuery 过滤not()与filter()实例代码
May 10 Javascript
js实现简单登录功能的实例代码
Nov 09 Javascript
jquery $.trim()方法使用介绍
May 21 Javascript
JavaScript生成SQL查询表单的方法
Aug 13 Javascript
使用JavaScript和CSS实现文本隔行换色的方法
Nov 04 Javascript
JS插件overlib用法实例详解
Dec 26 Javascript
web前端vue之CSS过渡效果示例
Jan 10 Javascript
微信小程序学习笔记之获取位置信息操作图文详解
Mar 29 Javascript
layui动态渲染生成select的option值方法
Sep 23 Javascript
Vue中ref和$refs的介绍以及使用方法示例
Jan 11 Vue.js
80行代码写一个Webpack插件并发布到npm
May 24 Javascript
JS设置CSS样式的方式汇总
Jan 21 #Javascript
JS 实现 ajax 异步浏览器兼容问题
Jan 21 #Javascript
RequireJS 依赖关系的实例(推荐)
Jan 21 #Javascript
js操作浏览器的参数方法
Jan 21 #Javascript
JS实现图片高斯模糊切换效果的焦点图实例
Jan 21 #Javascript
js实现用户输入的小写字母自动转大写字母的方法
Jan 21 #Javascript
jQuery点击弹出层弹出模态框点击模态框消失代码分享
Jan 21 #Javascript
You might like
php access 数据连接与读取保存编辑数据的实现代码
2010/05/12 PHP
CentOS安装php v8js教程
2015/02/26 PHP
php检测url是否存在的方法
2015/04/14 PHP
PHP实现动态执行代码的方法
2016/03/25 PHP
php curl上传、下载、https登陆实现代码
2017/07/23 PHP
PHP使用正则表达式实现过滤非法字符串功能示例
2018/06/04 PHP
IFrame跨域高度自适应实现代码
2012/08/16 Javascript
JS实现鼠标单击与双击事件共存
2014/03/08 Javascript
Html5的placeholder属性(IE兼容)实现代码
2014/08/30 Javascript
JS动态显示表格上下frame的方法
2015/03/31 Javascript
JS模拟键盘打字效果的方法
2015/08/05 Javascript
js面向对象之常见创建对象的几种方式(工厂模式、构造函数模式、原型模式)
2015/11/09 Javascript
原生javascript实现自动更新的时间日期
2016/02/12 Javascript
最简单的tab切换实例代码
2016/05/13 Javascript
微信小程序 location API实例详解
2016/10/02 Javascript
AngularJS动态加载模块和依赖的方法分析
2016/11/08 Javascript
js判断手机号是否正确并返回的实现代码
2017/01/17 Javascript
详解nodejs微信公众号开发——6.自定义菜单
2017/04/13 NodeJs
layui表格内容溢出的解决方法
2019/09/06 Javascript
Openlayers实现地图的基本操作
2020/09/28 Javascript
[03:47]2015国际邀请赛第三日现场精彩回顾
2015/08/08 DOTA
[00:43]2016完美“圣”典风云人物:单车宣传片
2016/12/02 DOTA
[01:37]全新的一集《真视界》——TI7总决赛
2017/09/21 DOTA
用PyQt进行Python图形界面的程序的开发的入门指引
2015/04/14 Python
python操作redis的方法
2015/07/07 Python
使用Python判断质数(素数)的简单方法讲解
2016/05/05 Python
解决python opencv无法显示图片的问题
2018/10/28 Python
在IPython中执行Python程序文件的示例
2018/11/01 Python
python多线程与多进程及其区别详解
2019/08/08 Python
利用Python如何制作贪吃蛇及AI版贪吃蛇详解
2020/08/24 Python
美国最顶级的精品店之一:Hampden Clothing
2016/12/22 全球购物
Annoushka英国官网:英国奢侈珠宝品牌
2018/10/20 全球购物
乐观大学生的自我评价
2014/01/10 职场文书
作文批改评语大全
2014/04/23 职场文书
产品委托授权书范本
2014/09/16 职场文书
golang特有程序结构入门教程
2021/06/02 Python