引言
大家好，我是練習時長兩年半的個人練習生菜虛鯤，我喜歡唱，跳，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 -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，
只有下面的程式碼：
<!--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) 別人寫好的小程式，寫個一樣的頁面，不失為一種好的練手方式。
遇到不知道如何實現的，或者覺得自己的實現有點繁冗，想看看別人是怎麼做的，
這個時候反編譯別人小程式學習下還是挺好的~
參考文獻：
如果本文對你有所幫助，歡迎
留言，點贊，轉發
素質三連，謝謝?~