微信小程序从入门到精通（一）基础知识与代码构成

阳光穿透心脏的1/2处 2022-06-03 07:29 144阅读 0赞

# 前言 #

离上次写博客又有将近3个月了，一方面是换了新公司实在忙的要命，另一方面是因为自己确实懈怠了不少，有时突然感觉自己想学的东西很多，想重新拾起1、2年前的android开发技能，已经快忘光了，然而目前工作主要是java彩票系统的业务开发，也基本不做运维了，担心linux也要和android一样慢慢忘掉了，此时才体会到孔老夫子提出的“温故知新”这四个字的重要性啊，随着年龄的增长，技术必然不能止步不前，一位大学时的友人问我能否接个小程序开发的私活，思来想去，这么久没有认真学一下新的技术，索性接下来边学边做，回首过去，我13年自学开发微信公众号，14年自学开发android，而且均略有小成，所以想借此机会找一找当初的那种学习状态，毕竟我还有一个未完成的全栈梦想呢，哈哈，废话不多说，如标题，从今天开始我就会坚持学习开发一段时间微信小程序，并把这个过程记录下来。

# 代码构成 #

从代码构成开始吧，毕竟万物起源于hello world~什么帐号申请、IDE下载之类的我就不在此赘述了，先来看一个最简单的小程序的文件结构，第一次启动IDE会提示可以创建一个简单的QuickStart项目：  
![这里写图片描述][SouthEast]

如上图，我们就以这个最简单的快速启动模板项目的代码为例，看一看一个小程序项目的基本结构：  
![这里写图片描述][SouthEast 1]

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

## 1. wxml ##

同html很类似，这个文件描述了小程序页面的结构，如上图，我们可以看到view、button、image等标签，这些标签在小程序中被按功能包装了起来，这一点就类似于android开发中的控件概念。还有在上图中我们看到了一些表达式，例如：**wx:if=”\{ \{ \}\}”**，第一眼的感觉仿佛是**jsp的jstl或者freemarker**的动态表达式（c:if等），其实不然，实际上它是**数据绑定**与**条件渲染**的结合，那么问题来了，什么是数据绑定，什么又是条件渲染呢？首先来看看数据绑定，QuickStart项目给出的示例代码是这样的：

<view> { { message}} </view>

// page.js
    Page({
      data: { message: 'Hello MINA!' }
    })

如上所示，通过 **\{ \{ \}\}** 的语法把一个变量绑定到界面上，就叫数据绑定，然后在js中为我们这个变量设置状态（值），如上的例子所示，**WXML 中的动态数据均来自对应 Page 的 data**，我们把data可以理解成一个固定的json key，包含了所有WXML中的变量定义，如下所示：

data: {
       xxx:'',
       xxx:'',
       ...
      }

既然说到数据绑定，自然也就不能不说**MVVM**模式，从传统的**MVC**到**MVP**再到**MVVM**，这种模式在android开发中有较为广泛的应用，还有前端开发中的**Vue**、**React**等框架，同时微信小程序也是采用了这种思想。说完了数据绑定，再简单看看条件渲染，通过**wx:if**即可判断**是否需要渲染该代码块**，依旧以QuickStart项目中的代码片段为例：

<view class="userinfo"> <button wx:if="{ {!hasUserInfo && canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 获取头像昵称 </button> <block wx:else> <image bindtap="bindViewTap" class="userinfo-avatar" src="{ { userInfo.avatarUrl}}" background-size="cover"></image> <text class="userinfo-nickname">{ { userInfo.nickName}}</text> </block> </view>

如上所示，可以看到在button中有wx:if判断条件，意思就是**当条件成立小程序页面才会渲染这个button，否则就会在页面上渲染下面的wx:else中的WXML代码**，而wx:else前面有个block标签，也很好理解，由于wx:else里有2个标签（image和text），所以需要用block包起来做为一个整体进行渲染，所以把block理解成块级元素即可，这样我们就算初步理解了数据绑定和条件渲染了，接下来看看样式文件——index.wxss。

## 2. wxss ##

wxss文件就相当于html中的css文件，具有 CSS 大部分的特性，而不同的是小程序新增了一个尺寸单位rpx，同android开发中的dp类似都是为了解决不同屏幕大小的设备像素比的问题，在官方文档中是这样定义的：

> 可以根据屏幕宽度进行自适应，规定屏幕宽为750rpx。

