《微信小程序-基础篇》带你快速了解小程序的基础语法

大家好，这是小程序系列的第二篇文章，上一篇地址在这里《微信小程序-基础篇》初识微信小程序
这一篇文章主要的目的是期望能使小伙伴了解一些微信里面的基础语法，如果小伙伴了解过Vue，那么会发现其语法与Vue的语法非常之接近～
介绍完基础以后会实际同步开发一个微信小程序的项目并开源，项目的主题暂定是原神的资料站，最后，求关注，求收藏，求点赞，谢谢～

前言

在本章节，依旧是 基础知识章节，可能有点枯燥，本文的知识点是在小程序中真实常用的一些基本语法，如果你是一位了解过前端MVVM框架的开发者，那么会发现其实小程序的写法与之非常相似，学习成本相对较低，相对简单过一下就完全可以了解其使用方式；
到了现代的前端开发领域，其实几乎都有的框架都已是 数据驱动的模式（数据变动时视图跟着变动）小程序自然也不例外，下面就一起看一下小程序的基本语法吧！
耐心看完，你一定有所收获～

阅读对象与难度

本文难度属于：初级，通过本文，你可以了解到小程序的基本语法，以及在实际页面中如何使用这些基本语法，最后尝试编写一个简单Button并尝试将这个一个简单Button组件化；

页面

在学习基本语法之前，我们再确认一下，小程序的页面组成，小程序的每一个页面都包含4种文件，分别是：

1. .wxml文件：内容文件，相当于HTML文件，这是页面的骨架，用来描述页面的内容；
2. .wxss文件：样式文件，如果是安装了CSS预处理器，那么就是.scss或者less等文件，其作用就是给.wxml文件中的骨架添加样式，使其展现内容更美观，更生动；
3. .js文件：逻辑文件，如果安装了ts那么就是.ts文件，该文件的作用是为当前页面添加逻辑事件，比如登录功能，我们需要为登录按钮添加点击事件，点击后触发接口校验输入的用户名密码等内容；
4. .json文件：配置文件，该文件是微信官方预留给开发者用于对小程序本身的一些修改，比如页面标题，比如标题栏的背景色等等，这些小程序本身的功能并不支持开发者去自定义开发（当然也不是绝对的）
   

这四种文件组成了一个页面，他们之间不需要相互引用之类的操作，编辑器可以自动的将这四个文件给关联起来，换个说法，我们可以将一个事件或者变量写在.ts/.js文件里，在.wxml文件中直接调用这个事件或变量；

基本语法

数据绑定

单向绑定

什么是数据的单向绑定，简单的说就是在页面上写入一个变量，显示的内容完全取决于这个变量当前的值，值是多少，就显示多少；
写先看一个最简单的数据绑定

<!--pages/welcome.wxml-->
<text>{
   
   {text}}</text>

// pages/welcome.ts
Page({
    
    
  
  /**
  * 页面的初始数据
  */
  data: {
    
    
    text:"这里是一段文本"
  },
})

对应的效果图：

数据绑定的核心在于一个双花括号，这种语法叫做：mustache语法，如果你了解过Vue，那么会发现两者的用法几乎雷同，简单的说，就是定义在data对象里面的key所对于的值会被直接展示界面上，而且，这种展示是实时的，展示的内容完全取决于text的值是多少;
到这里，可能有小伙伴会问，那如果通过事件改变text的值，那其新值是不是会立刻展现在视图上，答案是肯定的，但是这里和Vue的用法不一样，和react类似，它不能直接改变data中的值，它需要通过一个特定的函数实现，如下：
假设现在我们给这段文本绑定了一个点击事件，点击都当前文本的内容替换为“这是一段修改后的文本”

<!--pages/welcome.wxml-->
<text bindtap="handleClick">{
   
   {text}}</text>

