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发送到电脑，这里如果直接发送到话，会报文件找不到的！
