通过反编译小程序来学习前端

时间: 2018-10-18阅读: 4153标签: 小程序

小程序开发时,会有4种文件:.wxss  .json  .wxs  .wxml。

正式上传到腾讯时,目录会被打包,使用时再发放给客户端。

这个文件包后缀是 .wxapkg。只要手机用过这个小程序,文件包就会缓存在手机内。

所以,要获得源码,要做的工作是 提取 + 拆解 这个包。

 

(一)提取

首先,需要一台root过的Android手机。

本人只有一台备用Android手机,不自带root功能,于是百度搜索 手机型号 + root。

随便挑了一款一键root软件(“某兔”),连接,USB调试模式,一键root......

文件包存放在系统文件夹,读写权限有限制,所以用Adb去操作。(某些机型自带高权限文件操作功能,可不用这个方法,无奈此机比较低端)

Adb 全称 Android Debug Bridge ,因为 Android 是基于 Linux 的,Adb用的也是Linux命令。

在“某兔”中,找到自带的Adb命令行功能。

例行先检查一下状态:

adb devices

输入后回车,显示出 List of devices attached,表明连接正常。

进入shell模式:

adb shell

此时,光标前面变为 shell@{你的手机型号}:/ $

进入root模式:

$ su

此时,光标前面变为 root@{你的手机型号}:/ #

$ cd /data/data/com.tencent.mm/MicroMsg/{User}/appbrand/pkg

cd指令,是change directory,即转到目标文件夹上进行操作。

{User} 为微信帐号唯一标识,是一串哈希码。

由于不知道自己的标识id,所以先cd到MicroMsg目录下,用 $ ls 命令,显示出有哪些文件夹,再cd进那个帐号文件夹


(上图登陆过两个微信帐户,因此有两个id文件夹)

在pkg文件夹下,用$ ls 命令,罗列出缓存的wxapkg

但此时,/data系统文件夹只可读,无法直接复制。

通过 cd .. 命令,回到根目录。输入:

$ mount -o remount,rw /data

remount是重新挂上文件系统,rw是改为read-write可读写模式。

此时,便可把pkg内的文件复制出去了:

$ cp /data/data/com.tencent.mm/MicroMsg/{User}/appbrand/pkg/{文件名}.wxapkg /mnt/sdcard

/mnt/sdcard是Android的储存卡目录,也就是可以在电脑里打开的那个盘。

 

(二)拆解

目前比较好的一个拆解的脚本是wxappUnpacker

基于node.js,此处跳过node.js的部署。

把wxappUnpacker下载后,在文件夹shift + 右键,调出cmd。

输入npm install回车,一次性安装所有依赖。

输入node wuWxapkg.js + 文件包路径(注意 / 开头的是绝对路径,没有的是相对路径)回车。

脚本自动拆解出四种后缀文件,再自动调用wuConfig.js  wuJs.js  wuWxml.js  wuWxss.js分别拆解。

最后得出的目录文件,就是开发者所创建的结构


 

(三)总结

提取出成熟的小程序源码来研究,有助于前端入门者对js css的掌握。

但遗憾的是,反编译后js源码,变量名大部分会被单字母取替,注释也会消失。

使得对代码的理解极其费事,但还是能从框架结构中,推理出主要功能的实现。


来源:https://www.cnblogs.com/vincentfong/archive/2018/10/18/9808092.html

站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

链接: http://www.fly63.com/article/detial/1160

小程序获取用户信息

其实获取用户信息,一种是获取权限的,一种是不用获取权限,前者获取到的信息更多,包含一些敏感信息,包括给getaccessToken接口需要传的参数,后者就是简单获取一些头像、昵称等信息

微信小程序UI组件、实用库、开发工具、服务端、Demo整理分享

小程序开放至今,许多公司企业已经开发出了自己的小程序。这篇文章主要整理分享:微信小程序UI组件、开发框架、实用库、开发工具、服务端、Demo等

小程序开发的一些细节,你有注意吗?

我认为小程序是一个没有什么技术含量的东西,特别是现在有了组件库,而且小程序生态不断完善的情况下,只要对着文档慢慢写就好,就是时间的问题。然后这里也不是教大家怎么去写程序之类的,而是本人在经历过后的一些小建议

Mpx 小程序框架技术揭秘

与目前业内的几个小程序框架相比较而言,mpx 开发设计的出发点就是基于原生的小程序去做功能增强。所以从开发框架的角度来说,是没有任何“包袱”,围绕着原生小程序这个 core 去做不同功能的 patch 工作

微信小程序如何实现跳转到其它小程序的功能

微信小程序目前已经支持跳出到其它小程序了。但是前提是2个小程序必须被同一个公众号关联,如果没有关联则无法打开,下面就实现小程序之间相互跳转的步骤。

如何探测小程序返回到webview页面?

项目是小程序(wepy), 部分页面使用webview(vue). 经常会遇见一个场景: 当小程序navigateTo到一些页面对用户的收藏状态,做了修改后, 用户点击返回按钮回到上一个页面

微信小程序更新机制_微信小程序的2种更新方式

小程序的启动方式:冷启动和热启动,小程序冷启动时,会检查小程序是否有最新版本。如果有则将异步下载最新版本,但是仍将运行当前版本等到下一次冷启动时再运行最新版本。

使用CryptoJS在小程序中实现加解密

本文使用md5和rc4作为示例代码,可以根据实际项目选择不同的加密方式:在百度静态资源公共库中搜索crypto-js、用到CryptoJS的js放到同一个文件中,并在文件最下方暴露接口module.exports = CryptoJS

使用scss开发小程序(各种小程序平台通用)

微信小程序的wxss、阿里旗下淘宝、支付宝小程序的acss等等语法很类似原生css,但是在web开发里用惯了动态css语言,再写回原生css很不习惯,尤其是父子样式的嵌套写法非常繁琐。

小程序自定义tabbar占位问题

针对于小程序中自定义tabbar问题,有多种自定义方式。其中之一就是需要将原先系统自带的tabbar隐藏,调用,就是在小程序底部原先放置tabbar的内容会出现空白,仍然会出现占位问题。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!