阅读 2300

我写小程序像菜虚鲲——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>
复制代码

接着是「两个名词」

标签/元素」:尖括号包围的关键词,比如上面的<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…


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

在日常开发中有一个很常见的需求,根据不同的情况控制组件的显示或隐藏。
在微信小程序中可以通过<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: {
      typeString,
      value'123'
    }
  },

  //组件的初始数据
  data: {
    content: {
      show"哈哈"
    }
  },

  // 组件的方法列表
  methods: {
    onClickfunction ({
      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) 别人写好的小程序,写个一样的页面,不失为一种好的练手方式。
遇到不知道如何实现的,或者觉得自己的实现有点繁冗,想看看别人是怎么做的,
这个时候反编译别人小程序学习下还是挺好的~


参考文献


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


关注下面的标签,发现更多相似文章
评论