WXS

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

以下是一些使用 WXS 的簡(jiǎn)單示例：

WXS、WXS語(yǔ)言、WXS腳本語(yǔ)言、微信小程序

頁(yè)面渲染

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

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

頁(yè)面輸出：

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>

頁(yè)面輸出：

5

框架

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

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

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

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

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

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

通過(guò)這個(gè)簡(jiǎn)單的例子來(lái)看：

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

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

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

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

頁(yè)面管理

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

基礎(chǔ)組件

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

豐富的 API

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

基礎(chǔ)組件

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

什么是組件：

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

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

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

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

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

屬性類(lèi)型

共同屬性類(lèi)型

所有組件都有的屬性：

特殊屬性

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

組件列表

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

視圖容器(View Container)：

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

表單(Form)：

導(dǎo)航(Navigation)：

多媒體(Media)：

地圖(Map)：

畫(huà)布(Canvas)：

客服會(huì)話：

API

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

說(shuō)明：

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

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

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

API列表：

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

媒體 API 列表：

文件 API 列表：

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

位置 API 列表：

設(shè)備 API 列表：

界面 API 列表：

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

開(kāi)放接口：

不能直接操作 Page.data

避免在直接對(duì) Page.data 進(jìn)行賦值修改，請(qǐng)使用 Page.setData 進(jìn)行操作才能將數(shù)據(jù)同步到頁(yè)面中進(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等對(duì)象

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

為什么 zepto/jquery 無(wú)法使用

zepto/jquery 會(huì)使用到window對(duì)象和document對(duì)象，所以無(wú)法使用。

wx.navigateTo無(wú)法打開(kāi)頁(yè)面

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

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

WXSS支持以.開(kāi)始的類(lèi)選擇器。如：

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

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

input { width: 100px;
}

本地資源無(wú)法通過(guò) 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 請(qǐng)求不成功

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

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

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

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

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

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