avatar是什么意思

微信⼩程序从⼊门到精通（⼀）基础知识与代码构成

前⾔

离上次写博客⼜有将近3个⽉了，⼀⽅⾯是换了新公司实在忙的要命，另⼀⽅⾯是因为⾃⼰确实懈怠了不少，有时突然感觉⾃⼰想学的东西

很多，想重新拾起1、2年前的android开发技能，已经快忘光了，然⽽⽬前⼯作主要是java彩票系统的业务开发，也基本不做运维了，担⼼

linux也要和android⼀样慢慢忘掉了，此时才体会到孔⽼夫⼦提出的“温故知新”这四个字的重要性啊，随着年龄的增长，技术必然不能⽌

步不前，⼀位⼤学时的友⼈问我能否接个⼩程序开发的私活，思来想去，这么久没有认真学⼀下新的技术，索性接下来边学边做，回⾸过

去，我13年⾃学开发微信公众号，14年⾃学开发android，⽽且均略有⼩成，所以想借此机会找⼀找当初的那种学习状态，毕竟我还有⼀

个未完成的全栈梦想呢，哈哈，废话不多说，如标题，从今天开始我就会坚持学习开发⼀段时间微信⼩程序，并把这个过程记录下来。

代码构成

从代码构成开始吧，毕竟万物起源于helloworld~什么帐号申请、IDE下载之类的我就不在此赘述了，先来看⼀个最简单的⼩程序的⽂件结

构，第⼀次启动IDE会提⽰可以创建⼀个简单的QuickStart项⽬：

如上图，我们就以这个最简单的快速启动模板项⽬的代码为例，看⼀看⼀个⼩程序项⽬的基本结构：

如上图，此处重点注意⼀下标记出的4个⽂件：

同html很类似，这个⽂件描述了⼩程序页⾯的结构，如上图，我们可以看到view、button、image等标签，这些标签在⼩程序中被按功能

包装了起来，这⼀点就类似于android开发中的控件概念。还有在上图中我们看到了⼀些表达式，例如：wx:if=”{{}}”，第⼀眼的感觉仿

佛是jsp的jstl或者freemarker的动态表达式（c:if等），其实不然，实际上它是数据绑定与条件渲染的结合，那么问题来了，什么是数据绑

定，什么⼜是条件渲染呢？⾸先来看看数据绑定，QuickStart项⽬给出的⽰例代码是这样的：

如上所⽰，通过{{}}的语法把⼀个变量绑定到界⾯上，就叫数据绑定，然后在js中为我们这个变量设置状态（值），如上的例⼦所

⽰，WXML中的动态数据均来⾃对应Page的data，我们把data可以理解成⼀个固定的jsonkey，包含了所有WXML中的变量定义，如

下所⽰：

既然说到数据绑定，⾃然也就不能不说MVVM模式，从传统的MVC到MVP再到MVVM，这种模式在android开发中有较为⼴泛的应⽤，

还有前端开发中的Vue、React等框架，同时微信⼩程序也是采⽤了这种思想。说完了数据绑定，再简单看看条件渲染，通过wx:if即可判断

是否需要渲染该代码块，依旧以QuickStart项⽬中的代码⽚段为例：

{{message}}

//

Page({

data:{

message:'HelloMINA!'

}

})

data:{

xxx:'',

xxx:'',

...

}

如上所⽰，可以看到在button中有wx:if判断条件，意思就是当条件成⽴⼩程序页⾯才会渲染这个button，否则就会在页⾯上渲染下⾯的

wx:el中的WXML代码，⽽wx:el前⾯有个block标签，也很好理解，由于wx:el⾥有2个标签（image和text），所以需要⽤block包

起来做为⼀个整体进⾏渲染，所以把block理解成块级元素即可，这样我们就算初步理解了数据绑定和条件渲染了，接下来看看样式⽂件

——。

wxss⽂件就相当于html中的css⽂件，具有CSS⼤部分的特性，⽽不同的是⼩程序新增了⼀个尺⼨单位rpx，同android开发中的dp类似

都是为了解决不同屏幕⼤⼩的设备像素⽐的问题，在官⽅⽂档中是这样定义的：

可以根据屏幕宽度进⾏⾃适应，规定屏幕宽为750rpx。

如上所⽰，也就是说我们可以根据不同设备的宽度的逻辑像素进⾏换算，例如iphone6的逻辑像素是375px，物理像素是750px，所以

1rpx=0.5逻辑像素=1物理像素，⼩程序中的rpx单位正是以iphone6的屏幕分辨率为基准设计的，因为在iphone6的326ppi像素密度

