微信小程序学习总结(二)
一.JavaScript
是一种轻量的, 解释型的,面向对象的头等函数语言,是一种动态的基于原型和多范式的脚本语言,支持面向对象,命令式和函数式编程风格
小程序中的JavaScript
ECMAScriopt 小程序框架 小程序API 没有DOM和BOM
ECMAScriopt 语法 类型 语句 关键字 操作符 对象
小程序运行环境差异
IOS JavaScript android X5内核 IDE nwjs
二.WXS(WeiXin JaveScript)
1.模块
<!-- index.wxml -->
<wxs module="m1">
module.exports = {
message: "Hello World"
}
</wxs>
<view>{{m1.message}}</view>
<!-- index.wxml -->
<wxs src="./m2.wxs" module="m2"></wxs>
<view>
{{m2.message}}
</view>
// m2.wxs
module.exports = require('./m1.wxs')
// m1.wxs
moudle.exports = {
message: 'hello World'
}
注意: 同一个文件内不要重复引用wxs后面的会替换前面的
2.变量
①.WXS 中的变量均为值的引用
②.没有声明的变量直接赋值使用，会被定义为全局变量
③.如果只声明变量而不赋值，则默认值为 undefined
④.var表现与javascript一致，会有变量提升
⑤变量命名必须符合下面两个规则：
首字符必须是：字母（a-zA-Z），下划线 _
剩余字符可以是：字母（a-zA-Z），下划线 _， 数字（0-9）
3.注释
// 单行注释
/* 多行注释 /
/ 结尾注释
4. 运算符
①基本运算符
+ - * / %
②一元运算符
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);
③位运算符
var a = 10, b = 20;
// 左移运算
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));
④比较运算符
> < <= >=
⑤运算符
== != === !==
⑥ 赋值运算符
*= /= %= += -= <<= >>= <<<= >>>= &= ^= |=
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));
// 逻辑或
console.log(10 === (a || b));
⑧其他运算符
var a = 10, b = 20;
//条件运算符
console.log(20 === (a >= 10 ? a + 10 : b + 10));
//逗号运算符
console.log(20 === (a, b));
5.语句
if 判断语句
if else
if else if else
switch 判断语句
switch (表达式) {
case 变量:
语句;
case 数字:
语句;
break;
case 字符串:
语句;
default:
语句;
}
for循环
while循环
while (表达式){
代码块;
}
do {
代码块;
} while (表达式)
当表达式为true时, 循环执行语句 支持使用break, continue关键词
6.数据类型
①number ： 数值
属性: constructor：返回字符串 "Number"
方法: toString
toLocaleString
valueOf
toFixed
toExponential
toPrecision
②string ：字符串
属性: constructor：返回字符串 "String" length
方法: toString
valueOf
charAt
charCodeAt
concat
indexOf
lastIndexOf
localeCompare
match
replace
search
slice
split
substring
toLowerCase
toLocaleLowerCase
toUpperCase
toLocaleUpperCase
trim
③boolean：布尔值
属性: constructor：返回字符串 "Boolean"
方法: toString valueOf
④object：对象
属性: constructor：返回字符串 "Object"
方法: toString：返回字符串 "[object Object]"
⑤ function：函数
function 里面可以使用 arguments 关键词。该关键词目前只支持以下的属性：
length: 传递给函数的参数个数
[index]: 通过 index 下标可以遍历传递给函数的每个参数
var a = function(){
console.log(3 === 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]"
⑥array : 数组
属性: constructor：返回字符串 "Array" length
方法: toString
concat
join
pop
push
reverse
shift
slice
sort
splice
unshift
indexOf
lastIndexOf
every
some
forEach
map
filter
reduce
reduceRight
⑦date：日期
参数: milliseconds: 从1970年1月1日00:00:00 UTC开始计算的毫秒数
datestring: 日期字符串，其格式为："month day, year hours:minutes:seconds"
getDate()
getDate(milliseconds)
getDate(datestring)
getDate(year, month[, date[, hours[, minutes[, seconds[, milliseconds]]]]])
⑧regexp：正则
语法: 生成 regexp 对象需要使用 getRegExp函数
getRegExp(pattern[, flags])
参数: pattern: 正则表达式的内容。
flags：修饰符。该字段只能包含以下字符:
g: global
i: ignoreCase
m: multiline
属性:
constructor：返回字符串 "RegExp"。
source
global
ignoreCase
multiline
lastIndex
方法:
exec
test
toString
7.基础类库
① 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 字符串转化成对象，并返回该对象。
④.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
三.MINA框架
由视图层 逻辑层 系统层组成
四.小程序运行机制
启动方式有两种
冷启动: 用户首次打开或程序被微信销毁后再次打开
销毁条件:
1.当小程序进入后台一段时间后(5min),自动销毁
2.当微信短时间内(5s)收到两次系统报警时,主动销毁
热启动: 当有新版本时, 微信将异步下载, 并同时用旧版本启动, 下次启动新版本生效
五.小程序生命周期
1. 小程序应用生命周期
onLaunch 生命周期回调—监听小程序初始化 小程序初始化完成时（全局只触发一次）
onShow 生命周期回调—监听小程序显示 小程序启动，或从后台进入前台显示时
onHide 生命周期回调—监听小程序隐藏 小程序从前台进入后台时
onError 错误监听函数 小程序发生脚本错误，或者 api 调用失败时触发，会带上错误信息
onPageNotFound 页面不存在监听函数 小程序要打开的页面不存在时触发，会带上页面信息回调该函数
2.小程序页面生命周期
onload 初始化页面
onShow 页面显示
onReady 页面更新
onHide 页面隐藏
onUnload 页面销毁