微信小程序學習筆記(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}}" />

結尾語

嘴過知酒濃 愛過知情重，你不能做我的詩，正如我不能做你的夢，握不住的沙，就揚了它。