WXS

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

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

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

頁面渲染

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

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

頁面輸出：

hello world

數(shù)據(jù)處理

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

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

頁面輸出：

5

框架

小程序開發(fā)框架的目標(biāo)是通過盡可能簡單、高效的方式讓開發(fā)者可以在微信中開發(fā)具有原生 APP 體驗(yàn)的服務(wù)。

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

響應(yīng)的數(shù)據(jù)綁定

框架的核心是一個(gè)響應(yīng)的數(shù)據(jù)綁定系統(tǒng)。

整個(gè)系統(tǒng)分為兩塊視圖層（View）和邏輯層（App Service）

框架可以讓數(shù)據(jù)與視圖非常簡單地保持同步。當(dāng)做數(shù)據(jù)修改的時(shí)候，只需要在邏輯層修改數(shù)據(jù)，視圖層就會做相應(yīng)的更新。

通過這個(gè)簡單的例子來看：

<!-- 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' })
  }
})

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

• 當(dāng)點(diǎn)擊按鈕的時(shí)候，視圖層會發(fā)送 changeName 的事件給邏輯層，邏輯層找到對應(yīng)的事件處理函數(shù)

• 邏輯層執(zhí)行了 setData 的操作，將 name 從 WeChat 變?yōu)?nbsp;MINA，因?yàn)樵摂?shù)據(jù)和視圖層已經(jīng)綁定了，從而視圖層會自動改變?yōu)?nbsp;Hello MINA! 。

頁面管理

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

基礎(chǔ)組件

框架 提供了一套基礎(chǔ)的組件，這些組件自帶微信風(fēng)格的樣式以及特殊的邏輯，開發(fā)者可以通過組合基礎(chǔ)組件，創(chuàng)建出強(qiáng)大的微信小程序 。

豐富的 API

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

基礎(chǔ)組件

框架為開發(fā)者提供了一系列基礎(chǔ)組件，開發(fā)者可以通過組合這些基礎(chǔ)組件進(jìn)行快速開發(fā)。

什么是組件：

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

• 組件自帶一些功能與微信風(fēng)格的樣式。

• 一個(gè)組件通常包括開始標(biāo)簽和結(jié)束標(biāo)簽，屬性用來修飾這個(gè)組件，內(nèi)容在兩個(gè)標(biāo)簽之內(nèi)。

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

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

屬性類型

共同屬性類型

所有組件都有的屬性：

特殊屬性

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

組件列表

基礎(chǔ)組件分為以下七大類：

視圖容器(View Container)：

基礎(chǔ)內(nèi)容(Basic Content)：

表單(Form)：

導(dǎo)航(Navigation)：

多媒體(Media)：

地圖(Map)：

畫布(Canvas)：

客服會話：

API

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

說明：

• wx.on 開頭的 API 是監(jiān)聽某個(gè)事件發(fā)生的API接口，接受一個(gè) CALLBACK 函數(shù)作為參數(shù)。當(dāng)該事件觸發(fā)時(shí)，會調(diào)用 CALLBACK 函數(shù)。

• 如未特殊約定，其他 API 接口都接受一個(gè)OBJECT作為參數(shù)。

• OBJECT中可以指定success, fail, complete來接收接口調(diào)用結(jié)果。

API列表：

網(wǎng)絡(luò) API 列表：

媒體 API 列表：

文件 API 列表：

數(shù)據(jù) API 列表：

位置 API 列表：

設(shè)備 API 列表：

界面 API 列表：

WXML節(jié)點(diǎn)信息 API 列表：

開放接口：

不能直接操作 Page.data

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

怎么獲取用戶輸入

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

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

var inputContent = {}

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

為什么腳本內(nèi)不能使用window等對象

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

為什么 zepto/jquery 無法使用

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

wx.navigateTo無法打開頁面

一個(gè)應(yīng)用同時(shí)只能打開5個(gè)頁面，當(dāng)已經(jīng)打開了5個(gè)頁面之后，wx.navigateTo不能正常打開新頁面。請避免多層級的交互方式，或者使用wx.redirectTo

樣式表不支持級聯(lián)選擇器

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

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

可以使用標(biāo)簽選擇器，控制同一類組件的樣式。如：使用input標(biāo)簽選擇器控制<input/>的默認(rèn)樣式。

input { width: 100px;
}

本地資源無法通過 WXSS 獲取

background-image：可以使用網(wǎng)絡(luò)圖片，或者 base64，或者使用<image/>標(biāo)簽

如何修改窗口的背景色

使用 page 標(biāo)簽選擇器，可以修改頂層節(jié)點(diǎn)的樣式

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

HTTPS 請求不成功

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

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

網(wǎng)絡(luò)請求的 referer

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

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

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