微信小程序学习笔记(1)标签栏配置+js规范+数据绑定

前言

感觉微信小程序挺好玩的，而且很多知识和vue，css，js都是相通的，从今天起(2020年5月17日)，正式开始记录小程序的学习之路。

小程序设置标签栏的配置

这个对于开发的时候很重要，在开发之前一直纠结下图是怎么做到的。当学完之后，发现配置起来还是挺简单的。

下面开始介绍如何配置好上图的标签配置

在小程序的开发界面，有一个app.json配置文件，我们在配置文件里加上tabBar，就可以配置我们的标签栏了。如下代码，tabBar里面有一个list，里面的每一项代表每一个标签，当list里只有一个标签的时候，标签不会显示，当大于等于2的时候，才有显示，标签的最大数不能超过5。

  "tabBar": {
    "list": [
      {
      "pagePath": "pages/index/index", 
      "text": "首页", 
      "selectedColor": "#ffff"
    }, 
    {
      "pagePath": "pages/logs/logs",
      "text": "日志"
    }
    ]
  }

小程序的js规范

1. 小程序不是运行在浏览器中，所以没有dom和bom对象。
2. 小程序js有一些额外的成员。

• app方法，用于定义应用程序 中实例对象。
  

数据绑定

js的数据绑定和vue语法类似。
在js界面的page对象里的data定义一个person，如下:

// pages/databinding/databinding.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    person:{
      name:"小黑",
      age:18
    }

  },
  
})

然后我们在对应的wxml文件中使用小胡子语法{{}}就可以获取到数据了.

<text>{{person.age}}</text>

除此之外，使用小胡子语法还有一个好处，当我们做选择框的时候，在之前，checked=“false”，仍会被选中，因为checked中的内容是字符串，里面不为空就会被选中。如果使用小胡子语法，就能生效了，如下所示。

<checkbox checked="false" />
<!-- 状态没选中 -->
<checkbox checked="{{false}}" />

结尾语

嘴过知酒浓 爱过知情重，你不能做我的诗，正如我不能做你的梦，握不住的沙，就扬了它。