微信官方文档:https://developers.weixin.qq.com/miniprogram/dev/reference/
wxml语法:
数据绑定
<!--wxml-->
<view>{{message}}</view>
// page.js
Page({
data: {
message: 'Hello MINA!'
}
})
列表渲染
<!--wxml-->
<view wx:for="{{array}}">{{item}}</view>
// page.js
Page({
data: {
array: [1, 2, 3, 4, 5]
}
})
条件渲染
<!--wxml-->
<view wx:if="{{view == 'WEBVIEW'}}">WEBVIEW</view>
<view wx:elif="{{view == 'APP'}}">APP</view>
<view wx:else="{{view == 'MINA'}}">MINA</view>
// page.js
Page({
data: {
view: 'MINA'
}
})
模板
<!--wxml-->
<template name="staffName">
<view>
FirstName: {{firstName}},LsatName: {{LastName}}
</view>
</template>
<template is="staffName" data="{{...staffA}}"></template>
<template is="staffName" data="{{...staffB}}"></template>
<template is="staffName" data="{{...staffC}}"></template>
// page.js
Page({
data: {
staffA: {firstName: 'Hulk', lastName: 'Hu'},
staffB: {firstName: 'Shang', lastName: 'You'},
staffC: {firstName: 'Gideon', lastName: 'Lin'}
}
})
wxs语法:
.wxs文件
var foo = "'hello world' from comm.wxs";
var bar = function(d) {
return d;
}
module.exports = {
foo: foo,
bar: bar
}
.wxs文件可以被其他的 .wxs 文件 或 WXML 中的 标签引用。
moudule对象:
每个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
require函数:
在.wxs模块中引用其他 wxs 文件模块,可以使用 require 函数。
示例代码:
// /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 当前 标签的模块名。必填字段。
src 引用 .wxs 文件的相对路径。
module示例代码:
<wxs module="foo">
var some_msg = "hello world";
module.exports = {
msg : some_msg,
}
</wxs>
<view>{{foo.msg}}</view>
页面输出:
hello world
src示例代码:
page({
data: {
msg: "'hello world' 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 world' from js
变量
wxs中的变量均为值的引用。
var foo = 1;
var bar = "hello worl";
var i; // i === undefined
不能使用的变量名,保留字符:
delete void typeof
null undefined NaN Infinity var
if else
true false
require
this function arguments return
for while do break continue switch case default
注释
1.单行注释
2.多行注释
3.结尾注释
<!-- wxml -->
<wxs module="sample">
// 方法一:单行注释
/*
方法二:多行注释
*/
/*
方法三:结尾注释。即从 /* 开始往后的所有 WXS 代码均被注释
var a = 1;
var b = 2;
var c = "fake";
</wxs>
运算符
基本运算符:
示例代码:
var a = 10, b = 20;
// 加法运算
console.log(30 === a + b);
// 减法运算
console.log(-10 === a - b);
// 乘法运算
console.log(200 === a * b);
// 除法运算
console.log(0.5 === a / b);
// 取余运算
console.log(10 === a % b);
加法运算(+)也可以用作字符串的拼接。
var a = '.w' , b = 'xs';
// 字符串拼接
console.log('.wxs' === a + b);
一元运算符:
特点:否运算,delete运算,void运算,typeof运算
var a = 10, b = 20;
// 自增运算
console.log(10 === a++);
console.log(12 === ++a);
// 自减运算
console.log(12 === a--);
console.log(10 --- --a);
// 正值运算
console.log(10 === +a);
// 负值运算
console.log(0-10 === -a);
// 否运算
console.log(-11 === ~a);
// 取反运算
console.log(false === !a);
// delete运算
console.log(true === delete a.fake);
// void运算
console.log(undefined === void a);
// typeof运算
console.log("number" === typeof a);
位运算符TODO:
示例代码:
var a = 10, b = 10;
// 左移运算
console.log(80 === (a << 3));
// 带符号右移运算
console.log(2 === (a >> 2));
// 无符号右移运算
console.log(2 === (a >>> 2));
// 与运算
console.log(2 === (a & 3));
// 异或运算
console.log(9 === (a ^ 3));
// 或运算
console.log(11 === (a | 3));
比较运算符:
示例代码:
var a = 10, b = 20;
// 小于
console.log(true === (a < b));
// 大于
console.log(false === (a > b));
// 小于等于
console.log(true === (a <= b));
// 大于等于
console.log(false === (a >= b));
等值运算符:
示例代码:
var a = 10, b = 20;
// 等号
console.log(false === (a === b));
// 非等号
console.log(true === (a != b));
// 全等号
console.log(false === (a === b));
// 非全等号
console.log(true === (a !== b));
赋值运算符TODO:
示例代码:
var a = 10, b = 20;
a = 10; a *= 10;
console.log(100 === a);
a = 10; a /= 5;
console.log(2 === a);
a = 10; a %= 7;
console.log(3 === a);
a = 10; a += 5;
console.log(15 === a);
a = 10; a -= 11;
console.log(-1 === a);
a = 10; a <<= 10;
console.log(10240 === a);
a = 10; a >>= 2;
console.log(2 === a);
a = 10; a >>>= 2;
console.log(2 === a);
a = 10; a &= 3;
console.log(2 === a);
a = 10; a^= 3;
console.log(9 === a);
a = 10; a |= 3;
console.log(11 === a);
二元逻辑运算符:
示例代码:
var a = 10, b = 20;
// 逻辑与
console.log(20 === (a && b));
// 逻辑或
conosle.log(10 == (a || b));
其他运算符:
示例代码
var a = 10, b = 20;
// 条件运算符
console.log(20 === (a >= 10 ? a + 10 : b + 10));
// 逗号运算符
console.log(20 === (a, b));
运算符优先级:
微信文档:运算符优先级
语句
if语句:
示例语法:
// if ...
if (表达式) 语句;
if (表达式)
语句;
if (表达式) {
代码块;
}
// if ... else
if (表达式) 语句;
else 语句;
if (表达式)
语句;
else
语句;
if (表达式) {
代码块;
} else {
代码块;
}
// if ... else if ... else ...
if (表达式) {
代码块;
} else if (表达式) {
代码块;
} else if (表达式) {
代码块;
} else {
代码块;
}
switch语句:
示例语法:
switch (表达式) {
case 变量:
语句;
case 数字:
语句;
break;
case 字符串:
语句;
default:
语句;
}
default分支可以省略不写。case关键词后面只能使用:变量,数字,字符串。
示例代码:
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
for语句:
示例语法:
for (语句; 语句; 语句)
语句;
for (语句; 语句; 语句) {
代码块;
}
支持使用break,continue关键词。
示例代码:
for (var i = 0; i < 3; ++i) {
console.log(i);
if (i >= 1) break;
}
输出:
0
1
while语句:
示例语法:
while (表达式)
语句;
while (表达式) {
代码块;
}
do {
代码块;
} while (表达式)
当表达式为true时,循环执行语句或代码块。支持使用break,continue关键词。
数据类型
number:数值,string:字符串,boolean:布尔值,object:对象,function:函数,array:数组,date:日期,regexp:正则
number:
语法:
number包括两种数值:整数,小数。
var a = 10;
var PI = 3.141592653589793;
属性:
constructor:返回字符串"Number"。
方法:
toString,toLocaleString,valueOf,toFixed,toExponential,toPrecision
string:
语法:
string有两种写法:
'hello world';
"hello world";
属性:
constructor:返回字符串"String"。length
方法:
toString,valueOf,charAt,charCodeAt,concat,indexOf,lastIndexOf,localeCompare,match,replace, search,slice,split,substring,toLowerCase,toLocaleLowerCase,toUpperCase,toLocaleUpperCase,trim
boolean:
语法:
布尔值只有两个特定的值:true和false。
属性:
constructor:返回字符串"Boolean"。
方法:
toString,valueOf
object:
语法:
object是一种无序的键值对。
var o = {} // 生成一个新的空对象
// 生成一个新的非空对象
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;
// 对象属性的读操作
console.log(12 === o['string']);
console.log(13 === o.const_var);
属性
constructor:返回字符串"Object"。
console.log("Object" === {k:"1",v:"2"}.constructor)
方法
toString:返回字符串"[object Object]"。
function:
语法
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()));
arguments
function里面可以使用arguments关键词。该关键词目前只支持以下的属性:
length:传递给函数的参数个数。[index]:通过index下标可以遍历传递给函数的每个参数。
示例代码:
var a = function() {
console.log(2 === arguments.length);
console.log(100 === arguments[0]);
console.log(200 === arguments[1]);
console.log(300 === arguments[2]);
};
a(100, 200, 300);
属性
constructor:返回字符串"Function"。length:返回函数的形参个数。
方法
toString:返回字符串"[function Function]"
示例代码
var func = function (a, b, c) {
console.log("Function" === func.constructor);
console.log(3 === func.length);
console.log("[function Function]" === func.toString());
}
array:
语法
array支持以下的定义方式:
var a = []; // 生成一个新的空数组
a = [1, "2", {}, function(){}]; // 生成一个新的非空数组,数组元素可以是任何类型
属性
constructor:返回字符串"Array"。length
方法
toString,concat,join,pop,push,reverse,shift,slice,sort,splice,unshift,indexOf,lastIndexOf,every,some,forEach,map,filter,reduce,reduceRight
date:
语法
生成date对象需要使用getDate函数,返回一个当前时间的对象。
getDate()
getDate(milliseconds)
getDate(datestring)
getDate(year, month[, date[, hours[, minutes[, seconds[, milliseconds]]]]])
参数
milliseconds:从1970年1月1日00:00:00 UTC开始计算的毫秒数。datestring:日期字符串,其格式为:“month day, year hours:minutes:seconds”。
示例代码
var date = getDate(); // 返回当前时间对象
date = getDate(1500000000000); // 1,500,000,000,000
// Fri Jul 14 2017 10:40:00 GMT+0800 (中国标准时间)
date = getDate('2017-7-14');
// Fri Jul 14 2017 00:00:00 GMT+0800 (中国标准时间)
date = getDate(2017, 6, 14, 10, 40, 0, 0);
// Fri Jul 14 2017 10:40:00 GMT+0800 (中国标准时间)
属性
constructor:返回字符串"Date"。
方法
toString,toDateString,toTimeString,toLocaleString,toLocaleDateString,toLocaleTimeString,valueOf,getTime,getFullYear,getUTCFullYear,getMonth,getUTCMonth,getDate,getUTCDate,getDay,getUTCDay,getHours,getUTCHours,getMinutes,getUTCminutes,getSeconds,getUTCSeconds,getMilliseconds,getUTCMilliseconds,getTimezoneOffset,setTime,setMilliseconds,setUTCMilliseconds,setSeconds,setUTCSeconds,setMinutes,setUTCMinutes,setHours,setUTCHours,setDate,setUTCDate,setMonth,setUTCMonth,setFullYear,setUTCFullYear,toUTCString,toISOString,toJSON
regexp:
语法
生成regexp对象需要使用getRegExp函数。
getRegExp(pattern[, flags])
参数
pattern:正则表达式的内容。flags:修饰符。该字段只能包含以下字符:g:global,i:ignoreCase,m:multiline。
示例代码
var a = getRegExp("x", "img");
console.log("x" === a.source);
console.log(true === a.global);
console.log(true === a.ignoreCase);
console.log(true === a.multiline);
属性
constructor:返回字符串"RegExp"。source,global,ignoreCase,multiline,lastIndex。
方法
exec,test,toString
数据类型判断:
constructor属性
数据类型的判断可以使用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
使用typeof也可以区分部分数据类型。
示例代码
var number = 10;
var boolean = true;
var object = {};
var func = function(){};
var array = [];
var date = getDate();
var regexp = getRegExp();
console.log('number' === typeof number);
console.log('boolean' === typeof boolean);
console.log('object' === typeof object);
console.log('function' === typeof func);
console.log('object' === typeof array);
console.log('object' === typeof date);
console.log('object' === typeof regexp);
console.log('undefined' === typeof undefined);
console.log('object' === typeof null);
基础类库
console:
console.log方法用于在console窗口输出信息。它可以接受多个参数,将他们的结果连接起来输出。
Math
属性
E,LN10,LN2,LOG2E,LOG10E,PI,SQRT1_2,SQRT2
方法
abs,acos,asin,atan,atan2,ceil,cos,exp,floor,log,max,min,pow,random,round,sin,sqrt,tan
JSON
方法
stringify(object):将object对象转换为JSON字符串,并返回该字符串。parse(string):将JSON字符串转化成对象,并返回该对象。
示例代码
console.log(undefined === JSON.stringify());
console.log(undefined === JSON.stringify(undefined));
console.log("null" === JSON.stringify(null));
console.log("111" === JSON.stringify(111));
console.log('"111"' === JSON.stringify("111"));
console.log("true" === JOSN.stringify(true));
console.log(undefined === JSON.stringify(function(){}));
console.log(undefined === JSON.parse(JSON.stringify()));
console.log(undefined === JSON.parse(JSON.stringify(undefined)));
console.log(null === JSON.parse(JSON.stringify(null)));
console.log(undefined === JSON.parse(JSON.stringify(function(){})));
Number
属性
MAX_VALUE,MIN_VALUE,NEGATIVE_INFINITY,POSITIVE_INFINITY
Date
属性
parse,UTC,now
Global
属性
NaN,Infinity,undefined
方法
parseInt,parseFloat,isNaN,isFinite,decodeURI,decodeURIComponent,encodeURI,encodeURIComponent