WXS（WeiXin Script）與 javascript 是不同的語言，有自己的語法，并不和 javascript 一致。運行環(huán)境和其他 javascript 代碼是隔離的,wxs中不能調用其他 javascript 文件中定義的函數(shù)，也不能調用小程序提供的API。wxs 函數(shù)不能作為組件的事件回調頁面渲染<!--wxml--> <wxs module="m1"> var msg = "hello world"; module.exports.message = msg; </wxs> <view> {{m1.message}} </view> 頁面輸出：hello world數(shù)據(jù)處理// page.js Page({ data: { array: [1, 2, 3, 4, 5, 1, 2, 3, 4] } }) <!--wxml--> <!-- 下面的 getMax 函數(shù)，接受一個數(shù)組，且返回數(shù)組中最大的元素的值 --> <wxs module="m1"> var getMax = function(array) { var max = undefined; for (var i = 0; i < array.length; ++i) { max = max === undefined ? array[i] : (max >= array[i] ? max : array[i]); } return max; } module.exports.getMax = getMax; </wxs> <!-- 調用 wxs 里面的 getMax 函數(shù)，參數(shù)為 page.js 里面的 array --> <view> {{m1.getMax(array)}} </view> 頁面輸出：5WXS 模塊可以編寫在 wxml 文件中的?<wxs>?標簽內，或以?.wxs?為后綴名的文件內。每一個?.wxs?文件和?<wxs>?標簽都是一個單獨的模塊。在一個模塊里面定義的變量與函數(shù)，默認為私有的，對其他模塊不可見。一個模塊要想對外暴露其內部的私有變量與函數(shù)，只能通過?module.exports?實現(xiàn)。// /pages/comm.wxs var foo = "'hello world' from comm.wxs"; var bar = function(d) { return d; } module.exports = { foo: foo, bar: bar }; 每個?wxs?模塊均有一個內置的?module?對象。 可以通過其exports屬性，對外共享本模塊的私有變量與函數(shù)。// /pages/tools.wxs var foo = "'hello world' from tools.wxs"; var bar = function (d) { return d; } module.exports = { FOO: foo, bar: bar, }; module.exports.msg = "some msg"; <!-- page/index/index.wxml --> <wxs src="./../tools.wxs" module="tools" /> <view> {{tools.msg}} </view> <view> {{tools.bar(tools.FOO)}} </view> 頁面輸出：some msg 'hello world' from tools.wxs.wxs?文件可以被其他的?.wxs?文件 或 WXML 中的?<wxs>?標簽引用。wxs模塊中引用其他?wxs?文件模塊，可以使用?require?函數(shù)。引用的時候，要注意如下幾點：

• 只能引用?.wxs?文件模塊，且必須使用相對路徑。
• wxs?模塊均為單例，wxs?模塊在第一次被引用時，會自動初始化為單例對象。多個頁面，多個地方，多次引用，使用的都是同一個?wxs?模塊對象。

// /pages/tools.wxs var foo = "'hello world' from tools.wxs"; var bar = function (d) { return d; } module.exports = { FOO: foo, bar: bar, }; module.exports.msg = "some msg"; // /pages/logic.wxs var tools = require("./tools.wxs"); console.log(tools.FOO); console.log(tools.bar("logic.wxs")); console.log(tools.msg); <!-- /page/index/index.wxml --> <wxs src="./../logic.wxs" module="logic" /> 控制臺輸出：'hello world' from tools.wxs logic.wxs some msg<wxs>?標簽

屬性名	說明
module	當前 <wxs> 標簽的模塊名。必填字段。
src	引用 .wxs 文件的相對路徑。 僅當本標簽為單閉合標簽或標簽的內容為空時有效。

其中：module 屬性是當前?<wxs>?標簽的模塊名。在單個 wxml 文件內，建議其值唯一。有重復模塊名則按照先后順序覆蓋（后者覆蓋前者）。不同文件之間的 wxs 模塊名不會相互覆蓋。<!--wxml--> <wxs module="foo"> var some_msg = "hello world"; module.exports = { msg : some_msg, } </wxs> <view> {{foo.msg}} </view> 頁面輸出：hello world 上面例子聲明了一個名字為?foo?的模塊，將?some_msg?變量暴露出來，供當前頁面使用。src 屬性可以用來引用其他的?wxs?文件模塊。引用的時候，要注意如下幾點：

• 只能引用?.wxs?文件模塊，且必須使用相對路徑。
• wxs?模塊均為單例，wxs?模塊在第一次被引用時，會自動初始化為單例對象。多個頁面，多個地方，多次引用，使用的都是同一個?wxs?模塊對象。

// /pages/index/index.js Page({ data: { msg: "'hello wrold' from js", } }) <!-- /pages/index/index.wxml --> <wxs src="./../comm.wxs" module="some_comms"></wxs> <!-- 也可以直接使用單標簽閉合的寫法 <wxs src="./../comm.wxs" module="some_comms" /> --> <!-- 調用 some_comms 模塊里面的 bar 函數(shù)，且參數(shù)為 some_comms 模塊里面的 foo --> <view> {{some_comms.bar(some_comms.foo)}} </view> <!-- 調用 some_comms 模塊里面的 bar 函數(shù)，且參數(shù)為 page/index/index.js 里面的 msg --> <view> {{some_comms.bar(msg)}} </view> 頁面輸出：'hello world' from comm.wxs 'hello wrold' from js 注意

• <wxs>?模塊只能在定義模塊的 WXML 文件中被訪問到。使用?<include>?或?<import>?時，<wxs>?模塊不會被引入到對應的 WXML 文件中。
• <template>?標簽中，只能使用定義該?<template>?的 WXML 文件中定義的?<wxs>?模塊。

