小程式使用之WXS

摘要： 瞭解些前端的知識，相對而言還是比較容易上手的，小程式的檢視採用wxml 與 wxss 編寫，對比前端就是html 與 css。wxml 跟html 類似是描繪頁面結構的，小程式有一套自己的標籤，而大部分前端的css樣式都可以用在 wxss裡面。關於資料繫結部分，小程式使用Mustach...

瞭解些前端的知識，相對而言還是比較容易上手的，小程式的檢視採用wxml 與 wxss 編寫，對比前端就是html 與 css。wxml 跟html 類似是描繪頁面結構的，小程式有一套自己的標籤，而大部分前端的css樣式都可以用在 wxss裡面。關於資料繫結部分，小程式使用Mustache 語法（雙大括號） 進行繫結。這裡要講的是wxs ，小程式自己的一套指令碼語言，可以用於渲染頁面。

一個簡單的例子，新建一個a.wxml 檔案，程式碼如下：

<wxs module="a">
var str = "qwerty"
module.exports.txt = str
</wxs>

<view>
{{a.txt}}
</view>

這裡wxs 程式碼直接編寫在wxml檔案內，定義wxs 的module名為a，這個引數是必須的；通過 exports暴露對外的屬性，外部使用的話，直接通過module名呼叫屬性值。

注‘Android技術交流群878873098，歡迎大家加入交流，暢談！本群有免費學習資料視訊’並且免費分享原始碼解析視訊

當然，wxs程式碼也可以寫在以.wxs 為字尾名的檔案內a.wxs ，裡面直接編寫程式碼：

var str = "qwerty"
module.exports.txt = str

使用的話，在a.wxml 檔案內同樣需要使用標籤，並且定義module 名，注意src 使用相對路徑引入wxs檔案：

<wxs src="./index.wxs" module="a"/>
<view>
{{a.txt}}
</view>

這裡推薦使用以 .wxs 為字尾名來封裝程式碼，這樣便於其他檔案通用。

同時，在.wxs模組中可以引用其他 wxs 檔案模組，注意這裡只能以檔案的形式引用，通過require 引用檔案相對路徑。

//編寫 b.wxs檔案
var str = "123456"
module.exports.txt = str 

//wxs 程式碼直接編寫在 wxml檔案內
<wxs module="a">
//通過require 引用 b.wxs檔案
var b = require("./b.wxs")
var str = "qwerty"
module.exports.txt = b.txt
</wxs>

<view>
{{a.txt}}
</view>

//在 a.wxs 裡引用 b.wxs
var b = require("./b.wxs")
var str = "qwerty"
module.exports.txt = b.txt 

//a.wxml 裡引入 a.wxs
<wxs module="a" src="./index.wxs"/>
<view>
{{a.txt}}
</view>

同樣wxs 還可以對外暴露方法，

<wxs module="a">
var add = function(i, j) {
return i + j
}
module.exports.add = add
</wxs>

<view>
{{a.add(1,2)}}
</view>

這樣我們可以通過編寫wxs，對data 資料進行處理，渲染到view層。

實際專案中，通過wxs 可以簡化程式碼，更加具有通用性。

注‘Android技術交流群878873098，歡迎大家加入交流，暢談！本群有免費學習資料視訊’並且免費分享原始碼解析視訊