// pages/welcome.ts
Page({
    
    
  /**
  * 页面的初始数据
  */
  data: {
    
    
    text:"这里是一段文本"
  },
  handleClick(){
    
    
    // 不生效，即使修改了，视图上的显示依然是：这里是一段文本
    this.data.text="这是一段修改后的文本"
    
    // 生效，修改后视图上的显示：这是一段修改后的文本
    this.setData({
    
    
      text:"这是一段修改后的文本"
    })
  }
})

通过例子我们可以知道，如果想动态的，实时的修改其值，必须使用一个特殊的函数，这个函数叫做：setData，它有小程序官方提供，通过它，我们可以实时的对数据进行修改与展示，具体其API这里就不多做介绍，可以参考官网的示例说明，地址在这里：Page.prototype.setData(Object data, Function callback)，它有好几种用法，用的最常见的就是上面例子中这种；

小结

这一小结，我们知道小程序中的数据绑定使用的是和Vue一样的 mustache语法，和Vue不同的是，它必须通过 setData 这个方法才可以是使得数据更新并实时渲染到界面上去；

双向绑定

很多时候界面上的内容不仅仅是展示，也存在非常多需要用户输入的操作，比如用户的登录操作，这里面就涉及到了需要用户输入用户名和密码，此时就不仅仅是单向数据绑定了，而是双向数据绑定，什么意思呢，以一个实际场景为例：
用户在输入密码的后，我们需要获到取用户的输入值，但是当登录失败时，我们需要主动将密码输入框的值清空；
当密码错误时，我们能通过修改text的值主动清空input中的显示值，而输入输入时，其input中的值会被实时记录在text上，这种就是双向绑定；
先看个例子吧

<!--pages/welcome.wxml-->
<text bindtap="handleClick">{
   
   {text}}</text>
<input model:value="{
     
     {text}}"/>

// pages/welcome.ts
Page({
  /**
   * 页面的初始数据
   */
  data: {
    text:"这里是一段文本"
  },
  handleClick(){
    console.log(this.data.text)
  },
})

这里有一个关键词，model:value，通过这个简单的语法就可以实现双向绑定，放到上面的例子里就是，在wxml中有两个元素，一个文本元素，一个输入框元素，绑定的值都是text， 当修改input中的值的时候，text中的值会被同步修改；

小结

简易双向绑定的关键词就是 model:value，通过它就可以实现双向数据绑定；

列表渲染

首先得明白说明是列表渲染，简单的说，就是将一段包括了HTML，CSS，JS的代码进行循环，循环生成这段代码，举个简单的例子，歌单列表，我们知道歌单列表中的每一首歌都会有几部分组成，包括：歌名，时长，歌手等等组成，假如此时歌单中有100首歌，我们该怎么办？很明显我们不可能写100个，况且歌单长度也是不确定的，有可能只有1个，有可能有100个，那么此时，就用到了列表循环；
先看一个简单的例子吧

<!--pages/welcome.wxml-->

<view wx:for="{
     
     {users}}" wx:for-item="user">{
   
   {user.name}}-{
   
   {user.age}}</view>

// pages/welcome.ts
Page({
  /**
   * 页面的初始数据
   */
  data: {
    text:"这里是一段文本",
    users:[
      {
        name:"oliver",
        age:20
      },
      {
        name:"刻晴",
        age:20
      },
      {
        name:"甘雨",
        age:20
      }
    ]
  },
})

对应的效果图

明白了不，核心的关键词只有一个：wx:for，双花括号的变量对应一个数组，wx:for这个关键词正如所其描述，确实其作用有点像是在做for循环操作，区别在于js的for循环实在循环代码，而这里的for循环是在循环一段包含了HTML在内的代码；

小结

列表循环的关键词在于：wx:for，它能像for循环一样循环包括HTML在内的一段代码，能极大的提高像列表式的生成效率；

条件渲染

条件渲染，在实际开发中针对 视图可以进行选择性判断是否渲染，比如，列表中只过滤显示女性角色，所有的男性角色都不再渲染在视图上，如果是这种场景，那么就会用到条件渲染，条件渲染的关键词是wx:for，它的关键词和用法和列表渲染的关键词wx:for相似，wx:if以及其关联的关键词 wx:elif，wx:else，直接看个例子吧