下，1rpx=1物理像素，所以我们在开发时也尽量使⽤iphone6作为视觉标准，关于移动开发中⽤到的这些诸如“物理像素”、“逻辑像

素”、“dpr”、“dpi”等等不清楚的，可以参考我之前写过的⼀篇博客（），对这些都做了详细的阐述。关于wxss还有⼀些常⽤的基础

知识点跟css很类似，例如全局/局部样式、选择器等等，以⼏种常见的选择器为例：

1..

2.#id#firstname

tview

如上所⽰，样式选择器、id选择器、组件选择器，同css完全⼀样，没有任何区别。关于wxss还有⼀点了解⼀下就是全局样式和局部样式，

在实际开发中会⽐较常⽤：

定义在中的样式为全局样式，在page的wxss⽂件中定义的样式为局部样式。

如上所⽰，把多个页⾯通⽤的样式可以写在中进⾏全局定义，⽽每个页⾯个性化的那部分样式写在page下各⾃的wxss⽂件中，

看完了样式⽂件，接下来我们看看相对更加重要的js事件交互。

同样的与web中的javascript类似，js在⼩程序中也是负责解决页⾯的动态交互，依旧以QuickStart项⽬中的⽰例代码为例：

如上所⽰，如果我们希望在点击按钮时候做⼀些事情，那么就需要在js中去写相关的逻辑代码了，在上⾯的代码中我们看到button组件中声

明了这样⼀个属性bindtap，这就牵扯到事件的概念了，同时需要注意的是bindtap="clickMe"称为绑定事件，需要分为两部分看，分别是：

p

e

如上所⽰，bindtap我们称为key，⽽clickMe称为value，也就是说事件绑定的写法是key/value形式的，⾸先来看⼀下key——

bindtap，key我们也需要分为两部分看：

获取头像昵称

{{me}}

{{msg}}

点击我

bind是⼀个动词，代表绑定动作，⽽tap是⼀个名词，代表真正的事件，那么⼩程序中都有哪些事件呢？随意列举⼏个先简单看⼀下：

类型触发条件

touchstart⼿指触摸动作开始

touchmove⼿指触摸后移动

touchcancel⼿指触摸动作被打断，如来电提醒，弹窗

tap⼿指触摸后马上离开

longpress⼿指触摸后，超过350ms再离开，如果指定了事件回调函数并触发了这个事件，tap事件将不被触发

transitionend会在WXSStransition或Animation动画结束后触发

所以bindtap共同构成了我们事件绑定的key，这⾥引⽤官⽅⽂档的⼀句话：

在⼩程序中，key以bind或catch开头，然后跟上事件的类型。

也就是说，我们事件绑定中的key的这个动词，只能是bind或catch，那它们两个⼜有什么区别呢？官⽅⽂档中解释的很清楚：

bind事件绑定不会阻⽌冒泡事件向上冒泡，catch事件绑定可以阻⽌冒泡事件向上冒泡。

如上所⽰，我们先有个⼤体的印象，⾄于什么冒泡事件以后再说，本篇blog仅仅作为⼀个基础⼊门篇，现在我们已经清楚了bindtap表⽰绑

定了⼀个触摸事件，那接下来看⼀下key/value中的value。在上⾯的代码中value的值是clickMe，这相当于⼀个函数名，类似于我们在

html中写的onclick函数：

所以说value我们仅需要在js中对应的去定义好即可，⾄于怎么定义，官⽅⽂档中也给出了明确的说明：

在相应的Page定义中写上相应的事件处理函数，参数是event。

同时也给出了⽰例代码：

Page({

tapName:function(event){

(event)

}

})

如上所⽰，我们的事件绑定函数需要定义在Page中，tapName就是对应的函数名，同时我们发现事件处理函数还有⼀个参数event，下⾯

通过运⾏程序点击button看⼀下event⾥都有什么数据：

如上图，点击button后我们在控制台可以看到⼀组json格式的数据，这就是该事件所包含的⼀些相关信息，例如事件类型（tap）、时间戳

和控件位置坐标等等，在本篇blog中暂不做过多说明，我们⼤致了解⼀下即可。现在我们已经理解了关于事件绑定的相关使⽤⽅法，那么再

回头看⼀下上图中的代码，细⼼的朋友可能会注意⼀下第10⾏：

如上所⽰，将e这个东东的返回值赋值给了canIU变量，那么这⾏代码是什么意思呢？这就要提⼀下⼩程序给我们提供的API

