小程序使用之WXS

文章連接： 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/> 標籤，而且定義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 能夠簡化代碼，更加具備通用性。

歡迎關注個人我的博客：https://www.manjiexiang.cn/

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