<!--pages/welcome.wxml-->

<block wx:for="{
     
     {users}}" wx:for-item="user">
  <view wx:if="{
     
     {user.sex==='女'}}">{
   
   {user.name}}-{
   
   {user.age}}</view>
</block>

// pages/welcome.ts
Page({
  /**
   * 页面的初始数据
   */
  data: {
    text:"这里是一段文本",
    users:[
      {
        name:"oliver",
        age:20,
        sex:"男"
      },
      {
        name:"刻晴",
        age:20,
        sex:"女"
      },
      {
        name:"甘雨",
        age:20,
        sex:"女"
      }
    ]
  }
})

大家猜一猜，上面这段代码会显示什么，结果就是：oliver这条数据没有被渲染，列表中显示的只有两条数据，一条是刻晴，一条是甘雨，如下图所示

通过例子应该能明白wx:if的用啊了吧，简单的说就是 双花括号内的值如果为true，那么这个视图才会被渲染，否则就会被跳过；

小结

条件渲染的关键词为wx:if以及其紧跟着的wx:elif，wx:else，它的用法如同JavaScript中的if…else if…else，它可以根据其对应的值来判断这段HTML代码是否需要渲染；

写一个Button

了解完基础语法后，接着我们尝试写一个最简单的Button按钮，这个按钮没有事件，只有如何写样式，大致目标效果如下：

学习小程序相信小伙伴肯定对前端的基础HTML,CSS有所了解，如果有一定的基础，那么我们大致知道这肯定是一个类似于button的标签，加上一定的样式组合而成；

没错，在小程序中官方提供了一整套的组件，虽然不一定好用，但是确实覆盖了日常开发中绝大多数的场景，当然到了现代，三方的UI组件库必定不会少，甚至样式的精致程度，功能远远好于官方提供的组件，我们这里先不讨论三方组件；

回到这个例子，在官网的示例中有官方提供的组件说明，地址如下：微信小程序官方组件库，其中有一个表单组件，下面有一个button组件

通过阅读这个组件内容可知，我们只需要直接使用button组件就可以了，代码如下

<!--pages/welcome.wxml-->

<view class="btn-group">
  <button type="primary" >登录</button>
</view>

但是直接写了之后发现样式不对，显示的结果没有如示例图中所示，那么此时就需要加上class了，如下

<!--pages/welcome.wxml-->

<view class="btn-group">
  <button class="login-btn" type="primary" >登录</button>
</view>

/* pages/welcome.wxss */
.btn-group{
  width: 100%;
  padding: 10px 20px;
  box-sizing: border-box;

  .login-btn{
    width: 100%;
  }
}

当写完样式，那么结果就会如图展示的内容；

思考题

看完上面的Button是不是觉得组件还是非常简单的，但实际上我们项目中很少会直接这么使用，原因很简单，我们的小程序都是经过设计的，小程序的按钮样式都是统一的，如果说，我们现在设计师设计了一个 全新样式的button组件，并且这个组件在所有页面都适用，那身为开发者怎么办，难道每次都在新的页面加一个class，然后给button修改样式吗，很明显不现实，所以这时候必然会涉及到一个自定义组件的过程；

自定义组件简单的说，就是有我们开发者 自己开发了一个组件，然后将其在小程序全局复用，官方的button按钮某种程度上讲也是一个自定义组件，它内置了大量的样式，事件，动画等等效果；
因此，在最后留下一个思考题，如何来实现一个自定义的button组件？

总结

本文开始的时候回顾了一下小程序的页面组成，之后了解了在小程序中的几个基本语法：数据绑定（包括单向绑定，双向绑定），列表渲染，条件渲染，之后正式在页面中写下了第一个组件button，最后我们了解到，实际项目中可能并不会如示例中那种，直接使用官方提供的button，可能需要自己写一个自定义组件button供全局统一样式和功能；