了，这是⼩程序⾮常nice的⼀点，通过这些API，我们可以⽅便的调⽤微信⼩程序为我们提供的能⼒，例如获取⽤户信息、本地存储、微信

⽀付等，⽽不⽤再像android开发那样去集成对接第三⽅SDK再去写繁琐的实现代码等等，所以说⼩程序API很棒很nice，可以让我们直接

调⽤API快速实现⼀些功能性问题，从⽽把精⼒集中在产品⾃⾝的业务逻辑上。下⾯简单看⼀下官⽅⽂档中对于⼩程序API的通⽤说明：

开头的API是监听某个事件发⽣的API接⼝，接受⼀个CALLBACK函数作为参数。当该事件触发时，会调⽤CALLBACK

函数。

2.如未特殊约定，其他API接⼝都接受⼀个OBJECT作为参数。

中可以指定success,fail,complete来接收接⼝调⽤结果。

简单了解⼀下，并注意下第2点，也就是说⼀般的API接⼝都会接受⼀个OBJECT做为参数，就如同我们上⾯简易教程的代

码e('rInfo')，接下来我们具体看⼀下e(String)这个API的使⽤⽅法，官⽅⽂档中做了详细的说

明：

判断⼩程序的API，回调，参数，组件等是否在当前版本可⽤。

如上所⽰，这个API主要是做⼀些组件在当前版本的可⽤性check，接下来我们看⼀下参数说明，也就是rInfo代表什

么意思，在官⽅⽂档中给出了两种参数形式，分别是：

s

canIU:e('rInfo')

如上所⽰，可以理解成有两个重载⽅法，第⼀种传4个参数，第⼆种传3个参数，我们上⾯的例⼦显然是第⼆种⽅式，再来看⼀下这些参数

名的含义：

api代表API名字

method代表调⽤⽅式，有效值为return,success,object,callback

param代表参数或者返回值

options代表参数的可选值

component代表组件名字

attribute代表组件属性

option代表组件属性的可选值

现在就清楚了，我们例⼦中的参数'rInfo'表⽰open-type属性为getUrInfo的button组件。⼤致了解了js之后，我

们最后看⼀下这个⽂件。

先来直接看⼀下官⽅⽂档中对的概述：

是对当前⼩程序的全局配置，包括了⼩程序的所有页⾯路径、界⾯表现、⽹络超时时间、底部tab等。

如上所⽰，暂且理解为⼀个全局配置，有点类似于android中的manifest⽂件，下⾯看⼀下QuickStart项⽬中的⽂件的具体代

码：

如上所⽰，只有短短12⾏的json格式⽂件，可以看到有2个key，分别是pages和window，下⾯就具体看⼀下这两项配置的作⽤，引⽤官

⽅⽂档的原话：

pages字段——⽤于描述当前⼩程序所有页⾯路径，这是为了让微信客户端知道当前你的⼩程序页⾯定义在哪个⽬录。

{

"pages":[

"pages/index/index",

"pages/logs/logs"

],

"window":{

"backgroundTextStyle":"light",

"navigationBarBackgroundColor":"#fff",

"navigationBarTitleText":"WeChat",

"navigationBarTextStyle":"black"

}

}

如上所⽰，pages对应⼀个字符串数组，⽂档说它们描述了⼩程序所有的页⾯路径，换句话说，就是⼩程序中的所有页⾯都需要在

⽂件中声明具体的路径，注意理解我这⾥⽤的声明（declare）这个词，也就是说如果创建了某个wxml⽂件却没有在中做声明配

置，那么就意味着⼩程序找不到这个页⾯，当然也就⽆法正常显⽰了。下⾯先看⼀下我们demo项⽬中的页⾯⽂件⽬录：

如上图，可以看到pages⽬录下有两个⽬录，分别是index和logs，每个⽬录下放的是页⾯样式等相关⽂件，⽬录名与⽂件名相同，这⾥注

意我们在定义的第⼀个路径是pages/index/index，但是我们在pages/index⽬录下有3个⽂件，只在配置中写⽂件的前缀不写后缀就

可以⾃动匹配所有⽂件吗？答案是肯定的，⽂档中也说明了这⼀点：

⽂件名不需要写⽂件后缀，因为框架会⾃动去寻找路径下.json,.js,.wxml,.wxss四个⽂件进⾏整合。

如上所⽰，这样我们就清楚了在中可以不⽤配置⽂件后缀，当然前提是⽂件前缀必须⼀致，这⼀点很重要。最后还有⼀个细节性的

