當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

微信小程序学习记录——4.框架-视图层

發布時間：2024/3/13 编程问答 43 豆豆

生活随笔收集整理的這篇文章主要介紹了微信小程序学习记录——4.框架-视图层小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

文章目錄

1.WXML
- - 數據綁定
  - - 簡單綁定
    - 運算
    - 組合
  - 列表渲染
  - - wx:for
    - block wx:for
    - wx:key
  - 條件渲染
  - - wx:if
    - block wx:if
    - wx:if vs hidden
  - 模板
  - - 定義模板
    - 使用模板
    - 模板的作用域
  - 引用
  - - import
    - - import 的作用域
    - include
  - 事件
  - - 什么是事件
    - 事件的使用方式
    - 事件分類
    - 事件綁定和冒泡
    - 事件的捕獲階段
    - 事件對象
    - - timeStamp
      - target
      - currentTarget
      - dataset
      - touches
      - Touch 對象
      - CanvasTouch 對象
      - changedTouches
      - detail
2.WSX
- 頁面渲染
- 數據處理
- 模塊
- .wxs 文件
- - module 對象
  - require函數
- \ 標簽
- - module 屬性
  - src 屬性
  - 注意
- 變量
- - 概念
  - 變量名
  - 保留標識符
- 注釋
- 運算符
- - 基本運算符
  - 一元運算符
  - 位運算符
  - 比較運算符
  - 等值運算符
  - 賦值運算符
  - 二元邏輯運算符
  - 其他運算符
  - 運算符優先級
- if語句
- switch 語句
- for 語句
- while 語句
- 數據類型
- - number
  - string
  - boolean
  - object
  - function
  - arguments
  - array
  - date
  - regexp
- 數據類型判斷
- - constructor 屬性
  - typeof
- 基礎類庫
- - console
  - Math
  - JSON
  - Number
  - Date
  - Global
3.WXSS
- - 尺寸單位
  - 樣式導入
  - 內聯樣式
  - 選擇器
  - 全局樣式與局部樣式

1.WXML

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

用以下一些簡單的例子來看看 WXML 具有什么能力：

數據綁定

<view> {{message}} </view> // page.js Page({data: {message: 'Hello MINA!'} })

簡單綁定

WXML 中的動態數據均來自對應 Page 的 data。

數據綁定使用 Mustache 語法（雙大括號）將變量包起來，可以作用于：

內容

<view> {{ message }} </view> Page({data: {message: 'Hello abc!'} })

組件屬性(需要在雙引號之內)

<view id="item-{{id}}"> </view> Page({data: {id: 0} })

控制屬性(需要在雙引號之內)

<view wx:if="{{condition}}"> </view> Page({data: {condition: true} })

關鍵字(需要在雙引號之內)

true：boolean 類型的 true，代表真值。
false： boolean 類型的 false，代表假值。

特別注意：不要直接寫 checked="false"，其計算結果是一個字符串，轉成 boolean 類型后代表真值。

運算

可以在 {{}} 內進行簡單的運算，支持的有如下幾種方式：

三元運算

<view hidden="{{flag ? true : false}}"> Hidden </view>

算數運算

<view> {{a + b}} + {{c}} + d </view> Page({data: {a: 1,b: 2,c: 3} })

view中的內容為 3 + 3 + d。

邏輯判斷

字符串運算

<view>{{"hello" + name}}</view> Page({data:{name: 'abc'} })

數據路徑運算

<view>{{object.key}} {{array[0]}}</view> Page({data: {object: {key: 'Hello '},array: ['abc']} })

組合

也可以在 Mustache內直接進行組合，構成新的對象或者數組。

數組

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

最終組合成數組[0, 1, 2, 3, 4]。

對象

<template is="objectCombine" data="{{for: a, bar: b}}"></template> Page({data: {a: 1,b: 2} })

最終組合成的對象是 {for: 1, bar: 2}

也可以用擴展運算符 … 來將一個對象展開

<template is="objectCombine" data="{{...obj1, ...obj2, e: 5}}"></template> Page({data: {obj1: {a: 1,b: 2},obj2: {c: 3,d: 4}} })

最終組合成的對象是 {a: 1, b: 2, c: 3, d: 4, e: 5}。

如果對象的 key 和 value 相同，也可以間接地表達。

<template is="objectCombine" data="{{foo, bar}}"></template> Page({data: {foo: 'my-foo',bar: 'my-bar'} })

最終組合成的對象是 {foo: 'my-foo', bar:'my-bar'}。

**注意：**上述方式可以隨意組合，但是如有存在變量名相同的情況，后邊的會覆蓋前面，如：

<template is="objectCombine" data="{{...obj1, ...obj2, a, c: 6}}"></template> Page({data: {obj1: {a: 1,b: 2},obj2: {b: 3,c: 4},a: 5} })

最終組合成的對象是 {a: 5, b: 3, c: 6}。

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

等同于

列表渲染

<view wx:for="{{array}}"> {{item}} </view> // page.js Page({data: {array: [1, 2, 3, 4, 5]} })

wx:for

在組件上使用 wx:for 控制屬性綁定一個數組，即可使用數組中各項的數據重復渲染該組件。

默認數組的當前項的下標變量名默認為 index，數組當前項的變量名默認為 item

<view wx:for="{{array}}">{{index}}: {{item.message}} </view> Page({data: {array: [{message: 'w3c',}, {message: 'School'}]} })

使用 wx:for-item 可以指定數組當前元素的變量名，

使用 wx:for-index 可以指定數組當前下標的變量名：