---

變量變量均為值的引用。沒有聲明的變量直接賦值使用，會被定義為全局變量。如果只聲明變量而不賦值，則默認值為?undefined。var foo = 1; var bar = "hello world"; var i; // i === undefinedwxs注釋// 方法一：單行注釋 /* 方法二：多行注釋 */

---

var a = 10, b = 20;// typeof 運算 console.log("number" === typeof a);// 等號 ==// 全等號 console.log(false === (a === b)); // 非全等號 console.log(true === (a !== b));//逗號運算符 console.log(20 === (a, b));

---

if (表達式) { 代碼塊; } else if (表達式) { 代碼塊; } else if (表達式) { 代碼塊; } else { 代碼塊; }switch (表達式) { case 變量: 語句; case 數(shù)字: 語句; break; case 字符串: 語句; default: 語句; }如var exp = 10; switch ( exp ) { case "10": console.log("string 10"); break; case 10: console.log("number 10"); break; case exp: console.log("var exp"); break; default: console.log("default"); } 輸出：number 10

---

數(shù)據(jù)類型

• number?： 數(shù)值
• string?：字符串
• boolean：布爾值
• object：對象
• function：函數(shù)
• array?: 數(shù)組
• date：日期
• regexp：正則

object 是一種無序的鍵值對//生成一個新的非空對象 o = { 'string' : 1, //object 的 key 可以是字符串 const_var : 2, //object 的 key 也可以是符合變量定義規(guī)則的標識符 func : {}, //object 的 value 可以是任何類型 }; //對象屬性的讀操作 console.log(1 === o['string']); console.log(2 === o.const_var); //對象屬性的寫操作 o['string']++; o['string'] += 10; o.const_var++; o.const_var += 10; function 支持以下的定義方式：//方法 1 function a (x) { return x; } //方法 2 var b = function (x) { return x; } function 同時也支持以下的語法（匿名函數(shù)，閉包等）：var a = function (x) { return function () { return x;} } var b = a(100); console.log( 100 === b() );生成 date 對象需要使用?getDate函數(shù), 返回一個當前時間的對象。生成 regexp 對象需要使用?getRegExp函數(shù)。數(shù)據(jù)類型的判斷可以使用?constructor?屬性。var number = 10; console.log( "Number" === number.constructor ); var string = "str"; console.log( "String" === string.constructor );var boolean = true; console.log( "Boolean" === boolean.constructor ); var object = {}; console.log( "Object" === object.constructor ); var func = function(){}; console.log( "Function" === func.constructor ); var array = []; console.log( "Array" === array.constructor ); var date = getDate(); console.log( "Date" === date.constructor ); var regexp = getRegExp(); console.log( "RegExp" === regexp.constructor );使用?typeof?也可以區(qū)分部分數(shù)據(jù)類型。JSON庫

• stringify(object): 將?object?對象轉換為?JSON?字符串，并返回該字符串。
• parse(string): 將?JSON?字符串轉化成對象，并返回該對象。

console.log("111"===JSON.stringify(111));與 CSS 相比，WXSS 擴展的特性有：

• 尺寸單位
• 樣式導入

尺寸單位

• rpx（responsive pixel）: 可以根據(jù)屏幕寬度進行自適應。規(guī)定屏幕寬為750rpx。

如在 iPhone6 上，屏幕寬度為375px，共有750個物理像素，則750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。

設備	rpx換算px (屏幕寬度/750)	px換算rpx (750/屏幕寬度)
iPhone5	1rpx = 0.42px	1px = 2.34rpx
iPhone6	1rpx = 0.5px	1px = 2rpx
iPhone6 Plus	1rpx = 0.552px	1px = 1.81rpx

建議：?可以用 iPhone6 作為視覺稿的標準。樣式導入使用@import語句可以導入外聯(lián)樣式表，@import后跟需要導入的外聯(lián)樣式表的相對路徑，用;表示語句結束。示例代碼：/** common.wxss **/ .small-p { padding:5px; } /** app.wxss **/ @import "common.wxss"; .middle-p { padding:15px; } 內聯(lián)樣式框架組件上支持使用 style、class 屬性來控制組件的樣式。

• style：靜態(tài)的樣式統(tǒng)一寫到 class 中。style 接收動態(tài)的樣式，在運行時會進行解析，請盡量避免將靜態(tài)的樣式寫進 style 中，以免影響渲染速度。

<view style="color:{{color}};" />

• class：用于指定樣式規(guī)則，其屬性值是樣式規(guī)則中類選擇器名(樣式類名)的集合，樣式類名不需要帶上. 樣式類名之間用空格分隔。

<view class="normal_view" /> 選擇器目前支持的選擇器有：

選擇器	樣例	樣例描述
.class	.intro	選擇所有擁有 class="intro" 的組件
#id	#firstname	選擇擁有 id="firstname" 的組件
element	view	選擇所有 view 組件
element, element	view, checkbox	選擇所有文檔的 view 組件和所有的 checkbox 組件
::after	view::after	在 view 組件后邊插入內容
::before	view::before	在 view 組件前邊插入內容

全局樣式與局部樣式定義在 app.wxss 中的樣式為全局樣式，作用于每一個頁面。在 page 的 wxss 文件中定義的樣式為局部樣式，只作用在對應的頁面，并會覆蓋 app.wxss 中相同的選擇器。

轉載于:https://www.cnblogs.com/elesos/p/8206172.html

總結

以上是生活随笔為你收集整理的小程序之脚本语言的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內容還不錯，歡迎將生活随笔推薦給好友。