微信小程式WXS文法和頁面适配

概述

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

作用

在WXML檔案中如果想要嵌入一段腳本語言，實作對WXML中資料的預處理操作，此時可以

使用WXS文法。

适用場景

• 在某一個WXML檔案中嵌入一段WXS腳本實作對目前WXML中資料的預處理操作。可以實作JS檔案中代碼的減負，進而提高代碼的可維護性和可移植性。
• 可以将公共操作封裝在一個獨立的wxs檔案中，在需要使用該腳本的WXML中導入wxs檔案，進而實作公共腳本的封裝。

wxs文法

wxs子產品

WXS 腳本可以編寫在 wxml 檔案中的 标簽内，或以 .wxs 為字尾名的檔案内，相當

于微信版本的 JS 。通過子產品的概念實作代碼的封裝。

wxs 的兩種使用方式

• 直接在 wxml 中使用
• 首先在 wxml 檔案中書寫一個 wxs 标簽，設定标簽的module屬性。

• 在 wxs 标簽中定義需要進行操作的方法（函數），注意在腳本中的方法一般都是

  簡單方法，單純用來完成對資料的過濾，預處理等。

• 最後将定義的方法以子產品的導出的方式導出給外界。

  

1. module 屬性:

   module 屬性是目前 <wxs> 标簽的子產品名。在單個 wxml 檔案内，建議其值唯一。有重複子產品名則按照先後順序覆寫（後者覆寫前者）。不同檔案之間的 wxs 子產品名不會互相覆寫。

2. module 屬性值的命名規則：

   首字元必須是：字母（a-zA-Z），下劃線（）

   剩餘字元可以是：字母（a-zA-Z），下劃線（）， 數字（0-9）

3. 作用：

   為目前 wxs 标簽包裹的一段腳本設定一個子產品名，将來在 wxml 檔案使用該子產品方法是友善調用。

• 在需要使用的 wxml 檔案中，以子產品名調用。

  

• 直接将腳本寫在一個 .wxs 檔案中。
• 建立一個 wxs 字尾的檔案。

  

• 在需要使用 wxs 檔案的 wxml 檔案中通過 wxs 标簽導入該腳本。在需要的地方仍然使用子產品名調用。

  

  實作案例：

  

wxs 基于文法

• 該文法是延續 Javascript 基礎文法，和 Javascript 基本文法完全相同，隻是在子產品操作時存在不同。
• 打開溫馨開發者文檔，檢視 wxs 文法。

  

頁面适配

• 微信小程式開發過程中，随着螢幕寬度的切換，需要保證頁面中存在的内容可以跟随螢幕發生變化，以保證不同螢幕下頁面文字的尺寸适配目前螢幕。此時需要将所有非百分的尺寸，使用一種相對機關進行适配。該相對機關為 rpx 。
• rpx 是微信小程式内部内置的一個相對機關, 該相對機關是以目前裝置的螢幕寬度為參照物。在小程式開發中設計稿的尺寸是按照 iPhone6 的螢幕作為參考，是以 iPhone6 下0.5 px == 1 rpx 。如果切換到 iPhone5 下，此時螢幕寬度為320，按照等比例縮放的要求，此時0.42 px == 1rpx 。如果所有的标簽均使用 rpx 作為機關，此時随着螢幕切換，1 rpx 換算成對應 px 是不同的。