<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName">{{idx}}: {{itemName.message}} </view>

wx:for 也可以嵌套，下邊是一個九九乘法表

block wx:for

類似 block wx:if，也可以將 wx:for 用在``標簽上，以渲染一個包含多節點的結構塊。例如：

<block wx:for="{{[1, 2, 3]}}"><view> {{index}}: </view><view> {{item}} </view> </block>

wx:key

如果列表中項目的位置會動態改變或者有新的項目添加到列表中，并且希望列表中的項目保持自己的特征和狀態（如中的輸入內容，的選中狀態），需要使用 wx:key 來指定列表中項目的唯一的標識符。

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

字符串，代表在 for 循環的 array 中 item 的某個 property，該 property 的值需要是列表中唯一的字符串或數字，且不能動態改變。

保留關鍵字 *this 代表在 for 循環中的 item 本身，這種表示需要 item 本身是一個唯一的字符串或者數字，如：

當數據改變觸發渲染層重新渲染的時候，會校正帶有 key 的組件，框架會確保他們被重新排序，而不是重新創建，以確保使組件保持自身的狀態，并且提高列表渲染時的效率。

如不提供 wx:key，會報一個 warning，如果明確知道該列表是靜態，或者不必關注其順序，可以選擇忽略。

**注意：**當 wx:for 的值為字符串時，會將字符串解析成字符串數組

等同于

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

等同于

條件渲染

<view wx:if="{{view == 'WEBVIEW'}}"> WEBVIEW </view> <view wx:elif="{{view == 'APP'}}"> APP </view> <view wx:else="{{view == 'MINA'}}"> MINA </view> // page.js Page({data: {view: 'MINA'} })

wx:if

在框架中，使用 wx:if="{{condition}}" 來判斷是否需要渲染該代碼塊：

也可以用 wx:elif 和 wx:else 來添加一個 else 塊：

block wx:if

因為 wx:if 是一個控制屬性，需要將它添加到一個標簽上。如果要一次性判斷多個組件標簽，可以使用一個 `` 標簽將多個組件包裝起來，并在上邊使用 wx:if 控制屬性。

注意： `` 并不是一個組件，它僅僅是一個包裝元素，不會在頁面中做任何渲染，只接受控制屬性。

wx:if vs hidden

因為 wx:if 之中的模板也可能包含數據綁定，所有當 wx:if 的條件值切換時，框架有一個局部渲染的過程，因為它會確保條件塊在切換時銷毀或重新渲染。

同時 wx:if 也是惰性的，如果在初始渲染條件為 false，框架什么也不做，在條件第一次變成真的時候才開始局部渲染。

相比之下，hidden 就簡單的多，組件始終會被渲染，只是簡單的控制顯示與隱藏。

一般來說，wx:if 有更高的切換消耗而 hidden 有更高的初始渲染消耗。因此，如果需要頻繁切換的情景下，用 hidden 更好，如果在運行時條件不大可能改變則 wx:if 較好。

模板

<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> // page.js Page({data: {staffA: {firstName: 'Hulk', lastName: 'Hu'},staffB: {firstName: 'Shang', lastName: 'You'},staffC: {firstName: 'Gideon', lastName: 'Lin'}} })

WXML提供模板（template），可以在模板中定義代碼片段，然后在不同的地方調用。

定義模板

使用 name 屬性，作為模板的名字。然后在內定義代碼片段，如：

<template name="msgItem"><view><text> {{index}}: {{msg}} </text><text> Time: {{time}} </text></view> </template>

使用模板

使用 is 屬性，聲明需要的使用的模板，然后將模板所需要的 data 傳入，如：

<template is="msgItem" data="{{...item}}"/> Page({data: {item: {index: 0,msg: 'this is a template',time: '2016-09-15'}} })

is 屬性可以使用 Mustache 語法，來動態決定具體需要渲染哪個模板：

模板的作用域

模板擁有自己的作用域，只能使用 data 傳入的數據以及模版定義文件中定義的模塊。

引用

WXML 提供兩種文件引用方式import和include。

import

import可以在該文件中使用目標文件定義的template，如：

在 item.wxml 中定義了一個叫item的template：

<template name="item"><text>{{text}}</text> </template>

在 index.wxml 中引用了 item.wxml，就可以使用item模板：

import 的作用域

import 有作用域的概念，即只會 import 目標文件中定義的 template，而不會 import 目標文件 import 的 template。

如：C import B，B import A，在C中可以使用B定義的template，在B中可以使用A定義的template，但是C不能使用A定義的template。

<template name="A"><text> A template </text> </template>  <import src="a.wxml"/> <template name="B"><text> B template </text> </template>  <import src="b.wxml"/> <template is="A"/>  <template is="B"/>

include

include 可以將目標文件除了外的整個代碼引入，相當于是拷貝到 include 位置，如：

<include src="header.wxml"/> <view> body </view> <include src="footer.wxml"/>  <view> header </view>  <view> footer </view>

事件

<view bindtap="add"> {{count}} </view> Page({data: {count: 1},add: function(e) {this.setData({count: this.data.count + 1})} })

什么是事件

事件是視圖層到邏輯層的通訊方式。
事件可以將用戶的行為反饋到邏輯層進行處理。
事件可以綁定在組件上，當達到觸發事件，就會執行邏輯層中對應的事件處理函數。
事件對象可以攜帶額外信息，如 id, dataset, touches。

事件的使用方式

在組件中綁定一個事件處理函數。

如bindtap，當用戶點擊該組件的時候會在該頁面對應的Page中找到相應的事件處理函數。