点，就说pages配置的这个数组的第⼀项代表⼩程序的初始页⾯，上⾯我们配置的第⼀项是index，所以⼩程序的启动页就是

了，关于pages先说这么多，接下来看看window这个配置项，继续看官⽅⽂档中对于window这个配置项的概述：

window字段——⼩程序所有页⾯的顶部背景颜⾊，⽂字颜⾊定义在这⾥的。

如上所⽰，说⽩了就是⼀些状态栏、导航条的样式设置等，也不多总共就7个配置项，包括状态栏、导航条、标题、窗⼝背景⾊，在说配置

之前我们⾸先需要明⽩哪⾥是状态栏、导航条等等，下⾯具体看⼀下模拟器中的界⾯：

如上图，标记出的这⼀块就是导航条（navigationBar），所以我们在QuickStart项⽬中配置的下⾯这3项都是关于navigationBar的：

"navigationBarBackgroundColor":"#fff",

"navigationBarTitleText":"WeChat",

"navigationBarTextStyle":"black"

如上所⽰，依次看⼀下，第⼀个顾名思义就是导航条的背景⾊了，这⾥给的是⽩⾊（#fff），注意下仅⽀持HexColor（⼗六进制颜⾊值，

例如：#fff000），不像css中还可以写成单词形式（red、white等等）。下⾯我们随意修改⼀下就可以更清楚的看出navigationBar的范

围了：

如上图，第⼆个配置navigationBarTitleText代表导航条标题，也就是上图中的WeChat字样，当然配置在中是全局的标题，如果

我们⾃定义的页⾯需要个性化的标题也很简单，直接在该页⾯的⽬录下创建⾃⼰的进⾏配置即可，优先级⾃然就不⽤说了。第三个

配置navigationBarTextStyle**代表导航栏标题颜⾊，默认⽩⾊（white），并且仅⽀持⽩⾊和⿊⾊（black/white）**这两种颜⾊，下⾯

分别看⼀下这两种样式的效果图：

上⾯详细解析了window配置项中的3个，那么下⾯就把剩下的4个也依次了解⼀下：

属性类型默认值描述

backgroundColorHexColorffffff窗⼝的背景⾊

backgroundTextStyleStringdark下拉背景字体、loading图的样式，仅⽀持dark/light

enablePullDownRefreshBooleanfal是否开启下拉刷新

onReachBottomDistanceNumber50页⾯上拉触底事件触发时距页⾯底部距离，单位为px

如上所⽰，⾸先来看backgroundColor——窗⼝的背景⾊，那窗⼝指的是哪⾥呢？看⼀下官⽅⽂档中的这张图：

如上图，background位于navigationBar和page之间，但是我们在模拟器中并不能看到，原因是它需要下拉才能显⽰这⽚区域，所以我们

⾸先需要把上⾯4个配置项中的enablePullDownRefresh属性设置为true来开启下拉刷新。开启之后设置⼀个背景颜⾊（#ffff00），然后

在模拟器中来尝试⼀下下拉刷新动作：

如上图，这就是⼩程序⾃带的下拉刷新，我们可以清楚的看到background区域，接下来看⼀下backgroundTextStyle属性，默认为light

且仅⽀持light/dark这两个属性值，默认的效果在上⾯的动图中已经看过了，那我们修改为dark再看⼀下下拉的样式：

如上图，很明显下拉刷新的loading样式发⽣了改变。下⾯接着看剩下的最后⼀个window配置项——onReachBottomDistance，官⽅⽂

档的解释是：

页⾯上拉触底事件触发时距页⾯底部距离，单位为px，默认值为50。

如上所⽰，这个属性提到了上拉触底（onReachBottom），这个操作类似于android中的上拉加载的概念，通常⽤于分页数据的加载，在

此我们暂不做过多介绍，先了解有这么个东西就⾏，以后在实际应⽤中再做详细说明，到此为⽌关于中的window的所有属性配置

项就全部介绍完毕了，同时我们的第⼀个QuickStart项⽬的代码中最重要的4个⽂件（wxml、wxss、js、）也算是全部介绍完毕

了。

总结

本篇blog以QuickStart项⽬为例，整体介绍了微信⼩程序的项⽬结构以及4个最重要的⽂件类型，并适当与android开发做了⽐较，算是对

⼩程序做了⼀个⼊门性的认识以及建⽴⼀个⼤体的概念模型，在后续的blog中会逐步深⼊去研究⼩程序的技术点，直到最终能写出⼀个漂亮

完整的⼩程序！周末愉快，TheEnd。