微信小程序複習鞏固 —— （wxml，wxss、js、wx:if、wx:for）

之前學了 vue2.5，並且做了一個模仿 去哪網界面，越是學的後面，越是發現 vue 的語法和微信小程序的語法是非常相似，這次把微信小程序基礎重新撿起來，畢竟從去年暑假學完小程序到現在過去了挺長時間的，這次基礎語法迅速過一遍，就開始做項目了，沖沖衝

一、學習記錄

1. view 標籤 和 text 標籤
2. 插值表達式的使用，js 後端數據傳值問題
3. wx:if 基本使用
4. wx:for 循環遍歷顯示數據
5. 小案例，九九乘法表
   

二、案例整理

2.1 view 標籤和 text 標籤簡單實用

1. 直接在 wxml 文件中編寫 code

wxml

<view>Hello World</view> <!-- 會默認換行 -->
<text>Hello World</text> <!-- 默認不會換行 -->

這一塊官方文檔記錄的非常詳細：傳送門

2.2 插值表達式簡單使用

更多插值表達式的應用

1. 簡單的傳值，使用插值表達式動態改變數據
   js

// pages/index/index.js
Page({

  /**
   * 頁面的初始數據
   */
  data: {
      info: "大家好，我是第一個界面",
      isShow:false,
      list: ["aaaa","bbbb","cccc"],
      person: {
        name:"Gorit",
        age:18
      },
      arr : [1,2,3,4,5,6,7,8,9],
      a:1,
      b:2,
      c:3,
  }


})

wxml：
靜態數據的渲染

<!-- 靜態數據 -->
<view>{{info}}</view>

<!-- 插值表達式顯示對象中的數據 -->
<view>{{person.name}}</view>
<view>{{person.age}}</view>

<!-- 顯示數組中元素 -->
<view>{{list}}</view>
<view>{{list[0]}}</view>

<!-- 屬性展示 eg 使用括號引用起來，可以表達真假，但是如果不用括號引用起來，我們輸入任何非空字符串都會判定爲真 -->
  <swiper vertical="{{false}}" indicator-dots="true" autoplay="true" interval="3000" duration="500" circular="{{true}}">
    <swiper-item>
      1
    </swiper-item>
	...
  </swiper>

<!-- 可以直接運算得到結果 -->
<view>{{a + b + c}}</view>

<!-- 插值可以插入字符串？ -->
<view>{{"Hello " +a + b + c}}</view>

2. js 修改數據

在 js 中，在 onLoad 方法中加上 this.setData({ }) ，通過對象的形式傳數據到前端，很重要！！！

 onLoad: function (options) {

    // js 數據傳值到前端
    this.setData({
      info:"數據改變了"
    })
  },

2.3 wx:if 條件渲染 (類比 vue 中的 v-if v-show)

1. 單度的標籤判斷
   wxml

<view wx:if="{{isShow}}">{{info}}</view>
<view wx:else>else 顯示出來了</view>

多個標籤的判斷要如何處理呢？

2. 使用 block 標籤，一次性可以綁定多個標籤

<block wx:if = "{{true}}">
	<view>xxxx</view>
	<view>xxxx</view>
</block>

2.4 wx:for 循環迭代

1. 單個標籤的循環
   wxml

我們通過 循環 list，通過 item 的到其值，index 得到下標

<!-- 默認方式顯示數據和下標 -->
<text>使用 wx:for 循環數據</text>
<view wx:for="{{list}}" wx:key="{{index}}">{{item}},{{index}}</view>
<!-- 給數據內容和下標改一個別名，避免重名 -->
<text>別名 數據渲染</text>
<view wx:for="{{list}}" wx:key="{{index}}" wx:for-item="value" wx:for-index="idx">{{value}},{{idx}}</view>

2. 循環多個標籤，使用 block 即可，使用方式同 wx:if

2.5 綜合小練習：九九乘法表

wxml

wx:if wx:for 結合使用

<text>九九乘法表顯示</text>
<view class="row" wx:for="{{arr}}" wx:for-item="x" wx:key="index">
  <view class="col" wx:for="{{arr}}" wx:for-item="y" wx:key="index">
    <view wx:if="{{x >= y}}">{{y}}x{{x}}={{x*y}}  </view>
  </view>
</view>

wxss

小程序比較特殊，需要我們指定樣式，來保證樣式的正常

.row {
    display: flex;
    flex-wrap: nowrap;
}

.col {
    display: flex;
    flex-wrap: nowrap;
}

三、總結

3.1 完整代碼

index.wxml

<!--pages/index/index.wxml-->
<text>小程序基礎的學習（一）2020年2月17日21:13:51</text>
<view class="header">微信小程序基礎學習</view>

<text>使用插值表達式</text>
<view>{{info}}</view>
<view></view>

<!-- 插值表達式顯示對象中的數據 -->
<view>{{person.name}}</view>
<view>{{person.age}}</view>

<view>if 判斷</view>
<view wx:if="{{isShow}}">{{info}}</view>
<view wx:else>else 顯示出來了</view>

<text>顯示數組中的元素</text>
<!-- 顯示數組中元素 -->
<view>{{list}}</view>
<view>{{list[0]}}</view>

<text>使用 wx:for 循環數據</text>
<view wx:for="{{list}}" wx:key="{{index}}">{{item}},{{index}}</view>
<text>別名 數據渲染</text>
<view wx:for="{{list}}" wx:key="{{index}}" wx:for-item="value" wx:for-index="idx">{{value}},{{idx}}</view>


<text>九九乘法表顯示</text>
<view class="row" wx:for="{{arr}}" wx:for-item="x" wx:key="index">
  <view class="col" wx:for="{{arr}}" wx:for-item="y" wx:key="index">
    <view wx:if="{{x >= y}}">{{y}}x{{x}}={{x*y}}  </view>
  </view>
</view>

index.js

// pages/index/index.js
Page({

  /**
   * 頁面的初始數據
   */
  data: {
      info: "大家好，我是第一個界面",
      isShow:false,
      list: ["aaaa","bbbb","cccc"],
      person: {
        name:"Gorit",
        age:18
      },
      arr : [1,2,3,4,5,6,7,8,9]
  },

  /**
   * 生命週期函數--監聽頁面加載
   */
  onLoad: function (options) {

    // js 數據傳值到前端
    this.setData({
      info:"數據改變了"
    })
  }
})

index.wxss

.header {
  text-align: center
}
.row {
    display: flex;
    flex-wrap: nowrap;
}

.col {
    display: flex;
    flex-wrap: nowrap;
}