我写小程序像菜虚鲲——2、🐔你太美

引言

大家好,我是练习时长两年半的个人练习生菜虚鲲,我喜欢唱,跳,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>
复制代码

接着是**「两个名词」**:

标签 / 元素」:尖括号包围的关键词,比如上面的

,语法如下:

  • 标签一般 成对出现,如上面的

    内容

    ,也有例外,如换行 < br>
    前面的标签称为「开始 / 开放」标签,后面的标签称为「结束 / 闭合」标签。
  • 标签支持 嵌套,但 不能交叉,比如

    正确,

    却是错误的。

属性」:给标签添加辅助信息,属性以 键值对 的形式出现,比如为 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…


JSJavaScript

号称最流行的脚本语言 (我大 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.idperson["id"] 都是可以的。
  • 函数:通过 function 关键字来定义,使用大括号包裹代码块。

「4、运算符」

  • 算数运算符 (7 种):+(加)-(减)*(乘)/(除)%(求余)++(自增)--(自减)
  • 赋值运算符 (6 种):算数运算符后加 =(等号)=+=-=*=/=%=
  • 逻辑运算符 (3 种):&&(和)||(或)!(非),返回一个布尔值。
  • 比较运算符 (8 种):==(等于)、===(绝对等于,值与类型都相等)、!=(不等于)、
    !==(值或类型不等)、>(大于)、<(小于)、>=(大于等于)、<=(小于等于)
  • 条件运算符:简化的 if 语句,比如:var s = age > 18? (输出成年):(输出未成年)
  • 按位运算符 (7 种):&(按位与)|(按位或)^(按位异或)~(按位取反)<<(左移)
    >>(有符号右移)>>>(无符号右移)
  • 类型运算符 (2 种):typeof(返回变量类型),instanceof(判断对象是否为某个类型)。

「5、条件结构」:JS 中的条件结构分为 ifswitch 结构,代码示例如下:

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

在日常开发中有一个很常见的需求,根据不同的情况控制组件的显示或隐藏。
在微信小程序中可以通过 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 >
        <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 >
        <text class="blue-text">模板文字</text>
</template>

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

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

运行结果如下

数据传递与事件处理

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

<!-- test.wxml -->
<template >
        <text class="blue-text">{{show}}</text>
</template>
<template >
        <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 ></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. 压缩文件;
    1. 复制文件到另一个目录,比如 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 以下版本,不管微信任意版本,都会信任系统提供的证书。
    1. 安卓系统 7.0 以上版本,微信 7.0 以下版本,微信会信任系统提供的证书。
    1. 安卓系统 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) 别人写好的小程序,写个一样的页面,不失为一种好的练手方式。
遇到不知道如何实现的,或者觉得自己的实现有点繁冗,想看看别人是怎么做的,
这个时候反编译别人小程序学习下还是挺好的~


参考文献