引言
大家好，我是练习时长两年半的个人练习生菜虚鲲，我喜欢唱，跳，rap，篮球，Music！
嗯哼！还是别那么沙雕了，严肃点，我可是在写技术教程啊！
(私信催更让我写沙雕文的是?吗？)
人靠衣装马靠鞍，狗配铃铛跑的欢，先来学下小程序的界面开发，先整点????
的，后面在去撸交互流程，优化性能等等这类东西。本节内容比较简单，学习流程
如下，读者根据自己的层次按需学习：
- ?学一学：几分钟速成前端三剑客(HTML，CSS和JavaScript)的基本语法。
- ?比一比：从HTML、CSS无痕过渡到微信小程序的WXML、WXSS。
- ?瞄一瞄：微信小程序都提供了哪些组件。
- ?搞一搞：控制组件隐藏显示两种方法：block wx:if VS hidden属性。
- ?爽一爽：重复代码抽模板template/组件component，哪里用到哪里导。
- ?皮一皮：反编译别人的小程序，学(chao)习(xi)下组件怎么堆。
看上去内容很多，其实都很简单，估计十分钟不用你就看完本文了~
?Music！
0x1、?你太美贝贝耶（前端基础语法速成）
上节就说过，原生小程序的玩法：
wxml里写页面，wxss里写样式，js里写逻辑，json里改配置
可能有些小白真的完全没碰过前端，作为一个《真丶从零开始学习微信小程序开发》 的教程：
就顺带提提吧，也就几分钟~
1、前端三剑客(HTML，CSS，JS)
① HTML(Hyper Text Markup Language)
超文本标记语言，没有编译过程，只是一个标记语言，而非编程语言，通过各种标签的堆砌成网页。
一个简单的HTML页面代码示例如下：
<html>
<head>
<title>一个标题title>
head>
<body>
<p>内容p>
body>
html>
复制代码接着是「两个名词」：
「标签/元素」：尖括号包围的关键词，比如上面的
，语法如下：
- 标签一般 成对出现，如上面的
内容
，也有例外，如换行
前面的标签称为「开始/开放」标签，后面的标签称为「结束/闭合」标签。- 标签支持 嵌套，但 不能交叉，比如
正确，
但却是错误的。
「属性」：给标签添加辅助信息，属性以 键值对 的形式出现，比如为a标签添加跳转链接：
<a href="http://coder-pig.github.io">疯狂暗示~a>
复制代码语法如下：
- 可以为一个标签设置多个属性，使用 空格 隔开；
- 几个通用的属性：class(设置类名)，id(设置元素唯一ID)，style(设置元素样式)
想了解更多标签以及属性可移步至：www.w3school.com.cn/tags/index.…
② CSS（Cascading Style Sheets）
层叠样式表，样式就是标签的表现形式，比如：为文本标签设置蓝色字体的样式。
<font color="blue">文字font>
复制代码而 层叠 指的是：利用CSS选择器对HTML元素堆叠很多样式！其实利用标签的 style属性
就能添加样式，但还引入CSS的原因：解决内容和表现分离的问题。修改CSS文档即可
改变HTML页面中所有元素的布局和外观，而不需要自己到HTML页面里一个个找元素进行修改。
引入CSS样式的四种方式：
<p style="color: #000000;">xxxp>
<style type="text/css">
h1 {background-color:#000000;}
style>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
head>
<style>
@import url("style.css");
style>
复制代码CSS选择器
要为标签设置样式，总得先找到结点吧？CSS选择器就是用来 定位标签的一套规则。
三类选择器：
- 标签选择器：文档中 所有的特定标签 使用同一个CSS样式。
- id选择器：元素以 id属性 来设置id选择器，选择器以"#"来定义。
- 类选择器：元素以 class属性 来设置类选择器，可以在多个元素中使用，以"."号显示。
新建一个test.html，试试CSS选择器的使用：
<html>
<head>
<title>CSS示例title>
<style type="text/css">
-- 标签选择器 >
p {background-color:red;}
-- id选择器 >
#id-choose {background-color:green;}
-- class选择器 >
.class-choose {background-color:blue;}
style>
head>
<body>
<p>文字1p>
<p id="id-choose">文字2p>
<p class="class-choose">文字3p>
body>
html>
复制代码浏览器打开看下效果：
除此之外，还有些组合玩法，比如派生选择器，关于CSS选择器和定位，后面会细讲，莫慌。
更多CSS样式以及CSS选择器的详细用法可移步至：www.w3school.com.cn/css/index.a…
③ JS（JavaScript）
号称最流行的脚本语言(我大py表示不服)，除了前端写交互和动效，通过Node.js还能写服务端：
著名的Atwood定律：Any application that can be written in JavaScript, will eventually be written in JavaScript.
依旧是简单的过过JavaScript的基础语法~
「1、变量」：通过 var关键字 来声明，字母开头，区分大小写。
「2、注释」：分为单行注释(//注释内容) 和 多行注释(/*注释内容*/)。
「3、数据类型」分两类：
基本数据类型：
- undefined(未定义)：变量没初始化的默认值。
- null(空)：空值，可理解为占位符，可用于初始化变量或函数返回值。
- string(字符串)：所有字符为16位，Unicode编码，使用单/双引号表示。
- boolean(布尔)：用于逻辑判断，只有 true 和 false 两个值。
- number(数值)：内部表示为64位的浮点数，js中1和1.0的值是相同的。
引用数据类型：
- 数组：var num = [1,2,3]; 通过下标访问，下标从0开始，支持不同类型的元素！
- 对象：大括号包裹，对象属性通过 名称:对 的形式来定义，多个属性用逗号隔开。
var person = { id: 1, name:"抠腚男孩" };，可以通过.或者[]访问属性，比如：
person.id 和 person["id"]都是可以的。- 函数：通过function关键字来定义，使用大括号包裹代码块。
「4、运算符」
- 算数运算符(7种)：`+`(加)`-`(减)`*`(乘)`/`(除)`%`(求余)`++`(自增)`--`(自减)
- 赋值运算符(6种)：算数运算符后加`=`(等号)：`=`、`+=`、`-=`、`*=`、`/=`、`%=`
- 逻辑运算符(3种)：`&&`(和)`||`(或)`!`(非)，返回一个布尔值。
- 比较运算符(8种)：`==`(等于)、`===`(绝对等于，值与类型都相等)、`!=`(不等于)、
`!==`(值或类型不等)、`>`(大于)、`<`(小于)、`>=`(大于等于)、`<=`(小于等于)。 - 条件运算符：简化的if语句，比如：var s = age > 18? (输出成年):(输出未成年)。
- 按位运算符(7种)：`&`(按位与)`|`(按位或)`^`(按位异或)`~`(按位取反)`<<`(左移)
`>>`(有符号右移)`>>>`(无符号右移) - 类型运算符(2种)：typeof(返回变量类型)，instanceof(判断对象是否为某个类型)。
「5、条件结构」：JS中的条件结构分为if和switch结构，代码示例如下：
var socre = 70;
if(score > 60){
console.log("合格");
}else {
console.log("不合格");
};
if(score < 60){
console.log("不及格");
}else if(score <= 70){
console.log("及格");
}else if(score <= 80) {
console.log("中");
}else if(score <= 90) {
console.log("良");
}else {
console.log("优");
};
switch(true){
case score < 60: console.log("不及格"); break;
case score < 70: console.log("及格"); break;
case score < 80: console.log("中"); break;
case score < 90: console.log("良"); break;
default: console.log("优"); break;
};
复制代码「6、循环结构」
- for循环：多次循环执行某个代码块。
- for-in：遍历对象属性。
- while：当指定条件为true时，循环执行某个代码块，do-while是先执行一次再判断。
除此之外还有两个循环中断语句：break(跳出循环) 和 continue(跳过当前循环进入下次循环)。
关于JS的基本语法就讲到这里吧，内容太多一时半会也讲不完，想系统学的可以移步至：
www.w3school.com.cn/b.asp，反正我写了两周多的小程序也没怎么翻文档，
可能是我小程序还没玩溜吧，后面觉得有需要再另开一节撸JavaScript吧。
2、微信小程序中的WXML与WXSS
HTML/CSS和微信小程序的WXML/WXSS可谓是「极其相似」，官方有篇对比的文章：
《小程序代码构成》，这里简单提炼下要点。
① WXML VS HTML
- 不一样的标签：木有了
div,p,span，多了view,button,text等常用控件。- 不能操作DOM树：不能像网页一样通过DOM API操纵DOM的属性和行为，比如
无法通过getElementById()来访问元素。小程序采用MVVM模式，数据双向绑定，
通过一种模板语法来描述状态和界面结构关系。- 事件：组件的内部行为会通过事件的形式让开发者感知。
② CSS VS WXSS
- 新增尺寸单位：rpx，根据屏幕宽度进行自适应。
- 提供全局样式与局部样式：app.wxss全局生效，page名.wxss单页面生效。
- 仅支持部分CSS选择器。
PS：其实差别也不是很大，会HTML和CSS过渡到WXML和WXSS很容易，有问题多查
文档即可。
0x2 ?你太美贝贝oh（微信小程序组件速览）
1、自带组件一览
略略看下微信小程序都提供了哪些组件，想用的时候知道去查哪个就好，
本系列不会一个个讲解控件，官方文档对于各个组件都有详细讲解，
还有每个组件Bug & Tip 可以看看，文档链接：
developers.weixin.qq.com/miniprogram…
2、block wx:if vs hidden
在日常开发中有一个很常见的需求，根据不同的情况控制组件的显示或隐藏。
在微信小程序中可以通过
//添加一个变量控制
Page({
data: {
isLogin: false //是否登录
},
})
//使用<block wx:if>
<view class="container">
<block wx:if="{{isLogin}}">
<view>已登录view>
block>
<block wx:else>
<view>未登录view>
block>
view>
//使用hidden属性控制
<view hidden="{{isLogin}}">未登录view>
<view hidden="{{!isLogin}}">已登录view>
复制代码两种方法都可以实现我们想要的效果，接着说下两者的区别：
- wx:if：惰性，如果初始渲染条件为false，什么都不做，直到条件第一次为true时才
开始局部渲染，有更高的切换消耗，适用于运行条件改变不太频繁的场景。- hidden：组件始终会被渲染，只是控制显示与隐藏，有更高的初始渲染消耗，
适用于频繁切换的场景。
另外，有一点要注意：
block并不是一个组件！！！它仅仅是一个包装元素，不会在页面中做任何 渲染，只接受控制属性如wx:if，wx:for等。比如你想当条件成立时，显示这一堆
组件，不显示的时候用那堆组件，就可以用block包裹。如果只有一个组件需要
判断，就没必要裹一层block，比如上面的代码完全可以把block去掉：
<view wx:if="{{isLogin}}">已登录view>
<view wx:else>未登录view>
复制代码3、模板template与组件component
页面写多了，自然存在一些重复代码，毕竟美工也是想偷懒的，有相同
或类似的地方实属正常。不像美工直接复制个图层粘贴下就好了，我们
除了需要复制页面代码，还可能还需要去复制样式，交互逻辑等。每次
都手动去复制粘贴，多捞啊，作为一个喜欢效(tou)率(lan)的开发仔，肯定
要想办法把相关的代码抽取出来啊，用到的时候导一导就好。而在小程序
中提供了两种复用模式：
- template：模板，主要用于展示，函数需要在调用页另外写。
- component：组件，可以有自己的业务逻辑，可看做单独的page页面，用于业务逻辑交互多的场景。
接着我们写两个最简单的代码来分别体验下这两者的区别。
模板template
① 模板文件的创建与引用：
新建templates文件夹 => 新建一个text.wxml文件 => 模板部分使用标签包裹 => 可以写多个模板，通过name属性区分：
<template name="text">
<text>模板文字text>
template>
复制代码② 模板导入：
index.wxml中通过 import标签 引入模板文件 => 通过template标签的is属性确定引入的是哪个模板：
<import src="../../templates/text.wxml" />
<view class="container">
<template is="text"/>
view>
复制代码运行结果如下：
- ③ 模板样式导入：
通过@import方式导入样式文件:
<template name="text">
<text class="blue-text">模板文字text>
template>
.blue-text { color: blue; }
@import "../../templates/text.wxss" ;
复制代码运行结果如下：
④ 数据传递与事件处理
有时可能需要往模板中传递数据，或者处理一些事件，比如点击按钮显示Toast。
改下模板文字由js传，添加一个button，一个点击事件。
<template name="text">
<text class="blue-text">{{show}}text>
template>
<template name="button">
<button bindtap="onClick">按钮button>
template>
Page({
data: {
content: {
show: "哈哈"
}
},
onClick: function () {
wx.showToast({
title: '点击了',
})
}
})
<import src="../../templates/text.wxml" />
<view class="container">
<template is="text" data="{{...content}}"/>
<template is="button"/>
view>
复制代码运行结果如下：
组件component
新建compoments文件夹，新建一个test文件夹，把test.wxml和test.wxss
丢里面去，调整下test.wxml的代码：
<view>
<text class="blue-text">{{content.show}}text>
<button bindtap="onClick">按钮button>
view>
复制代码接着新建一个test.js文件，自定义组件的js和page的js有些不一样：
Component({
//组件的属性列表
properties: {
name: {
type: String,
value: '123'
}
},
//组件的初始数据
data: {
content: {
show: "哈哈"
}
},
// 组件的方法列表
methods: {
onClick: function () {
wx.showToast({
title: '点击了',
})
}
}
})
复制代码接着还需要添加一个test.json文件，声明这是一个组件：
{
"component": true,
"usingComponents": {}
}
复制代码引用控件，还需要在json进行配置，打开index.json，添加：
"usingComponents": {
"test": "../../components/test/test"
}
复制代码接着index.html去引用这个控件，可以传入js里定义的属性，比如这里的name：
<view class="container">
<test name="Test">test>
view>
复制代码运行结果如下：
关于自定义组件的内容还有很多，后面会结合实例讲，现在想了解的可移步至：
developers.weixin.qq.com/miniprogram…
0x3 ?你实在是太美贝贝（逆向微信小程序）
撸迅先森曾经这样说过：
借(chao)鉴(xi)别人的程序，可以说是开发仔的日常了：
看下别人页面是怎么堆的，样式怎么调的，动效怎么做的，逻辑怎么写的。
但是商用的项目，别人是不可能直接给你源码，让你借(chao)鉴(xi)的。
那么只能通过一些旁门左道的手段来获取源码了，就是：反编译。
❗️❗️❗️FBI Warning❗️❗️❗️
反编译别人源码的初衷只是为了：研究学习，看下别人怎么实现某个功能
点！不要去直接用别人的素材（版权），还有恶心改点东西的二次打包别人
的小程序商用，别人发现是会告你的，吃官司赔钱，严重点要去里面蹲的！！
自己把握好分寸吧，毕竟：
1、获取微信小程序源码包wxapkg
微信小程序的源码托管在微信服务器上的，当第一次打开小程序时，会把
小程序的源文件下载到本地，然后在解压编译执行。然后怎么拿到这个源
文件呢？抓包拿到源文件URL再去下载？naive，抓微信的链接基本离开
解密，先不说能不能解出来，你每反编译一个微信小程序就抓一次？
既然都下载到手机里，直接找到文件，复制到电脑上就好了。
你需要一台root了的安卓鸡，或者越狱了的苹果鸡
(笔者只有安卓鸡，就以为安卓机为例)之所以要root权限因为小程序源文件放在：
/data/data/com.tencent.mm/MicroMsg/{UserId}/appbrand/pkg
目录下，UserId是一串16进制的字符串。这里笔者使用RE文件管理器进入上述目录，
可以看到罗列的小程序的源文件：
但是这样一看，很难找出哪个是我们的目标。可以先打开微信，把目标小程序删除，
然后搜索找到小程序，打开，再回到这个目录下，按照日期降序排列，第一个就是
我们的目标小程序的源文件了！这里以喜茶GO小程序为例：
如图就是喜茶GO的小程序源文件了，接下来你有两种可选的方式把它弄到电脑上：
- 1.压缩文件；
- 2.复制文件到另一个目录，比如Download；
然后通过微信或者QQ发送到电脑，这里如果直接发送到话，会报文件找不到的！
2、反编译工具 wxappUnpacker
Github仓库：github.com/qwerty47212…
通过Git把项目clone到本地，接着如果你没安装Nodejs的百度下怎么安装，装好。
接着来到这个项目下，打开终端，安装一波依赖：
npm install esprima -g
npm install css-tree -g
npm install cssbeautify -g
npm install vm2 -g
npm install uglify-es -g
npm install js-beautify -g
npm install escodegen -g
复制代码ps：貌似还不止这些，反正运行的时候，报缺xxx，npm install xxx 即可。
3、开始反编译
打开终端，cd到wxappUnpacker目录下，键入：
node wuWxapkg.js xxx.wxapkg
复制代码运行后本该是全部这样的绿色，然后success的：
但是却报了这样的错：
搜了一下官方issues，2333，并没有答案，唉，难受，还能怎么样，自己动手找
问题，改啊。错误提示是找不到路径：
E:\Test\_-750230640_176\plugin-private:\wxbab743cd6debd38d\plugin.json
复制代码然后，看下对应的路径：
E:\Test\_-750230640_176\__plugin__\wxbab743cd6debd38d\plugin.json
复制代码我勒个大槽，plugin-private: 和 __plugin__，然后呢Windows是不支持:作为文件夹名的，
猜测是因为windows的原因，项目自动plugin-private:替换成了__plugin__，但是在目录寻址
时候，并没有做对应的转换，em…我们试下在保存文件的时候，替换下路径。先定位到错误行：
在70行前面添加：
name = name.replace("plugin-private:","__plugin__");
复制代码然后再执行一下：
卧槽，又报了新的错，同样官方issues查了下，没找到答案，貌似是因为
分包的问题，然后作者貌似被TX告了，代码也没怎么更新。评论区发现一个
后来者改进的库：github.com/gudqs7/wxap…
（建议fork避免以后库被和谐了）同样clone下来，npm安装依赖的库，接着键入：
./bingo.sh xxx.wxapkg
复制代码运行后，同样是报路径错误：
把上面替换路径的代码加上，保存，运行：
卧槽，nice，可以了，成功反编译。
4、微信开发者工具导入
打开微信开发者工具，把项目导入，使用一个随机的appid即可。
看到，底下报错了，用到了自定义的组件，来到路径下，新建一个空白的index.wxml，然后报错
同样新建一个空白的index.js文件，然后就可以看到喜茶的小程序在编译了：
然后弹出了需要定位权限的对话框：
打开app.json添加定位权限相关的配置：
"permission": {
"scope.userLocation": {
"desc": "你的位置信息将用于小程序位置接口的效果展示"
}
}
复制代码接着loading动画后，弹出下面这样的对话框：
然后设置开下不校验合法域名：
依旧是弹请重新连接网络的对话框，看到底下Network有个请求，一直403。
估计就是缺什么参数，会不会跟爬虫一样，可以写死请求头或参数，微信授权登陆
然后拿微信id作为用户凭证，然后去调自己的登陆接口，然后返回一串token
之类的，来完成后续请求，我抓包拿到这个token，程序写死应该就可以了，一般。
当我熟练的打开fiddler，为手机配置了手动代理，然后打开喜茶Go准备抓包，
但是，我却没有抓到任何请求？？？
试了下浏览器和其他APP，都能抓到数据，经过一番搜索看到这样的规则：
- 1.安卓系统 7.0 以下版本，不管微信任意版本，都会信任系统提供的证书。
- 2.安卓系统 7.0 以上版本，微信 7.0 以下版本，微信会信任系统提供的证书。
- 3.安卓系统 7.0 以上版本，微信 7.0 以上版本，微信只信任它自己配置的证书列表。
狡猾，真的狡猾，默默放下手中刷了类原生9.0的小米mix2s，翻箱倒柜找出了
珍藏已久的国行原生Moto X1085，看着这精致的竹子后盖，被岁月磨去痕迹的Moto Logo，
自己做的33娘的开机图片，往事历历在目，恍如昨天（2333，只是单纯的想秀一下而已）
行吧，配下手动代理，安装下证书，接着抓包看看，果然抓到数据了：
接着用VS Code打开编译后的源代码，全局搜authorizations，在api.js中找到：
在header处添加抓包看到的请求头refer：
referer: "https://servicewechat.com/wxxxxx42xx4f24xxxx/176/page-frame.html"
复制代码但是编译后报错：
貌似是跨域问题，不能直接设置，em…，那直接用PostMan模拟下请求吧：
我丢，这个code只能用一次，算了算了，懒得折腾了，把接口搞到了，
难不成我还能改下价格，1分钱买杯芝芝桃桃吗，我们的初衷只是想
想看看页面布局和样式这些而已！你可能会问：
登录都登录不了，一直卡这个页面，我怎么切去其他页面看效果？
这个简单，点击添加编译模式：
比如我想看关于喜茶GO页面，全局搜下“关于喜茶GO”，定位到aboutAggregate.wxml，
启动页面配置路径：pages/aboutGo/aboutAggregate/aboutAggregate，这个路径可以
在app.json中获取到，当然你输入aboutAggregate也是有智能提示的。
但是，编译后并没有加载出手机上显示的页面内容，打开aboutAggregate.wxml，
只有下面的代码：
<text>pages/aboutGo/aboutAggregate/aboutAggregatetext>
复制代码我丢，裤子都脱了，没有代码？？？
其实吧，这是小程序的分包加载机制，前面也说了第一次打开小程序，需要下载
完整的源码包，如果代码比较大的话，会有一个较长时间的白屏。为了良好的用户
体验，可以把代码划分成一个主包和多个子包。打开小程序默认加载主包，进入
分包页面时，再加载对应的分包。
em…所以我们还需要把子包搞出来，手机进入关于喜茶GO页面，加载完毕后，
RE文件管理器定位到wxapkg包的位置，果然有个新的包，而且后缀都是_176：
子包的反编译命令有点不一样：
./bingo.sh 子包.wxapkg -s=反编译后的主包目录
复制代码接着重新编译，aboutAggregate.wxml是有了，但是页面是乱的：
打开aboutAggregate.wxss，空空如也，打开子包反编译后的文件夹，
找到aboutAggregate.wxss，复制到主包中，重新编译就可以了。
关于分包加载详细内容，更多可移步至官网查阅：
developers.weixin.qq.com/miniprogram…
可以的，页面都看到了，你可能还有疑问：
我没登陆的话，那个弹窗一直在，或者有些控件要登陆后才能显示？
这不简单，直接去修改AppData，把判断标记改成你想要的值即可。
你可能又有疑问：
不登陆没有数据，列表不显示内容，我没办法看效果！
没数据自己造啊，抓包把对应接口的返回的数据复制下，简单点，写死到JS里，
复杂点，自己弄个本地mock服务器返回这些数据，然后js里改下数据获取的逻辑
就ojbk了。当然，你不喜欢太杂，可以把wxml，wxss，js直接抠出来自己另外弄。
方法有很多，自己动动脑瓜子哇！关于逆向微信小程序就讲这些吧，有遗漏的后面
再补上~
小结
本节并没有像一般基础入门教程一样，叽里呱啦就开始介绍一个个的控件，
个人感觉知道有哪些控件，用到的时候去哪里查就好。当然比较核心常用的还是
要了解下，比如上面的block标签，hidden属性，template模板，component组件。
大部分的情况是：刚开始学小程序，并不一定会有设计稿给你按着做，如果想练手，
借(chao)鉴(xi) 别人写好的小程序，写个一样的页面，不失为一种好的练手方式。
遇到不知道如何实现的，或者觉得自己的实现有点繁冗，想看看别人是怎么做的，
这个时候反编译别人小程序学习下还是挺好的~
参考文献：
- 微信小程序官方文档
- javaScript基础语法（上）
- 能进互联网公司的个个都是人才
如果本文对你有所帮助，欢迎
留言，点赞，转发
素质三连，谢谢?~