如上所示，也就是说我们可以根据不同设备的宽度的逻辑像素进行换算，例如iphone6的逻辑像素是375px，物理像素是750px，所以1rpx=0.5逻辑像素=1物理像素，小程序中的rpx单位正是以iphone6的屏幕分辨率为基准设计的，因为在iphone6的326ppi像素密度下，1rpx=1物理像素，所以我们在开发时也尽量使用iphone6作为视觉标准，关于移动开发中用到的这些诸如“物理像素”、“逻辑像素”、“dpr”、“dpi”等等不清楚的，可以参考我之前写过的一篇博客（[移动开发中“单位”的那些事儿][Link 1]），对这些都做了详细的阐述。关于wxss还有一些常用的基础知识点跟css很类似，例如**全局/局部样式**、**选择器**等等，以几种常见的选择器为例：

1.  .class `.intro`
2.  \#id `#firstname`
3.  element `view`

如上所示，样式选择器、id选择器、组件选择器，同css完全一样，没有任何区别。关于wxss还有一点了解一下就是**全局样式**和**局部样式**，在实际开发中会比较常用：

> 定义在 app.wxss 中的样式为全局样式，在 page 的 wxss 文件中定义的样式为局部样式。

如上所示，把多个页面通用的样式可以写在app.wxss中进行全局定义，而每个页面个性化的那部分样式写在page下各自的wxss文件中，看完了样式文件，接下来我们看看相对更加重要的js事件交互。

## 3.js ##

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

如上所示，如果我们希望在点击按钮时候做一些事情，那么就需要在js中去写相关的逻辑代码了，在上面的代码中我们看到button组件中声明了这样一个属性`bindtap`，这就牵扯到**事件**的概念了，同时需要注意的是`bindtap="clickMe"`称为**绑定事件**，需要分为两部分看，分别是：

1.  bindtap
2.  clickMe

如上所示，bindtap我们称为**key**，而clickMe称为**value**，也就是说事件绑定的写法是**key/value**形式的，首先来看一下key——bindtap，key我们也需要分为两部分看：

1.  bind
2.  tap

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

<table> 
 <thead> 
  <tr> 
   <th align="left">类型</th> 
   <th align="left">触发条件</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">touchstart</td> 
   <td align="left">手指触摸动作开始</td> 
  </tr> 
  <tr> 
   <td align="left">touchmove</td> 
   <td align="left">手指触摸后移动</td> 
  </tr> 
  <tr> 
   <td align="left">touchcancel</td> 
   <td align="left">手指触摸动作被打断，如来电提醒，弹窗</td> 
  </tr> 
  <tr> 
   <td align="left">tap</td> 
   <td align="left">手指触摸后马上离开</td> 
  </tr> 
  <tr> 
   <td align="left">longpress</td> 
   <td align="left">手指触摸后，超过350ms再离开，如果指定了事件回调函数并触发了这个事件，tap事件将不被触发</td> 
  </tr> 
  <tr> 
   <td align="left">transitionend</td> 
   <td align="left">会在 WXSS transition 或 wx.createAnimation 动画结束后触发</td> 
  </tr> 
 </tbody> 
</table>

--------------------

所以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) { console.log(event) }
    })

如上所示，我们的事件绑定函数需要定义在**Page**中，tapName就是对应的函数名，同时我们发现事件处理函数还有一个参数event，下面通过运行程序点击button看一下event里都有什么数据：  
![这里写图片描述][SouthEast 2]

如上图，点击button后我们在控制台可以看到一组json格式的数据，这就是该事件所包含的一些相关信息，例如事件类型（tap）、时间戳和控件位置坐标等等，在本篇blog中暂不做过多说明，我们大致了解一下即可。现在我们已经理解了关于事件绑定的相关使用方法，那么再回头看一下上图中的代码，细心的朋友可能会注意一下第10行：

canIUse: wx.canIUse('button.open-type.getUserInfo')

如上所示，将wx.canIUse这个东东的返回值赋值给了canIUse变量，那么这行代码是什么意思呢？这就要提一下小程序给我们提供的**API**了，这是小程序非常nice的一点，通过这些API，我们可以方便的调用微信小程序为我们提供的能力，例如**获取用户信息**、**本地存储**、**微信支付**等，而不用再像android开发那样去集成对接第三方SDK再去写繁琐的实现代码等等，所以说**小程序API很棒很nice**，**可以让我们直接调用API快速实现一些功能性问题，从而把精力集中在产品自身的业务逻辑上**。下面简单看一下官方文档中对于小程序API的通用说明：

> 1.wx.on 开头的 API 是监听某个事件发生的API接口，接受一个 CALLBACK 函数作为参数。当该事件触发时，会调用 CALLBACK 函数。  
> 2.如未特殊约定，其他 API 接口都接受一个OBJECT作为参数。  
> 3.OBJECT中可以指定success, fail, complete来接收接口调用结果。

