微信小程序 wxs腳本


wxs概述:

wxs (WeiXin Script) 是小程序的一套腳本語言,結合WXML,可以構建出頁面結構。

 

wxs的注意點:

1. 沒有兼容性,wxs不依賴於運行時的基礎庫版本,可以在所有版本的小程序中運行。

2. 與JavaScript 不同, wxs與JavaScript是不同的語言,有自己的語法,並不和javasc一致。

3. 隔離性,wxs的運行環境和其他JavaScript代碼時隔離的,wxs中不能調用JavaScript文件中定義的函數,也不能調用小程序提供的API。

4. 不能作為事件回調,wxs函數不能作為組件的事件回調。

5. wxs 在 IOS設備比JavaScript運行快: 由於運行環境的差異,在IOS設備上小程序內的wxs會比JavaScript代碼快 2~20倍。在android設備上運行效率無差異。

 

wxs遵循CommonJS 模塊化規范:

CommonJS是JavaScript的模塊規范之一,小程序的腳本語言wxs遵循了CommonJS規范,因此,使用wxs的體驗和使用node.js 的體驗比較相似。

在wxs中,可以使用CommonJS中規定的如下成員:

module對象: 每個wxs都是獨立的模塊,每個模塊有一個內置的module對象,每個模塊都有自己獨立的作用域。

module.exports: 由於wxs擁有獨立作用域,所以在一個模塊里面定義的變量與函數,默認為私有的,對其他模塊不可見,通過module.exports 屬性,可以對外共享本模塊的私有變量與函數。

require函數: 在wxs 模塊中引用wxs文件模塊,可以使用require函數。

 

 

wxs基礎語法:

1.使用module.exports 向外共享成員。

2.使用require 引入其他wxs模塊。

3. 使用require 的注意點: 

只能應用.wxs 文件模塊,且必須使用相對路徑。

wxs模塊均為單例,wxs模塊在第一次被引用時,會自動出事話單例對象,多個頁面,多個地方,多次引用,使用的都是同一個wxs模塊對象。

如果wxs模塊在定義之后,一直沒有被引用,則該模塊不會被解析與運行。

4.支持的數據類型:

wxs語言目前有以下8種數據類型:

number 數值類型, string 字符串類型, boolean 布爾類型, object 對象類型,function 函數類型, array 數組類型, data 日期類型, regexp 正則

 

 


 

內嵌wxs腳本:

wxs代碼剋編寫在wxml文件中,<wxs></wxs>標簽內,就像JavaScript代碼可以編寫在html文件中的<script></script>標簽內一樣。

wxml文件中的每個<wxs></wxs>標簽,必須提供一個module屬性,用來指定當前<wxs></wxs>標簽的模塊名。在單個wxml文件內,建議其值唯一。

<!-- wxml -->

<wxs module="foo">
var msg = "hello word"
module.exports = {
    msg
}
</wxs>

<view>{{foo.msg}}</view>

 

外聯wxs腳本:

wxs代碼可以編寫在以.wxs為后綴的問價內,就像js一樣可以編寫在.js文件中一樣。

//  pages/home/tools.wxs

var foo = "hello word"
var bar = function () {
    console.log(foo)
}

module.exports = {
    foo:foo,
    bar: bar  
}

module.exports.msg = "abc123"

 

在wxml中引入外聯的wxs腳本:

在wxml中引入外聯wxs腳本,必須要為<wxs></wxs> 標簽添加 module 和src屬性。,s r c必須是相對路徑

// pages/index/index.wxml

<wxs src="../tools.wxs" module = "tools" />

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM