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

前言

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

代码构成

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

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

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

1. wxml

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

<!--wxml-->
<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"> 获取头像昵称