简单了解一下，并注意下第2点，也就是说一般的API接口都会接受一个OBJECT做为参数，就如同我们上面简易教程的代码`wx.canIUse('button.open-type.getUserInfo')`，接下来我们具体看一下**wx.canIUse(String)**这个API的使用方法，官方文档中做了详细的说明：

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

如上所示，这个API主要是做一些组件在当前版本的可用性check，接下来我们看一下参数说明，也就是`button.open-type.getUserInfo` 代表什么意思，在官方文档中给出了两种参数形式，分别是：

1.  api.method.param.options
2.  component.attribute.option

如上所示，可以理解成有两个重载方法，第一种传4个参数，第二种传3个参数，我们上面的例子显然是第二种方式，再来看一下这些参数名的含义：

*  api 代表 API 名字
 *  method 代表调用方式，有效值为return, success, object,callback
 *  param 代表参数或者返回值
 *  options 代表参数的可选值
 *  component 代表组件名字
 *  attribute 代表组件属性
 *  option 代表组件属性的可选值

现在就清楚了，我们例子中的参数`'button.open-type.getUserInfo'`表示**open-type属性为getUserInfo的button组件**。大致了解了js之后，我们最后看一下app.json这个文件。

## 4. app.json ##

先来直接看一下官方文档中对app.json的概述：

> app.json 是对当前小程序的全局配置，包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等。

如上所示，暂且理解为一个全局配置，有点类似于android中的manifest文件，下面看一下QuickStart项目中的app.json文件的具体代码：

{
      "pages":[ "pages/index/index", "pages/logs/logs" ],
      "window":{ "backgroundTextStyle":"light", "navigationBarBackgroundColor": "#fff", "navigationBarTitleText": "WeChat", "navigationBarTextStyle":"black" } }

如上所示，只有短短12行的json格式文件，可以看到有2个key，分别是**pages**和**window**，下面就具体看一下这两项配置的作用，引用官方文档的原话：

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

如上所示，pages对应一个字符串数组，文档说它们描述了**小程序所有的页面路径**，换句话说，就是小程序中的所有页面都需要在app.json文件中**声明**具体的路径，注意理解我这里用的**声明（declare）**这个词，也就是说如果创建了某个wxml文件却没有在app.json中做声明配置，那么就意味着小程序找不到这个页面，当然也就无法正常显示了。下面先看一下我们demo项目中的页面文件目录：  
![这里写图片描述][SouthEast 3]  
如上图，可以看到pages目录下有两个目录，分别是index和logs，每个目录下放的是页面样式等相关文件，**目录名与文件名相同**，这里注意我们在app.json定义的第一个路径是`pages/index/index`，但是我们在`pages/index`目录下有3个文件，只在配置中写文件的前缀不写后缀就可以自动匹配所有文件吗？答案是肯定的，文档中也说明了这一点：

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

如上所示，这样我们就清楚了在app.json中可以不用配置文件后缀，当然前提是**文件前缀必须一致**，这一点很重要。最后还有一个细节性的点，就说**pages配置的这个数组的第一项代表小程序的初始页面**，上面我们配置的第一项是index，所以小程序的启动页就是index.wxml了，关于pages先说这么多，接下来看看window这个配置项，继续看官方文档中对于window这个配置项的概述：

> window字段 —— 小程序所有页面的顶部背景颜色，文字颜色定义在这里的。

如上所示，说白了就是一些状态栏、导航条的样式设置等，也不多总共就7个配置项，包括**状态栏**、**导航条**、**标题**、**窗口背景色**，在说配置之前我们首先需要明白哪里是状态栏、导航条等等，下面具体看一下模拟器中的界面：  
![这里写图片描述][SouthEast 4]  
如上图，标记出的这一块就是导航条（navigationBar），所以我们在QuickStart项目中配置的下面这3项都是关于navigationBar的：

"navigationBarBackgroundColor": "#fff",
        "navigationBarTitleText": "WeChat",
        "navigationBarTextStyle":"black"

如上所示，依次看一下，第一个顾名思义就是导航条的背景色了，这里给的是白色（\#fff），注意下仅支持HexColor（十六进制颜色值，例如：\#fff000），不像css中还可以写成单词形式（red、white等等）。下面我们随意修改一下就可以更清楚的看出navigationBar的范围了：  
![这里写图片描述][SouthEast 5]  
如上图，第二个配置navigationBarTitleText代表导航条标题，也就是上图中的WeChat字样，当然配置在app.json中是全局的标题，如果我们自定义的页面需要个性化的标题也很简单，**直接在该页面的目录下创建自己的xxx.json进行配置即可**，优先级自然就不用说了。第三个配置navigationBarTextStyle\*\*代表导航栏标题颜色**，默认白色（white），并且**仅支持白色和黑色（ black/white）\*\*这两种颜色，下面分别看一下这两种样式的效果图：  
![这里写图片描述][SouthEast 6]  
![这里写图片描述][SouthEast 7]

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

