微信小程序 devtool隐藏的秘密
72 浏览量
2020-11-30
13:13:30
上传
评论
收藏 151KB PDF 举报
微信小程序微信小程序 devtool隐藏的秘密隐藏的秘密
微信小程序微信小程序 devtool
笔者参与的小程序项目开发也进入尾声了，坑也踩得七七八八，对于哪些没有涵盖和深入使用的功能笔者就不班门弄斧了。
前几篇文章讲了那么多细节也好，策略也好，都是应用层面的东西。自微信小程序公布以来就有先行者不断的探索小程序背后的运行机制。小程序的开
发语法和API与前端工程师熟悉的html/js/css非常相似，所以会令很多人疑惑小程序与普通的HTML5应用到底有什么区别。这篇文章其实将小程序的基
本运行机制剖析的差不多了，简单概括就是：
大部分内容会转化为常规的html/css/js，并使用webview渲染；
部分组件调用native实现功能。
既然已经有先行者得出了结论，为啥还要写这篇文章呢？当然是为了凑齐七篇啦，哈哈哈…
开玩笑！这篇文章的目的不是重复别人的结论，而是将笔者研究小程序开发工具源码的一些心得和结论记录下来，以方便大家后续更深入的探索。
看看看看devtool的源码有什么的源码有什么
第一步是找到小程序devtool的源码，以mac系统为例，源码的打开方式如下图：
其他的文件不用理会，我们要研究的主要代码在Content/Resources/app.nw/dist目录下，这个目录包括devtool的功能代码以及对小程序进行执行、编译、打
包、上传等功能的代码。当然，这些代码都是经过混淆的，读起来还挺费劲（摊手~
需要着重注意的是Content/Resources/app.nw/dist/weapp目录，以及commit和trans两个子目录：
从文件的命名上大致可以猜到每个文件对应的功能：
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”，我们可以使用强大的命令行从硬盘中搜索此目录：
weixin_38740827
- 粉丝: 7
- 资源: 947
最新资源
- 这是一个保存Springboot+MyBaits项目的仓库.zip
- tensorflow-gpu-2.7.2-cp39-cp39-manylinux2010-x86-64.whl
- tensorflow-2.7.4-cp38-cp38-manylinux2010-x86-64.whl
- tensorflow-gpu-2.7.4-cp38-cp38-manylinux2010-x86-64.whl
- 詹佳 陈敏 口语2.mp3
- 图书管理系统毕业设计Java语言实现
- turtle-0.0.2.zip
- 机器学习（股票），基于机器学习算法支持向量机SVM的交易策略
- 1713969763417.png
- 国家药品编码本位码,国家药品编码本位码,国家药品编码本位码,国家药品编码本位码
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
评论0