关闭

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

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

小程序开发时,会有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.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

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

关闭

腾讯出品的微信小程序有哪些?

腾讯wifi一键连;识花君;企鹅医典;vgo微海报;腾讯AI体验中心;食物健康测评;腾讯地图+;微信辟谣助手;腾讯文档;多媒体AI平台;微云;微信发票助手

如何微信小程序禁止下拉_解决小程序下拉出现空白的情况

在微信小程序中,用力往下拉动,页面顶部会出现一段空白的地方。 产品的需求不太允许这么做,会影响用户体验,查看文档发现可以使用enablePullDownRefresh这属性来实现,但是在部分ios端仍然可以下拉出现空白。那么该如何解决呢?

微信小程序WXS之谜

微信创造了 WXS ,除了提高性能,还有什么原因?WXS(WeiXin Script)是微信创造的一套脚本语言,它的官方说法是:“WXS 与 JavaScript 是不同的语言,有自己的语法,并不和 JavaScript 一致”。

微信小程序常用的几个UI组件库

WeUI 是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信 Web 开发量身设计,可以令用户的使用感知更加统一。包含button、cell、dialog、 progress、 toast、article、actionsheet、icon等各式元素。

微信小程序遇到的坑

微信小程序开发之路上遇到的那些坑,微信小程序开发常见之坑总结,在开发过程中碰到的问题和解决:小程序textarea组件字数限制问题 、scroll-view 中不能使用 textarea 组件 、input组件的问题、关于数据绑定的问题、关于生命周期的问题、关于picker组件

小程序框架_推荐多款高质量的小程序框架组件

小程序到底有多火,看看目前推出的开源框架以及组件库就知道了。由于小程序开发的火爆,大家都在致力于探索如何更好的,更加高效的开发小程序,以至于很多公司都贡献了小程序开源框架和组件库。 如: mpvue、Tina.js、Taro、wepy、weweb、touchwx

微信小程序picker组件两列关联使用方式

在使用微信小程序picker组件时候,可以设置属性 mode = multiSelector 意为多列选择,关联选择,当第一列发生改变时侯,第二列甚至第三列发生相应的改变

小程序保存图片到本地

保存图片到本地相册,需要用户允许相册权限;但是有时客户手滑或者是特别原因点击了拒绝授权,我们需要打开权限列表,让客户手动打开此项权限;

在小程序中实现 Mixins 方案

在原生开发小程序的过程中,发现有多个页面都使用了几乎完全一样的逻辑。由于小程序官方并没有提供 Mixins 这种代码复用机制,所以只能采用非常不优雅的复制粘贴的方式去“复用”代码

扩展微信小程序 Page 构造函数,修改生命周期函数

微信小程序扩展: 将公共方法绑定到Page上、扩展,修改生命周期函数。将自定义的内容单独封装到一个js文件中,然后在app.js中引用这个文件即可

点击更多...

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