小程序之脚本语言

WXS(WeiXin Script)

与 javascript 是不同的语言,有自己的语法,并不和 javascript 一致。

运行环境和其他 javascript 代码是隔离的,wxs中不能调用其他 javascript 文件中定义的函数,也 不能调用 小程序提供的API。
wxs 函数不能作为组件的事件回调


页面渲染
<!--wxml--> <wxs module= "m1" > var msg = "hello world";module.exports.message = msg; </wxs> <view> {{m1.message}} </view>
页面输出:
hello world




数据处理
// page.js Page({ data: { array: [ 1 , 2 , 3 , 4 , 5 , 1 , 2 , 3 , 4 ] }})
<!--wxml--> <!-- 下面的 getMax 函数,接受一个数组,且返回数组中最大的元素的值 --> <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 函数,参数为 page.js 里面的 array --> <view> {{m1.getMax(array)}} </view>
页面输出:
5

WXS 模块
可以编写在 wxml 文件中的  <wxs>  标签内,或以  .wxs  为后缀名的文件内。
每一个  .wxs  文件和  <wxs>  标签都是一个单独的模块。
在一个模块里面定义的变量与函数,默认为私有的,对其他模块不可见。
一个模块要想对外暴露其内部的私有变量与函数, 只能 通过  module.exports  实现。




// /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 属性,对外共享本模块的私有变量与函数。

// /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  函数。
引用的时候,要注意如下几点:
  • 只能引用 .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.wxslogic.wxssome 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 函数,且参数为 some_comms 模块里面的 foo --> <view> {{some_comms.bar(some_comms.foo)}} </view> <!-- 调用 some_comms 模块里面的 bar 函数,且参数为 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 === undefined

wxs注释
// 方法一:单行注释/*方法二:多行注释*/


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 数字: 语句; 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


数据类型
  • number : 数值
  • string :字符串
  • boolean:布尔值
  • object:对象
  • function:函数
  • array : 数组
  • date:日期
  • regexp:正则
object 是一种无序的键值对
//生成一个新的非空对象 o = { 'string' : 1 , //object 的 key 可以是字符串 const_var : 2 , //object 的 key 也可以是符合 变量定义规则 的标识符 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 同时也支持以下的语法(匿名函数,闭包等):
var a = function ( x ) { return function () { return x;}} var b = a( 100 ); console .log( 100 === b() );



生成 date 对象需要使用  getDate 函数, 返回一个当前时间的对象。
生成 regexp 对象需要使用  getRegExp 函数。

数据类型的判断可以使用  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  也可以区分部分数据类型。

JSON库
  • stringify(object): 将 object 对象转换为 JSON 字符串,并返回该字符串。
  • parse(string): 将 JSON 字符串转化成对象,并返回该对象。

console .log( "111" === JSON .stringify( 111 ));



与 CSS 相比,WXSS 扩展的特性有:
  • 尺寸单位
  • 样式导入

尺寸单位
  • rpx(responsive pixel): 可以根据屏幕宽度进行自适应。规定屏幕宽为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 语句可以导入 外联样式表 @import 后跟需要导入的外联样式表的 相对路径 ,用 ; 表示语句结束。
示例代码:
/** common.wxss **/ .small-p { padding : 5px ;}
/** app.wxss **/ @import "common.wxss" ;.middle-p { padding : 15px ;}

内联样式
框架组件上支持使用 style、class 属性 来控制组件的样式。
  • style:静态的样式统一写到 class 中。style 接收动态的样式,在运行时会进行解析,请尽量避免将静态的样式写进 style 中,以免影响渲染速度。
<view style= "color:{{color}};" />

  • class:用于指定样式规则,其属性值是样式规则中类选择器名(样式类名)的集合,样式类名不需要带上. 样式类名之间用空格分隔。
<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 中相同的选择器。
本站公众号
   欢迎关注本站公众号,获取更多程序园信息
开发小院