WXS

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

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

WXS、WXS語言、WXS腳本語言、微信小程序

頁面渲染

<!--wxml--> <wxs module="m1"> var msg = "hello world";

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

頁面輸出：

hello world

數據處理

// page.js Page({
  data: {
    array: [1, 2, 3, 4, 5, 1, 2, 3, 4]
  }
})

<!--wxml--> <!-- 下面的 getMax 函數，接受一個數組，且返回數組中最大的元素的值 --> <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> <!-- 調用 wxs 里面的 getMax 函數，參數為 page.js 里面的 array --> <view> {{m1.getMax(array)}} </view>

頁面輸出：

5

框架

小程序開發框架的目標是通過盡可能簡單、高效的方式讓開發者可以在微信中開發具有原生 APP 體驗的服務。

框架提供了自己的視圖層描述語言 WXML 和 WXSS，以及基于 JavaScript 的邏輯層框架，并在視圖層與邏輯層間提供了數據傳輸和事件系統，可以讓開發者可以方便的聚焦于數據與邏輯上。

響應的數據綁定

框架的核心是一個響應的數據綁定系統。

整個系統分為兩塊視圖層（View）和邏輯層（App Service）

框架可以讓數據與視圖非常簡單地保持同步。當做數據修改的時候，只需要在邏輯層修改數據，視圖層就會做相應的更新。

通過這個簡單的例子來看：

<!-- This is our View --> <view> Hello {{name}}! </view> <button bindtap="changeName"> Click me! </button>

// This is our App Service. // This is our data. var helloData = {
  name: 'WeChat' } // Register a Page. Page({
  data: helloData,
  changeName: function(e) { // sent data change to view this.setData({
      name: 'MINA' })
  }
})

• 開發者通過框架將邏輯層數據中的 name 與視圖層的 name 進行了綁定，所以在頁面一打開的時候會顯示 Hello WeChat!

• 當點擊按鈕的時候，視圖層會發送 changeName 的事件給邏輯層，邏輯層找到對應的事件處理函數

• 邏輯層執行了 setData 的操作，將 name 從 WeChat 變為 MINA，因為該數據和視圖層已經綁定了，從而視圖層會自動改變為 Hello MINA! 。

頁面管理

框架 管理了整個小程序的頁面路由，可以做到頁面間的無縫切換，并給以頁面完整的生命周期。開發者需要做的只是將頁面的數據，方法，生命周期函數注冊進 框架 中，其他的一切復雜的操作都交由 框架 處理。

基礎組件

框架 提供了一套基礎的組件，這些組件自帶微信風格的樣式以及特殊的邏輯，開發者可以通過組合基礎組件，創建出強大的微信小程序 。

豐富的 API

框架 提供豐富的微信原生 API，可以方便的調起微信提供的能力，如獲取用戶信息，本地存儲，支付功能等。

基礎組件

框架為開發者提供了一系列基礎組件，開發者可以通過組合這些基礎組件進行快速開發。

什么是組件：

• 組件是視圖層的基本組成單元。

• 組件自帶一些功能與微信風格的樣式。

• 一個組件通常包括開始標簽和結束標簽，屬性用來修飾這個組件，內容在兩個標簽之內。

  <tagname property="value"> Content goes here ... </tagname>

  注意：所有組件與屬性都是小寫，以連字符-連接

屬性類型

共同屬性類型

所有組件都有的屬性：

特殊屬性

幾乎所有組件都有各自定義的屬性，可以對該組件的功能或樣式進行修飾，請參考各個組件的定義。

組件列表

基礎組件分為以下七大類：

視圖容器(View Container)：

基礎內容(Basic Content)：

表單(Form)：

導航(Navigation)：

多媒體(Media)：

地圖(Map)：

畫布(Canvas)：

客服會話：

API

框架提供豐富的微信原生API，可以方便的調起微信提供的能力，如獲取用戶信息，本地存儲，支付功能等。

說明：

• wx.on 開頭的 API 是監聽某個事件發生的API接口，接受一個 CALLBACK 函數作為參數。當該事件觸發時，會調用 CALLBACK 函數。

• 如未特殊約定，其他 API 接口都接受一個OBJECT作為參數。

• OBJECT中可以指定success, fail, complete來接收接口調用結果。

API列表：

網絡 API 列表：

媒體 API 列表：

文件 API 列表：

數據 API 列表：

位置 API 列表：

設備 API 列表：

界面 API 列表：

WXML節點信息 API 列表：

開放接口：

不能直接操作 Page.data

避免在直接對 Page.data 進行賦值修改，請使用 Page.setData 進行操作才能將數據同步到頁面中進行渲染

怎么獲取用戶輸入

能夠獲取用戶輸入的組件，需要使用組件的屬性bindblur將用戶的輸入內容同步到 AppService。

<input id="myInput" bindblur="bindBlur" />

var inputContent = {}

Page({
  data: {
    inputContent: {}
  },
  bindBlur: function(e) {
    inputContent[e.currentTarget.id] = e.detail.value
  }
})

為什么腳本內不能使用window等對象

頁面的腳本邏輯是在JsCore中運行，JsCore是一個沒有窗口對象的環境，所以不能在腳本中使用window，也無法在腳本中操作組件

為什么 zepto/jquery 無法使用

zepto/jquery 會使用到window對象和document對象，所以無法使用。

wx.navigateTo無法打開頁面

一個應用同時只能打開5個頁面，當已經打開了5個頁面之后，wx.navigateTo不能正常打開新頁面。請避免多層級的交互方式，或者使用wx.redirectTo

樣式表不支持級聯選擇器

WXSS支持以.開始的類選擇器。如：

.normal_view { color: #000000; padding: 10px;
}

可以使用標簽選擇器，控制同一類組件的樣式。如：使用input標簽選擇器控制<input/>的默認樣式。

input { width: 100px;
}

本地資源無法通過 WXSS 獲取

background-image：可以使用網絡圖片，或者 base64，或者使用<image/>標簽

如何修改窗口的背景色

使用 page 標簽選擇器，可以修改頂層節點的樣式

page { display: block; min-height: 100%; background-color: red;
}

HTTPS 請求不成功

1. tls 僅支持 1.2 及以上版本

2. 部分 Android 機型需要 tls1.0 或者 tls1.1，所以請確保服務器的 tls 版本為 1.0、1.1、1.2

網絡請求的 referer

網絡請求的 referer 是不可以設置的，格式固定為 https://servicewechat.com/{appid}/{version}/page-frame.html，其中 {appid} 為小程序的 appid，{version} 為小程序的版本號，版本號為 0 表示為開發版、體驗版以及審核版本，版本號為 devtools 表示為開發者工具，其余為正式版本。

為什么 map 組件總是在最上層

map、canvas、video、textarea 是由客戶端創建的原生組件，原生組件的層級是最高的，所以頁面中的其他組件無論設置 z-index 為多少，都無法蓋在原生組件上。 原生組件暫時還無法放在 scroll-view 上，也無法對原生組件設置 css 動畫。