<view id="tapTest" data-hi="WeChat" bindtap="tapName"> Click me! </view>

在相應的Page定義中寫上相應的事件處理函數，參數是event。

Page({tapName: function(event) {console.log(event)} })

可以看到log出來的信息大致如下：

{ "type":"tap", "timeStamp":895, "target": {"id": "tapTest","dataset": {"hi":"WeChat"} }, "currentTarget": {"id": "tapTest","dataset": {"hi":"WeChat"} }, "detail": {"x":53,"y":14 }, "touches":[{"identifier":0,"pageX":53,"pageY":14,"clientX":53,"clientY":14 }], "changedTouches":[{"identifier":0,"pageX":53,"pageY":14,"clientX":53,"clientY":14 }] }

事件分類

事件分為冒泡事件和非冒泡事件：

冒泡事件：當一個組件上的事件被觸發后，該事件會向父節點傳遞。

非冒泡事件：當一個組件上的事件被觸發后，該事件不會向父節點傳遞。

WXML的冒泡事件列表：

類型觸發條件

touchstart	手指觸摸動作開始
touchmove	手指觸摸后移動
touchcancel	手指觸摸動作被打斷，如來電提醒，彈窗
touchend	手指觸摸動作結束
tap	手指觸摸后馬上離開
longpress	手指觸摸后，超過350ms再離開，如果指定了事件回調函數并觸發了這個事件，tap事件將不被觸發(基礎庫 1.5.0 開始支持，低版本需做兼容處理。)
longtap	手指觸摸后，超過350ms再離開（推薦使用longpress事件代替）
transitionend	會在 WXSS transition 或 wx.createAnimation 動畫結束后觸發
animationstart	會在一個 WXSS animation 動畫開始時觸發
animationiteration	會在一個 WXSS animation 一次迭代結束時觸發
animationend	會在一個 WXSS animation 動畫完成時觸發

