文章連結：https://mp.weixin.qq.com/s/F1zzS7mvMpFaplq4KINzQg

之前做過一段時間的小程式開發，自己也寫過兩個自己的小程式，瞭解些前端的知識，相對而言還是比較容易上手的，小程式的檢視採用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名呼叫屬性值。
當然，wxs程式碼也可以寫在以.wxs 為字尾名的檔案內a.wxs ，裡面直接編寫程式碼：

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

使用的話，在a.wxml 檔案內同樣需要使用

<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 可以簡化程式碼，更加具有通用性。

歡迎關注我的個人部落格：https://www.manjiexiang.cn/

更多精彩歡迎關注微訊號：春風十里不如認識你
一起學習，一起進步，歡迎上車，有問題隨時聯絡，一起解決！！！