初入小程式 | 文件使用 | 注意彙總 - 檢視篇

zyw5791557發表於2018-07-19

略略略

WXML

WXML（WeiXin Markup Language）是框架設計的一套標籤語言，結合基礎元件、事件系統，可以構建出頁面的結構。

資料繫結

使用方法：

Text

<view>{{ message }}</view>
複製程式碼
Page({
    data: {
        message: 'Hello World!'
    }
})
複製程式碼

Property

<view id="wx-{{ id }}">xixi</view>
複製程式碼
Page({
    data: {
        id: 9527
    }
})
複製程式碼

Keyword

<checkbox checked="{{ isChecked }}"></checkbox>
複製程式碼
Page({
    data: {
        isChecked: false
    }
})
複製程式碼

注意：

不允許直接寫 checked="false" 會變編譯為字串

運算

  • 三元運算子
  • 算術運算
  • 邏輯判斷

組合

<view wx:for="{{ [zero, 1, 2, 3, 4, 5] }}">{{ item }}</view>
複製程式碼
Page({
    data: {
        zero: 0
    }
})
複製程式碼

物件

運用解構賦值

<template is="objectCombine" data="{{ ...obj, c: 3 }}"></template>
複製程式碼
Page({
    data: {
        obj: {
            a: 1,
            b: 2
        }
    }
})
複製程式碼

注意：如果花括號和引號之間有空格，最終會被解析為字串

<view wx:for="{{ [1,2,3] }} "></view>
複製程式碼

解析成

<view wx:for="{{ [1,2,3] + '' }}"></view>
複製程式碼

列表渲染

<block 
    wx:for="{{ [1, 2, 3] }}" 
    wx:for-item="num" 
    wx:for-index="idx">
    <view>{{ num }}</view>
    <view>{{ num }}</view>
</block>
複製程式碼

注意：

  • block 製作邏輯控制，不做渲染
  • 預設的下標為 index, 當前項為 item

wx:key 的值以兩種形式提供

  • id, 直接寫 item 裡的key
  • *this, 解析 item 成唯一的 key

條件渲染

<block wx:if="{{ true }}">
  <view> view1 </view>
  <view> view2 </view>
</block>
複製程式碼

注意：

  • wx:if 更高的切換消耗
  • hidden 更高的初始消耗

頻繁切換的採用 hidden, 否則採用 wx:if

模板

<!--
  index: int
  msg: string
  time: string
-->
<template name="msgItem">
  <view>
    <text> {{index}}: {{msg}} </text>
    <text> Time: {{time}} </text>
  </view>
</template>
複製程式碼
<template is="msgItem" data="obj"></template>
複製程式碼
Page({
    data: {
        obj: {
            index: 1,
            msg: 'Hello World!',
            time: '2018-07-19'
        }
    }
})
複製程式碼

提醒：template is 可以使用 Mustache 寫法動態新增模板

事件

<view id="tapTest" bindtap="tapHandle">Click Me!</view>
複製程式碼
Page({
    tapHandle: function (event) {
        console.log(event)
    }
})
複製程式碼

提醒：

  • bindtap 和 bind:tap 一樣，1.5後支援
  • bindtap 和 catchtap 的區別在於，第一個冒泡，第二個阻止冒泡
  • 冒泡事件列表查閱

事件的捕獲階段

點選 inner view, 先後觸發 handleTap2， handleTap4， handleTap3 handleTap1

<view id="outer" bind:touchstart="handleTap1" capture-bind:touchstart="handleTap2">
  outer view
  <view id="inner" bind:touchstart="handleTap3" capture-bind:touchstart="handleTap4">
    inner view
  </view>
</view>
複製程式碼

點選 inner view, 只觸發 handleTap2

<view id="outer" bind:touchstart="handleTap1" capture-catch:touchstart="handleTap2">
  outer view
  <view id="inner" bind:touchstart="handleTap3" capture-bind:touchstart="handleTap4">
    inner view
  </view>
</view>
複製程式碼

提醒：capture-catch 中止了捕獲，取消了冒泡

事件物件

dataset

  • data-emlice-top => event.currentTarget.dataset.emliceTop (駝峰發)
  • data-emliceTop => eent.currentTarget.dataset.emlicetop(大寫轉小寫)

引用

提供 import 和 include 兩種引用

import

<!-- item.wxml -->
<template name="item">
    <text>{{ text }}</text>
</template>
複製程式碼
<!-- index.wxml -->
<import src="item.wxml" />
<template is="item" data="{{ text: 'Emlice' }}"></template>
複製程式碼

注意：import 具有作用域，即 C import B ，B import A，在 C 中只能使用 B 中定義的 template

include

include 可以將除了 的程式碼外全部拷貝進來

<!-- index.wxml -->
<include src="header.wxml"/>
<view> body </view>
<include src="footer.wxml"/>
複製程式碼
<!-- header.wxml -->
<view>header</view>
複製程式碼
<!-- footer.wxml -->
<view>footer</view>
複製程式碼

wxs

小程式的一套指令碼語言

模組

在 wxml 中採用 wxs 標籤形式引入,並使用單閉合標籤

  1. src 路徑必須為相對路徑，暫不支援絕對路徑，若 wxs 標籤中有值則該屬性設定無效
  2. module 屬性命名規則
  • 首字元必須是：字母（a-zA-Z），下劃線（_）
  • 剩餘字元可以是：字母（a-zA-Z），下劃線（_）， 數字（0-9）
<wxs src="../xxx.wxs" module="xxx" />
複製程式碼

在 wxs 中採用 require 形式引入

const common = require('../xxx.wxs')

console.log(common.foo)
複製程式碼

注意：wxs 只能在引入的 wxml 內被訪問到，在 import 和 include 是訪問不到的

變數

命名規則：

  • 首字元必須是：字母（a-zA-Z），下劃線（_）
  • 剩餘字元可以是：字母（a-zA-Z），下劃線（_）， 數字（0-9
  • 常見識別符號，關鍵字不能作為變數名

其他文件詳見

wxss

一套樣式語言

尺寸單位 - rpx

rpx（responsive pixel）:可以根據螢幕寬度進行自適應。規定螢幕寬為750rpx。如在 iPhone6 上，螢幕寬度為375px，共有750個物理畫素，則750rpx = 375px = 750物理畫素，1rpx = 0.5px = 1物理畫素。

裝置 rpx換算px (螢幕寬度/750) px換算rpx (750/螢幕寬度)
iphone5 1rpx = 0.42px 1px = 2.34rpx
iphone6 1rpx = 0.5px 1px = 2rpx
iphone6 plus 1rpx = 0.552px 1px = 1.81rpx

建議：以iphone6 做為視覺稿的標準 注意：在較小的螢幕上會出現一些毛刺，開發的注意

樣式引入

@import 引入外部樣式，用相對路徑，並以 ; 號結尾。

注意： 儘量少用甚至不用內聯樣式。

小程式樣式只支援的選擇器：

  • id
  • class
  • element
  • element，element
  • ::before / ::after

app.wxss 為全域性樣式，page.wxss 為區域性樣式，區域性樣式可以迭代全域性樣式

相關文章