我写小程序像菜虚鲲—

引言

大家好，我是练习时长两年半的个人练习生菜虚鲲，我喜欢唱，跳，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页面代码示例如下：

<!DOCTYPE html><html><head><title>一个标题</title></head><body>    <p>内容</p></body></html>复制代码

接着是「两个名词」：

「标签/元素」：尖括号包围的关键词，比如上面的<p>，语法如下：

标签一般 成对出现，如上面的<p>内容</p>，也有例外，如换行<br>
前面的标签称为「开始/开放」标签，后面的标签称为「结束/闭合」标签。

标签支持嵌套，但 不能交叉，比如<div><p></p></div>正确，
但<div><p></div></p>却是错误的。

「属性」：给标签添加辅助信息，属性以 键值对 的形式出现，比如为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样式的四种方式：

<!-- ① 内联样式：直接通过style属性为某个元素指定CSS样式 --><p style="color: #000000;">xxx</p>

<!-- ② 内嵌样式：把CSS样式写到HTML文档中，使用<style>标签包含 --><style type="text/css">    h1 {background-color:#000000;}</style>

<!-- ③ <link>标签引入外部样式表，<head>标签中添加 --><head>    <link rel="stylesheet" type="text/css" href="mystyle.css"></head>

<!-- ④ @import 指令引入外部样式表 --><style>    @import url("style.css");</style>

<!-- 一个HTML可以同时使用这四种方式，优先级顺序：内联 > 内嵌 > import > link -->复制代码

CSS选择器

要为标签设置样式，总得先找到结点吧？CSS选择器就是用来 定位标签的一套规则。

三类选择器：

标签选择器：文档中 所有的特定标签 使用同一个CSS样式。

id选择器：元素以 id属性 来设置id选择器，选择器以"#"来定义。

类选择器：元素以 class属性 来设置类选择器，可以在多个元素中使用，以"."号显示。

新建一个test.html，试试CSS选择器的使用：

<!DOCTYPE html><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>文字1</p>  <p id="id-choose">文字2</p>  <p class="class-choose">文字3</p></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-else -->if(score > 60){  console.log("合格");}else {  console.log("不合格");};

<!-- if-else if -->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 -->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

在日常开发中有一个很常见的需求，根据不同的情况控制组件的显示或隐藏。
在微信小程序中可以通过<block wx:if>或hidden属性来控制，使用代码示例如下：

<!-- index.js -->//添加一个变量控制Page({  data: {    isLogin: false  //是否登录  },})

<!-- index.wxml -->//使用<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文件 => 模板部分使用<template>标签包裹 => 可以写多个模板，通过name属性区分：

<!-- test.wxml --><template name="text">        <text>模板文字</text></template>复制代码

② 模板导入：

index.wxml中通过 import标签 引入模板文件 => 通过template标签的is属性确定引入的是哪个模板：

<!-- index.wxml --><import src="../../templates/text.wxml" /><view class="container">        <template is="text"/></view>复制代码

运行结果如下：

③ 模板样式导入：

通过@import方式导入样式文件:

<!-- test.wxml --><template name="text">        <text class="blue-text">模板文字</text></template>

<!-- index.wxss -->.blue-text { color: blue; }

<!-- index.wxss -->@import "../../templates/text.wxss" ;复制代码

运行结果如下：

④ 数据传递与事件处理

有时可能需要往模板中传递数据，或者处理一些事件，比如点击按钮显示Toast。
改下模板文字由js传，添加一个button，一个点击事件。

<!-- test.wxml --><template name="text">        <text class="blue-text">{{show}}</text></template><template name="button">        <button bindtap="onClick">按钮</button></template>

<!-- index.js -->Page({  data: {    content: {      show: "哈哈"    }  },  onClick: function () {    wx.showToast({      title: '点击了',    })  }})

<!-- index.wxml --><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：

<!-- index.wxml --><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 -gnpm install css-tree -gnpm install cssbeautify -gnpm install vm2 -gnpm install uglify-es -gnpm install js-beautify -gnpm 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，
只有下面的代码：

<!--pages/aboutGo/aboutAggregate/aboutAggregate.wxml--><text>pages/aboutGo/aboutAggregate/aboutAggregate</text>复制代码

我丢，裤子都脱了，没有代码？？？

其实吧，这是小程序的分包加载机制，前面也说了第一次打开小程序，需要下载
完整的源码包，如果代码比较大的话，会有一个较长时间的白屏。为了良好的用户
体验，可以把代码划分成一个主包和多个子包。打开小程序默认加载主包，进入
分包页面时，再加载对应的分包。

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基础语法（上）
能进互联网公司的个个都是人才

如果本文对你有所帮助，欢迎
留言，点赞，转发
素质三连，谢谢?~

转载于:https://juejin.im/post/5d04b151f265da1b7004a6fb