<table> 
 <thead> 
  <tr> 
   <th align="left">属性</th> 
   <th align="left">类型</th> 
   <th align="left">默认值</th> 
   <th align="left">描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">backgroundColor</td> 
   <td align="left">HexColor</td> 
   <td align="left">ffffff</td> 
   <td align="left">窗口的背景色</td> 
  </tr> 
  <tr> 
   <td align="left">backgroundTextStyle</td> 
   <td align="left">String</td> 
   <td align="left">dark</td> 
   <td align="left">下拉背景字体、loading 图的样式，仅支持 dark/light</td> 
  </tr> 
  <tr> 
   <td align="left">enablePullDownRefresh</td> 
   <td align="left">Boolean</td> 
   <td align="left">false</td> 
   <td align="left">是否开启下拉刷新</td> 
  </tr> 
  <tr> 
   <td align="left">onReachBottomDistance</td> 
   <td align="left">Number</td> 
   <td align="left">50</td> 
   <td align="left">页面上拉触底事件触发时距页面底部距离，单位为px</td> 
  </tr> 
 </tbody> 
</table>

--------------------

如上所示，首先来看backgroundColor——窗口的背景色，那窗口指的是哪里呢？看一下官方文档中的这张图：  
![这里写图片描述][SouthEast 8]  
如上图，background位于navigationBar和page之间，但是我们在模拟器中并不能看到，原因是它**需要下拉**才能显示这片区域，所以我们首先需要把上面4个配置项中的**enablePullDownRefresh属性设置为true来开启下拉刷新**。开启之后设置一个背景颜色（\#ffff00），然后在模拟器中来尝试一下下拉刷新动作：  
![这里写图片描述][SouthEast 9]  
如上图，这就是小程序自带的下拉刷新，我们可以清楚的看到background区域，接下来看一下**backgroundTextStyle**属性，默认为**light**且仅支持**light/dark**这两个属性值，默认的效果在上面的动图中已经看过了，那我们修改为dark再看一下下拉的样式：  
![这里写图片描述][SouthEast 10]  
如上图，很明显下拉刷新的loading样式发生了改变。下面接着看剩下的最后一个window配置项——**onReachBottomDistance**，官方文档的解释是：

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

如上所示，这个属性提到了**上拉触底（onReachBottom）**，这个操作类似于android中的**上拉加载**的概念，通常用于分页数据的加载，在此我们暂不做过多介绍，先了解有这么个东西就行，以后在实际应用中再做详细说明，到此为止关于app.json中的window的所有属性配置项就全部介绍完毕了，同时我们的第一个QuickStart项目的代码中最重要的4个文件（wxml、wxss、js、app.json）也算是全部介绍完毕了。

# 总结 #

本篇blog以QuickStart项目为例，整体介绍了微信小程序的**项目结构**以及4个最重要的文件类型，并适当与android开发做了比较，算是对小程序做了一个入门性的认识以及建立一个大体的概念模型，在后续的blog中会逐步深入去研究小程序的技术点，直到最终能写出一个漂亮完整的小程序！周末愉快，The End。

[SouthEast]: /images/20220603/88a6e6a29663472aaa120bcc72da08ad.png
[SouthEast 1]: /images/20220603/83179f72ef324c79aaa9fa0bb57d4072.png
[Link 1]: http://blog.csdn.net/wlwlwlwl015/article/details/51568460
[SouthEast 2]: /images/20220603/173a16418c564ce09a54de87048eb05e.png
[SouthEast 3]: /images/20220603/dbd0605decf54d16b05450cd01c9bdba.png
[SouthEast 4]: /images/20220603/474ae5a9817b4dfa8202204fd608ae45.png
[SouthEast 5]: /images/20220603/1333c6ffb59f428593f2a9a0dc380051.png
[SouthEast 6]: /images/20220603/a0fc4f4cf86a46d88c6935b7cc93d074.png
[SouthEast 7]: /images/20220603/35ce274a872a4e33b0c9e1ddec6676fe.png
[SouthEast 8]: /images/20220603/dac0851de4a44654bae2c6a0b3e4054a.png
[SouthEast 9]: /images/20220603/bf4d558923904c0eb740e908702771ab.png
[SouthEast 10]: /images/20220603/132c02d12f5f4e3da0133f50847d9122.png