微信小程式 基礎語法

.wxml檔案中

列表渲染

<view wx:for="{{array}}">{{item}}</view>

如果沒有寫wx:key,這會報警告Now you can provide attr “wx:key” for a “wx:for” to improve performance.
- wx:key 的值以兩種形式提供 ：

1. 字串，代表在 for 迴圈的 array 中 item 的某個 property，該 property 的值需要是列表中唯一的字串或數字，且不能動態改變。
2. 保留關鍵字 *this 代表在 for 迴圈中的 item 本身，這種表示需要 item 本身是一個唯一的字串或者數字，如：當資料改變觸發渲染層重新渲染的時候，會校正帶有 key 的元件，框架會確保他們被重新排序，而不是重新建立，以確保使元件保持自身的狀態，並且提高列表渲染時的效率。
   如不提供 wx:key
   ，會報一個 warning， 如果明確知道該列表是靜態，或者不必關注其順序，可以選擇忽略。

注意區分：

1. 在元件上使用wx:for控制屬性繫結一個數組，即可使用陣列中各項的資料重複渲染該元件。wx:for和wx:for-items作用一樣
2. 預設陣列的當前的下標變數名預設為index，陣列當前項的變數名預設為item。
3. 使用wx:for-item 可以指定陣列當前元素的變數名。起別名，預設是 item。使用wx:for-index 可以指定陣列當前下標的變數名
4. wx:key 如果列表中專案的位置會動態改變或有新的專案新增到列表中，並且希望列表中的專案保持自己的特徵和狀態（如 中的輸入內容， 的選中狀態），需要使用 wx:key 來指定列表中專案的唯一的識別符號。

條件渲染

<view wx:if="{{logged}}">登入</view>
<view wx:else>未登入</view>

這裡需要注意一下：如果好幾個判斷中間是 elif
wx:if,wx:elif,wx:else

模板渲染

1. 定義模板
   使用 template 標籤進行定義一個標籤<template></template>。
   使用 name 屬性，作為模板的名字。
2. 使用模板
   使用 is 屬性，宣告需要的使用的模板,值是定義模板的name 屬性值。
   使用 data屬性，將資料傳入模板

<template name="staffName">
  <view>
    FirstName: {{firstName}}, LastName: {{lastName}}
  </view>
</template>
<template is="staffName" data="{{...staffA}}"></template>
<template is="staffName" data="{{...staffB}}"></template>
<template is="staffName" data="{{...staffC}}"></template>

例子2

<template name="odd"  data="{{item}}">
  <view>{{item}} is odd </view>
</template>
<template name="even" data="{{item}}">
  <view>{{item}} is even </view>
</template>

<block wx:for="{{[1, 2, 3, 4, 5]}}" wx:for-item="item">
    <template is="{{item % 2 == 0 ? 'even' : 'odd'}}" data="{{item}}"/>
</block>

事件-這裡以點選事件為例

<view bindtap="push">跳轉頁面</view>

.js 檔案中

Page({
    data: {
        logged: false,
        message:'Hello Mina!',
        array:[1,2,3,4,5,6],
        staffA: { firstName: 'Hulk', lastName: 'Hu' },
        staffB: { firstName: 'Shang', lastName: 'You' },
        staffC: { firstName: 'Gideon', lastName: 'Lin' }
    },
push:function(){
wx.navigateTo({
  url: '../userInfo/userInfo',
})
}

引用：import和include引用方式

如果要在index.wxml 裡面要引用 demo.wxml 中定義的模板，則需要引入 demo.wxml檔案

<import src="demo.wxml"/>

這裡需要注意的是import的作用域：只會import目標檔案中定義的template，而不會import目標檔案import的template。和 iOS 中的 import 不一樣，不能繼承。

include
include可以將目標檔案除了的整個程式碼引入，相當於是拷貝到include位置

倒計時

以倒計時天數為例：
首先在 js 檔案的 data 中定義
data: {
time_high: ‘2018-06-06’
}
倒計時方法

// 倒計時
    count_down: function () {
        var that = this;
        setInterval(function () {
            var curDate = util.formatTime(new Date);
            console.log("curDate-----------", curDate);
            var time_high = util.formatTime(new Date(that.data.time_high));
            console.log(time_high);
            //  兩個時間相差的秒數
            var seconds = (Date.parse(time_high) - Date.parse(curDate)) / 1000;
            var days = seconds / (3600 * 24);

            var hours = parseInt((seconds - parseInt(days) * 3600 * 24) / 3600);

            var minutes = parseInt((seconds - parseInt(days) * 3600 * 24 - parseInt(hours) * 3600) / 60);

            var secs = parseInt((seconds - parseInt(days) * 3600 * 24 - parseInt(hours) * 3600 - parseInt(minutes) * 60))
            console.log("secs:", secs);

            if (hours.toString().length <= 1) {
                hours = '0' + hours;
            }
            if (minutes.toString().length <= 1) {
                minutes = '0' + minutes;
            }
            if (secs.toString().length <= 1) {
                secs = '0' + seconds;
            }

            var timeString = hours + '小時' + minutes + '分' + secs + '秒'

            days = parseInt(days);
            that.setData({
                days: days,
                timeString: timeString
            });
        }.bind(this), 1000);
    },

模組

.wxs檔案或者<wxs>

元件