微信小程序——学习笔记（三）视图层（1）

WXS—(WeiXin Script)是小程序特有的一套脚本语言。wxs有自己的语法，今天就学习一下wxs的语法。

1) wxs代码可以编写在wxml文件中的标签内，或者是XXX.wxs的文件内。不管是标签还是文件都是一个单独的模块。

2) 每个模块里面定义的变量与函数都默认为私有，只能通过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";

3) 如果想在wxs模块中引用其他wxs文件模块，使用require函数。

// /pages/logic.wxs

var tools = require("./tools.wxs");

console.log(tools.FOO);
console.log(tools.bar("logic.wxs"));
console.log(tools.msg);

变量：

• 没有声明的变量直接赋值使用，会被定义为全局变量。
• 如果只声明变量而不赋值，则默认值为 undefined。
• var表现与javascript一致，会有变量提升。

变量名：

• 首字符必须是：字母（a-zA-Z），下划线（_）
• 剩余字符可以是：字母（a-zA-Z），下划线（_）， 数字（0-9）

注释：

// 方法一：单行注释

/*
方法二：多行注释
*/

/*
方法三：结尾注释。即从 /* 开始往后的所有 WXS 代码均被注释

运算符：

1>基本运算符：'+' ,'-' ,'*' ,'/' ,'%'.

2>一元运算符：'++' , '--' , '~', '!' , 'delete', 'void','typeof'.

3>位运算符：<<,>>,>>>,&,^,|.

3>比较运算符：>=,<=,>,<.

5>等值运算符：==,!=,===,!==.

6>赋值运算符：=

7>二元运算符：&&,||.

语句：

(if,switch,for,while)

数据类型：

• number ： 数值
• string ：字符串
• boolean：布尔值
• object：对象
• function：函数
• array : 数组
• date：日期
• regexp：正则

基本类库：

1>Console.log方法用于在console窗口输出信息。它可以接受多个参数，将它们的结果连接起来输出。

2>Math

3>Json

4>Number

5>Date

6>Global

Wxss——相当于web里面的css.是一套样式语言，用于描述 WXML 的组件样式。

Wxss 具有Css大部分特性，又对Css进行了扩充以及修改，扩展的特性有：

尺寸单位:1px=2rpx=2物理像素

样式导入:使用@import语句可以导入外联样式表，在@import后加上需要导入的外联样式表的相对路径。

@import "common.wxss";
.middle-p {
  padding:15px;
}