注：除上表之外的其他組件自定義事件如無特殊聲明都是非冒泡事件，如](https://mp.weixin.qq.com/debug/wxadoc/dev/component/form.html)的`submit`事件，[的input事件，``的scroll事件。

事件綁定和冒泡

事件綁定的寫法同組件的屬性，以 key、value 的形式。

key 以bind或catch開頭，然后跟上事件的類型，如bindtap、catchtouchstart。自基礎庫版本 1.5.0 起，bind和catch后可以緊跟一個冒號，其含義不變，如bind:tap、、catch:touchstart。
value 是一個字符串，需要在對應的 Page 中定義同名的函數。不然當觸發事件的時候會報錯。

bind事件綁定不會阻止冒泡事件向上冒泡，catch事件綁定可以阻止冒泡事件向上冒泡。

如在下邊這個例子中，點擊 inner view 會先后調用handleTap3和handleTap2(因為tap事件會冒泡到 middle view，而 middle view 阻止了 tap 事件冒泡，不再向父節點傳遞)，點擊 middle view 會觸發handleTap2，點擊 outer view 會觸發handleTap1。

<view id="outer" bindtap="handleTap1">outer view<view id="middle" catchtap="handleTap2">middle view<view id="inner" bindtap="handleTap3">inner view</view></view> </view>

事件的捕獲階段

自基礎庫版本 1.5.0 起，觸摸類事件支持捕獲階段。捕獲階段位于冒泡階段之前，且在捕獲階段中，事件到達節點的順序與冒泡階段恰好相反。需要在捕獲階段監聽事件時，可以采用capture-bind、capture-catch關鍵字，后者將中斷捕獲階段和取消冒泡階段。

在下面的代碼中，點擊 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>

如果將上面代碼中的第一個capture-bind改為capture-catch，將只觸發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>

事件對象

如無特殊說明，當組件觸發事件時，邏輯層綁定該事件的處理函數會收到一個事件對象。

BaseEvent 基礎事件對象屬性列表：

屬性類型說明

type	String	事件類型
timeStamp	Integer	事件生成時的時間戳
target	Object	觸發事件的組件的一些屬性值集合
currentTarget	Object	當前組件的一些屬性值集合

CustomEvent 自定義事件對象屬性列表（繼承 BaseEvent）：

屬性類型說明

detail

Object

額外的信息

TouchEvent 觸摸事件對象屬性列表（繼承 BaseEvent）：

屬性類型說明

touches	Array	觸摸事件，當前停留在屏幕中的觸摸點信息的數組
changedTouches	Array	觸摸事件，當前變化的觸摸點信息的數組

特殊事件： `` 中的觸摸事件不可冒泡，所以沒有 currentTarget。

type

代表事件的類型。

timeStamp

頁面打開到觸發事件所經過的毫秒數。

target

觸發事件的源組件。

屬性類型說明

id	String	事件源組件的id
tagName	String	當前組件的類型
dataset	Object	事件源組件上由data-開頭的自定義屬性組成的集合

currentTarget

事件綁定的當前組件。

屬性類型說明

id	String	當前組件的id
tagName	String	當前組件的類型
dataset	Object	當前組件上由data-開頭的自定義屬性組成的集合

說明： target 和 currentTarget 可以參考上例中，點擊 inner view 時，handleTap3 收到的事件對象 target 和 currentTarget 都是 inner，而 handleTap2 收到的事件對象 target 就是 inner，currentTarget 就是 middle。

dataset

在組件中可以定義數據，這些數據將會通過事件傳遞給 SERVICE。書寫方式：以data-開頭，多個單詞由連字符-鏈接，不能有大寫(大寫會自動轉成小寫)如data-element-type，最終在 event.currentTarget.dataset 中會將連字符轉成駝峰elementType。

示例：

<view data-alpha-beta="1" data-alphaBeta="2" bindtap="bindViewTap"> DataSet Test </view> Page({bindViewTap:function(event){event.currentTarget.dataset.alphaBeta === 1 // - 會轉為駝峰寫法event.currentTarget.dataset.alphabeta === 2 // 大寫會轉為小寫} })

touches

touches 是一個數組，每個元素為一個 Touch 對象（canvas 觸摸事件中攜帶的 touches 是 CanvasTouch 數組）。表示當前停留在屏幕上的觸摸點。

Touch 對象

屬性類型說明

identifier	Number	觸摸點的標識符
pageX, pageY	Number	距離文檔左上角的距離，文檔的左上角為原點，橫向為X軸，縱向為Y軸
clientX, clientY	Number	距離頁面可顯示區域（屏幕除去導航條）左上角距離，橫向為X軸，縱向為Y軸

CanvasTouch 對象

屬性類型說明

identifier	Number	觸摸點的標識符
x, y	Number	距離 Canvas 左上角的距離，Canvas 的左上角為原點，橫向為X軸，縱向為Y軸

changedTouches

changedTouches 數據格式同 touches。表示有變化的觸摸點，如從無變有（touchstart），位置變化（touchmove），從有變無（touchend、touchcancel）。

detail

自定義事件所攜帶的數據，如表單組件的提交事件會攜帶用戶的輸入，媒體的錯誤事件會攜帶錯誤信息，詳見組件定義中各個事件的定義。

點擊事件的detail 帶有的 x, y 同 pageX, pageY 代表距離文檔左上角的距離。

2.WSX

WXS（WeiXin Script）是小程序的一套腳本語言，結合 WXML，可以構建出頁面的結構。

注意

wxs 不依賴于運行時的基礎庫版本，可以在所有版本的小程序中運行。

wxs 與 javascript 是不同的語言，有自己的語法，并不和 javascript 一致。

wxs 的運行環境和其他 javascript 代碼是隔離的，wxs 中不能調用其他 javascript 文件中定義的函數，也不能調用小程序提供的API。

wxs 函數不能作為組件的事件回調。

由于運行環境的差異，在 iOS 設備上小程序內的 wxs 會比 javascript 代碼快 2 ~ 20 倍。在 android 設備上二者運行效率無差異。

以下是一些使用 WXS 的簡單示例：

頁面渲染

<wxs module="m1"> var msg = "abc";module.exports.message = msg; </wxs><view> {{m1.message}} </view>

頁面輸出：

abc

數據處理

// page.js Page({data: {array: [1, 2, 3, 4, 5, 1, 2, 3, 4]} })   <wxs module="m1"> var getMax = function(array) {var max = undefined;for (var i = 0; i < array.length; ++i) {max = max === undefined ? array[i] : (max >= array[i] ? max : array[i]);}return max; }module.exports.getMax = getMax; </wxs> <view> {{m1.getMax(array)}} </view>

頁面輸出：

模塊

WXS 代碼可以編寫在 wxml 文件中的 <wxs> 標簽內，或以 .wxs 為后綴名的文件內。

每一個 .wxs 文件和 <wxs> 標簽都是一個單獨的模塊。

每個模塊都有自己獨立的作用域。即在一個模塊里面定義的變量與函數，默認為私有的，對其他模塊不可見。

一個模塊要想對外暴露其內部的私有變量與函數，只能通過 module.exports 實現。

.wxs 文件

在微信開發者工具里面，右鍵可以直接創建 .wxs 文件，在其中直接編寫 WXS 腳本。

示例代碼：

// /pages/comm.wxsvar foo = "'hello world' from comm.wxs"; var bar = function(d) {return d; } module.exports = {foo: foo,bar: bar };

上述例子在 /pages/comm.wxs 的文件里面編寫了 WXS 代碼。該 .wxs 文件可以被其他的 .wxs 文件或 WXML 中的 `` 標簽引用。

module 對象

每個 wxs 模塊均有一個內置的 module 對象。

包含屬性：

exports: 通過該屬性，可以對外共享本模塊的私有變量與函數。

示例代碼：

// /pages/tools.wxsvar foo = "'abc' from tools.wxs"; var bar = function (d) {return d; } module.exports = {FOO: foo,bar: bar, }; module.exports.msg = "some msg"; <wxs src="./../tools.wxs" module="tools" /> <view> {{tools.msg}} </view> <view> {{tools.bar(tools.FOO)}} </view>

頁面輸出：

some msg 'abc' from tools.wxs

require函數

在.wxs模塊中引用其他 wxs 文件模塊，可以使用 require 函數。

引用的時候，要注意如下幾點：

只能引用 .wxs 文件模塊，且必須使用相對路徑。
wxs 模塊均為單例，wxs 模塊在第一次被引用時，會自動初始化為單例對象。多個頁面，多個地方，多次引用，使用的都是同一個 wxs 模塊對象。
如果一個 wxs 模塊在定義之后，一直沒有被引用，則該模塊不會被解析與運行。

示例代碼：

// /pages/tools.wxsvar foo = "'abc' from tools.wxs"; var bar = function (d) {return d; } module.exports = {FOO: foo,bar: bar, }; module.exports.msg = "some msg"; // /pages/logic.wxsvar tools = require("./tools.wxs");console.log(tools.FOO); console.log(tools.bar("logic.wxs")); console.log(tools.msg); <wxs src="./../logic.wxs" module="logic" />

控制臺輸出：

'abc' from tools.wxs logic.wxs some msg

<wxs> 標簽

屬性名類型說明

module	String	當前 `` 標簽的模塊名。必填字段。
src	String	引用 .wxs 文件的相對路徑。僅當本標簽為單閉合標簽或標簽的內容為空時有效。

module 屬性

module 屬性是當前標簽的模塊名。在單個 wxml 文件內，建議其值唯一。有重復模塊名則按照先后順序覆蓋（后者覆蓋前者）。不同文件之間的 wxs 模塊名不會相互覆蓋。

module 屬性值的命名必須符合下面兩個規則：

首字符必須是：字母（a-zA-Z），下劃線（_）
剩余字符可以是：字母（a-zA-Z），下劃線（_），數字（0-9）

示例代碼：

<wxs module="foo"> var some_msg = "abc"; module.exports = {msg : some_msg, } </wxs> <view> {{foo.msg}} </view>

頁面輸出：

abc

上面例子聲明了一個名字為 foo 的模塊，將 some_msg 變量暴露出來，供當前頁面使用。

src 屬性

src 屬性可以用來引用其他的 wxs 文件模塊。

引用的時候，要注意如下幾點：

只能引用 .wxs 文件模塊，且必須使用相對路徑。
wxs 模塊均為單例，wxs 模塊在第一次被引用時，會自動初始化為單例對象。多個頁面，多個地方，多次引用，使用的都是同一個 wxs 模塊對象。
如果一個 wxs 模塊在定義之后，一直沒有被引用，則該模塊不會被解析與運行。

示例代碼：

// /pages/index/index.jsPage({data: {msg: "'hello w3cSchool' from js",} }) <wxs src="./../comm.wxs" module="some_comms"></wxs>  <view> {{some_comms.bar(some_comms.foo)}} </view>  <view> {{some_comms.bar(msg)}} </view>

頁面輸出：

'hello w3cschool' from comm.wxs 'hello W3CSCHOOL' from js

上述例子在文件 /page/index/index.wxml 中通過 <wxs> 標簽引用了 /page/comm.wxs 模塊。

注意

<wxs> 模塊只能在定義模塊的 WXML 文件中被訪問到。使用 <include> 或 <import> 時，<wxs> 模塊不會被引入到對應的 WXML 文件中。
<template> 標簽中，只能使用定義該 <template> 的 WXML 文件中定義的<wxs> 模塊。

變量

概念

WXS 中的變量均為值的引用。
沒有聲明的變量直接賦值使用，會被定義為全局變量。
如果只聲明變量而不賦值，則默認值為 undefined。
var表現與javascript一致，會有變量提升。

var foo = 1; var bar = "hello w3cSchool"; var i; // i === undefined

上面代碼，分別聲明了 foo、 bar、 i 三個變量。然后，foo 賦值為數值 1 ，bar 賦值為字符串 "hello w3cSchool"。

變量名

變量命名必須符合下面兩個規則：

首字符必須是：字母（a-zA-Z），下劃線（_）
剩余字符可以是：字母（a-zA-Z），下劃線（_），數字（0-9）

保留標識符

以下標識符不能作為變量名：

delete void typeofnull undefined NaN Infinity varif else true falserequirethis function arguments returnfor while do break continue switch case default

注釋

WXS 主要有 3 種注釋的方法。

示例代碼：

<wxs module="sample"> // 方法一：單行注釋/* 方法二：多行注釋 *//* 方法三：結尾注釋。即從 /* 開始往后的所有 WXS 代碼均被注釋var a = 1; var b = 2; var c = "fake";</wxs>

上述例子中，所有 WXS 代碼均被注釋掉了。

方法三和方法二的唯一區別是，沒有 */ 結束符。

運算符

基本運算符

示例代碼：

var a = 10, b = 20;// 加法運算 console.log(30 === a + b); // 減法運算 console.log(-10 === a - b); // 乘法運算 console.log(200 === a * b); // 除法運算 console.log(0.5 === a / b); // 取余運算 console.log(10 === a % b);

加法運算（+）也可以用作字符串的拼接。

var a = '.w' , b = 'xs';// 字符串拼接 console.log('.wxs' === a + b);

一元運算符

示例代碼：

var a = 10, b = 20;// 自增運算 console.log(10 === a++); console.log(12 === ++a); // 自減運算 console.log(12 === a--); console.log(10 === --a); // 正值運算 console.log(10 === +a); // 負值運算 console.log(0-10 === -a); // 否運算 console.log(-11 === ~a); // 取反運算 console.log(false === !a); // delete 運算 console.log(true === delete a.fake); // void 運算 console.log(undefined === void a); // typeof 運算 console.log("number" === typeof a);

位運算符

示例代碼：

var a = 10, b = 20;// 左移運算 console.log(80 === (a << 3)); // 無符號右移運算 console.log(2 === (a >> 2)); // 帶符號右移運算 console.log(2 === (a >>> 2)); // 與運算 console.log(2 === (a & 3)); // 異或運算 console.log(9 === (a ^ 3)); // 或運算 console.log(11 === (a | 3));

比較運算符

示例代碼：

var a = 10, b = 20;// 小于 console.log(true === (a < b)); // 大于 console.log(false === (a > b)); // 小于等于 console.log(true === (a <= b)); // 大于等于 console.log(false === (a >= b));

等值運算符

示例代碼：

var a = 10, b = 20;// 等號 console.log(false === (a == b)); // 非等號 console.log(true === (a != b)); // 全等號 console.log(false === (a === b)); // 非全等號 console.log(true === (a !== b));

賦值運算符

示例代碼：

var a = 10;a = 10; a *= 10; console.log(100 === a); a = 10; a /= 5; console.log(2 === a); a = 10; a %= 7; console.log(3 === a); a = 10; a += 5; console.log(15 === a); a = 10; a -= 11; console.log(-1 === a); a = 10; a <<= 10; console.log(10240 === a); a = 10; a >>= 2; console.log(2 === a); a = 10; a >>>= 2; console.log(2 === a); a = 10; a &= 3; console.log(2 === a); a = 10; a ^= 3; console.log(9 === a); a = 10; a |= 3; console.log(11 === a);

二元邏輯運算符

示例代碼：

var a = 10, b = 20;// 邏輯與 console.log(20 === (a && b)); // 邏輯或 console.log(10 === (a || b));

其他運算符

示例代碼：

var a = 10, b = 20;//條件運算符 console.log(20 === (a >= 10 ? a + 10 : b + 10)); //逗號運算符 console.log(20 === (a, b));

運算符優先級

優先級運算符說明結合性

20	( … )	括號	n/a
19	… . …	成員訪問	從左到右
	… [ … ]	成員訪問	從左到右
	… ( … )	函數調用	從左到右
17	… ++	后置遞增	n/a
	… --	后置遞減	n/a
16	! …	邏輯非	從右到左
	~ …	按位非	從右到左
	+ …	一元加法	從右到左
	- …	一元減法	從右到左
	++ …	前置遞增	從右到左
	-- …	前置遞減	從右到左
	typeof …	typeof	從右到左
	void …	void	從右到左
	delete …	delete	從右到左
14	… * …	乘法	從左到右
	… / …	除法	從左到右
	… % …	取模	從左到右
13	… + …	加法	從左到右
	… - …	減法	從左到右
12	… << …	按位左移	從左到右
	… >> …	按位右移	從左到右
	… >>> …	無符號右移	從左到右
11	… < …	小于	從左到右
	… <= …	小于等于	從左到右
	… > …	大于	從左到右
	… >= …	大于等于	從左到右
10	… == …	等號	從左到右
	… != …	非等號	從左到右
	… === …	全等號	從左到右
	… !== …	非全等號	從左到右
9	… & …	按位與	從左到右
8	… ^ …	按位異或	從左到右
7	… ｜ …	按位或	從左到右
6	… && …	邏輯與	從左到右
5	… ｜｜ …	邏輯或	從左到右
4	… ? … : …	條件運算符	從右到左
3	… = …	賦值	從右到左
	… += …	賦值	從右到左
	… -= …	賦值	從右到左
	… *= …	賦值	從右到左
	… /= …	賦值	從右到左
	… %= …	賦值	從右到左
	… <<= …	賦值	從右到左
	… >>= …	賦值	從右到左
	… >>>= …	賦值	從右到左
	… &= …	賦值	從右到左
	… ^= …	賦值	從右到左
	… ｜= …	賦值	從右到左
0	… , …	逗號	從左到右

if語句

在 WXS 中，可以使用以下格式的 if 語句：

if (expression) statement ：當 expression 為 truthy 時，執行 statement。
if (expression) statement1 else statement2 : 當 expression 為 truthy 時，執行 statement1。否則，執行 statement2
if … else if … else statementN 通過該句型，可以在 statement1 ~ statementN 之間選其中一個執行。

示例語法：

// if ...if (表達式) 語句;if (表達式) 語句;if (表達式) {代碼塊; }// if ... else if (表達式) 語句; else 語句;if (表達式) 語句; else 語句;if (表達式) {代碼塊; } else {代碼塊; }// if ... else if ... else ...if (表達式) {代碼塊; } else if (表達式) {代碼塊; } else if (表達式) {代碼塊; } else {代碼塊; }

switch 語句

示例語法：

switch (表達式) {case 變量:語句;case 數字:語句;break;case 字符串:語句;default:語句; }

default 分支可以省略不寫。
case 關鍵詞后面只能使用：變量，數字，字符串。

示例代碼：

var exp = 10;switch ( exp ) { case "10":console.log("string 10");break; case 10:console.log("number 10");break; case exp:console.log("var exp");break; default:console.log("default"); }

輸出：

number 10

for 語句

示例語法：

for (語句; 語句; 語句)語句;for (語句; 語句; 語句) {代碼塊; }

支持使用 break，continue 關鍵詞。

示例代碼：

for (var i = 0; i < 3; ++i) {console.log(i);if( i >= 1) break; }

輸出：

0 1

while 語句

示例語法：

while (表達式)語句;while (表達式){代碼塊; }do {代碼塊; } while (表達式)

當表達式為 true 時，循環執行語句或代碼塊。
支持使用 break，continue 關鍵詞。

數據類型

WXS 語言目前共有以下幾種數據類型：

number ：數值
string ：字符串
boolean：布爾值
object：對象
function：函數
array : 數組
date：日期
regexp：正則

number

語法

number 包括兩種數值：整數，小數。

var a = 10; var PI = 3.141592653589793;

屬性

constructor：返回字符串 “Number”。

方法

toString
toLocaleString
valueOf
toFixed
toExponential
toPrecision

以上方法的具體使用請參考 ES5 標準。

string

語法

string 有兩種寫法：

'hello world'; "hello world";

屬性

constructor：返回字符串 “String”。
length

除constructor外屬性的具體含義請參考 ES5 標準。

方法

toString
valueOf
charAt
charCodeAt
concat
indexOf
lastIndexOf
localeCompare
match
replace
search
slice
split
substring
toLowerCase
toLocaleLowerCase
toUpperCase
toLocaleUpperCase
trim

以上方法的具體使用請參考 ES5 標準。

boolean

語法

布爾值只有兩個特定的值：true 和 false。

屬性

constructor：返回字符串 “Boolean”。

方法

toString
valueOf

以上方法的具體使用請參考 ES5 標準。

object

語法

object 是一種無序的鍵值對。使用方法如下所示：

屬性

constructor：返回字符串 “Object”。

console.log("Object" === {k:"1",v:"2"}.constructor)

方法

toString：返回字符串 “[object Object]”。

function

語法

function 支持以下的定義方式：

//方法 1 function a (x) {return x; }//方法 2 var b = function (x) { return x; }

function 同時也支持以下的語法（匿名函數，閉包等）：

var a = function (x) {return function () { return x;} }var b = a(100); console.log( 100 === b() );

arguments

function 里面可以使用 arguments 關鍵詞。該關鍵詞目前只支持以下的屬性：

length: 傳遞給函數的參數個數。
[index]: 通過 index 下標可以遍歷傳遞給函數的每個參數。

示例代碼：

var a = function(){console.log(3 === arguments.length);console.log(100 === arguments[0]);console.log(200 === arguments[1]);console.log(300 === arguments[2]); }; a(100,200,300);

屬性

constructor：返回字符串 “Function”。
length：返回函數的形參個數。

方法

toString：返回字符串 “[function Function]”。

示例代碼：

var func = function (a,b,c) { }console.log("Function" === func.constructor); console.log(3 === func.length); console.log("[function Function]" === func.toString());

array

語法

array 支持以下的定義方式：

var a = []; //生成一個新的空數組a = [1,"2",{},function(){}]; //生成一個新的非空數組，數組元素可以是任何類型

屬性

constructor：返回字符串 “Array”。
length

除constructor外屬性的具體含義請參考 ES5 標準。

方法

toString
concat
join
pop
push
reverse
shift
slice
sort
splice
unshift
indexOf
lastIndexOf
every
some
forEach
map
filter
reduce
reduceRight

以上方法的具體使用請參考 ES5 標準。

date

語法

生成 date 對象需要使用 getDate函數, 返回一個當前時間的對象。

getDate() getDate(milliseconds) getDate(datestring) getDate(year, month[, date[, hours[, minutes[, seconds[, milliseconds]]]]])

參數milliseconds: 從1970年1月1日00:00:00 UTC開始計算的毫秒數datestring: 日期字符串，其格式為：“month day, year hours:minutes:seconds”

示例代碼：

var date = getDate(); //返回當前時間對象date = getDate(1500000000000); // Fri Jul 14 2017 10:40:00 GMT+0800 (中國標準時間) date = getDate('2017-7-14'); // Fri Jul 14 2017 00:00:00 GMT+0800 (中國標準時間) date = getDate(2017, 6, 14, 10, 40, 0, 0); // Fri Jul 14 2017 10:40:00 GMT+0800 (中國標準時間)

屬性

constructor：返回字符串 “Date”。

方法

toString
toDateString
toTimeString
toLocaleString
toLocaleDateString
toLocaleTimeString
valueOf
getTime
getFullYear
getUTCFullYear
getMonth
getUTCMonth
getDate
getUTCDate
getDay
getUTCDay
getHours
getUTCHours
getMinutes
getUTCMinutes
getSeconds
getUTCSeconds
getMilliseconds
getUTCMilliseconds
getTimezoneOffset
setTime
setMilliseconds
setUTCMilliseconds
setSeconds
setUTCSeconds
setMinutes
setUTCMinutes
setHours
setUTCHours
setDate
setUTCDate
setMonth
setUTCMonth
setFullYear
setUTCFullYear
toUTCString
toISOString
toJSON

以上方法的具體使用請參考 ES5 標準。

regexp

語法

生成 regexp 對象需要使用 getRegExp函數。

getRegExp(pattern[, flags])

參數：pattern: 正則表達式的內容。flags：修飾符。該字段只能包含以下字符:g: globali: ignoreCasem: multiline。

示例代碼：

var a = getRegExp("x", "img"); console.log("x" === a.source); console.log(true === a.global); console.log(true === a.ignoreCase); console.log(true === a.multiline);

屬性

constructor：返回字符串 “RegExp”。
source
global
ignoreCase
multiline
lastIndex

除constructor外屬性的具體含義請參考 ES5 標準。

方法

exec
test
toString

以上方法的具體使用請參考 ES5 標準。

數據類型判斷

constructor 屬性

數據類型的判斷可以使用 constructor 屬性。

示例代碼：

var number = 10; console.log( "Number" === number.constructor );var string = "str"; console.log( "String" === string.constructor );var boolean = true; console.log( "Boolean" === boolean.constructor );var object = {}; console.log( "Object" === object.constructor );var func = function(){}; console.log( "Function" === func.constructor );var array = []; console.log( "Array" === array.constructor );var date = getDate(); console.log( "Date" === date.constructor );var regexp = getRegExp(); console.log( "RegExp" === regexp.constructor );

typeof

使用 typeof 也可以區分部分數據類型。

示例代碼：

var number = 10; var boolean = true; var object = {}; var func = function(){}; var array = []; var date = getDate(); var regexp = getRegExp();console.log( 'number' === typeof number ); console.log( 'boolean' === typeof boolean ); console.log( 'object' === typeof object ); console.log( 'function' === typeof func ); console.log( 'object' === typeof array ); console.log( 'object' === typeof date ); console.log( 'object' === typeof regexp );console.log( 'undefined' === typeof undefined ); console.log( 'object' === typeof null );

基礎類庫

console

console.log 方法用于在 console 窗口輸出信息。它可以接受多個參數，將它們的結果連接起來輸出。

Math

屬性

E
LN10
LN2
LOG2E
LOG10E
PI
SQRT1_2
SQRT2

以上屬性的具體使用請參考 ES5 標準。

方法

abs
acos
asin
atan
atan2
ceil
cos
exp
floor
log
max
min
pow
random
round
sin
sqrt
tan

以上方法的具體使用請參考 ES5 標準。

JSON

方法

stringify(object): 將 object 對象轉換為 JSON 字符串，并返回該字符串。
parse(string): 將 JSON 字符串轉化成對象，并返回該對象。

示例代碼：

console.log(undefined === JSON.stringify()); console.log(undefined === JSON.stringify(undefined)); console.log("null"===JSON.stringify(null));console.log("111"===JSON.stringify(111)); console.log('"111"'===JSON.stringify("111")); console.log("true"===JSON.stringify(true)); console.log(undefined===JSON.stringify(function(){}));console.log(undefined===JSON.parse(JSON.stringify())); console.log(undefined===JSON.parse(JSON.stringify(undefined))); console.log(null===JSON.parse(JSON.stringify(null)));console.log(111===JSON.parse(JSON.stringify(111))); console.log("111"===JSON.parse(JSON.stringify("111"))); console.log(true===JSON.parse(JSON.stringify(true)));console.log(undefined===JSON.parse(JSON.stringify(function(){})));

Number

屬性

MAX_VALUE
MIN_VALUE
NEGATIVE_INFINITY
POSITIVE_INFINITY

以上屬性的具體使用請參考 ES5 標準。

Date

屬性

parse
UTC
now

以上屬性的具體使用請參考 ES5 標準。

Global

屬性

NaN
Infinity
undefined

以上屬性的具體使用請參考 ES5 標準。

方法

parseInt
parseFloat
isNaN
isFinite
decodeURI
decodeURIComponent
encodeURI
encodeURIComponent

以上方法的具體使用請參考 ES5 標準。

3.WXSS

WXSS(WeiXin Style Sheets)是一套樣式語言，用于描述 WXML 的組件樣式。

WXSS 用來決定 WXML 的組件應該怎么顯示。

為了適應廣大的前端開發者，WXSS 具有 CSS 大部分特性。同時為了更適合開發微信小程序，WXSS 對 CSS 進行了擴充以及修改。

與 CSS 相比，WXSS 擴展的特性有：

尺寸單位
樣式導入

尺寸單位

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語句可以導入外聯樣式表，@import后跟需要導入的外聯樣式表的相對路徑，用;表示語句結束。

示例代碼：

/** common.wxss **/ .small-p {padding:5px; } /** app.wxss **/ @import "common.wxss"; .middle-p {padding:15px; }

內聯樣式

框架組件上支持使用 style、class 屬性來控制組件的樣式。

style：靜態的樣式統一寫到 class 中。style 接收動態的樣式，在運行時會進行解析，請盡量避免將靜態的樣式寫進 style 中，以免影響渲染速度。

class：用于指定樣式規則，其屬性值是樣式規則中類選擇器名(樣式類名)的集合，樣式類名不需要帶上.，樣式類名之間用空格分隔。

選擇器

目前支持的選擇器有：

選擇器樣例樣例描述

.class	.intro	選擇所有擁有 class=“intro” 的組件
#id	#firstname	選擇擁有 id=“firstname” 的組件
element	view	選擇所有 view 組件
element, element	view, checkbox	選擇所有文檔的 view 組件和所有的 checkbox 組件
::after	view::after	在 view 組件后邊插入內容
::before	view::before	在 view 組件前邊插入內容

全局樣式與局部樣式

定義在 app.wxss 中的樣式為全局樣式，作用于每一個頁面。在 page 的 wxss 文件中定義的樣式為局部樣式，只作用在對應的頁面，并會覆蓋 app.wxss 中相同的選擇器。

總結

以上是生活随笔為你收集整理的微信小程序学习记录——4.框架-视图层的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：函数的应用及其解析大全！
下一篇：输入文字后不会自动变长的下划线如何制作

日韩av黄I国产麻豆传媒I国产91av视频在线观看I日韩一区二区三区在线看I美女国产在线I麻豆视频国产在线观看I成人黄色短片

编程问答

微信小程序学习记录——4.框架-视图层

文章目錄

1.WXML

數據綁定

簡單綁定

運算

組合

列表渲染

wx:for

block wx:for

wx:key

條件渲染

wx:if

block wx:if

wx:if vs hidden

模板

定義模板

使用模板

模板的作用域

引用

import

import 的作用域

include

事件

什么是事件

事件的使用方式

事件分類

事件綁定和冒泡

事件的捕獲階段

事件對象

timeStamp

target

currentTarget

dataset

touches

Touch 對象

CanvasTouch 對象

changedTouches

detail

2.WSX

頁面渲染

數據處理

模塊

.wxs 文件

module 對象

require函數

<wxs> 標簽

module 屬性

src 屬性

注意

變量

概念

變量名

保留標識符

注釋

運算符

基本運算符

一元運算符

位運算符

比較運算符

等值運算符

賦值運算符

二元邏輯運算符

其他運算符

運算符優先級

if語句

switch 語句

for 語句

while 語句

數據類型

number

string

boolean

object

function

arguments

array

date