微信小程序-代码基础（javascript,wxml,wxss）

javascript

tips

问题	解决
判断一个object为空	JSON.stringify(eve)==’{}’

文档

• 官方文档：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference
• • got 第三方库：https://github.com/sindresorhus/got

结构

ECMA-262 规定了 ECMAScript 语言的几个重要组成部分：

• 语法
• 类型
• 语句
• 关键字
• 操作符
• 对象
  

async、await

参考： https://blog.liuzuann.com/article?title=js-async-await
await:

• 只能放在async函数内部使用，不能放在普通函数里面，否则会报错。
  后面放Promise对象，在Pending状态时，相应的协程会交出控制权，进入等待状态。这个是本质。
• await是async wait的意思，wait的是resolve(data)消息，并把数据data返回。比如，下面代码中，当Promise对象由Pending变为Resolved的时候，变量a就等于data；然后再顺序执行下面的语句console.log(a);

const a = await new Promise((resolve, reject) => {
    // async process ...
    return resolve(data);
});
console.log(a);

• await后面也可以跟同步代码，不过系统会自动转化成一个Promise对象。
  const a = await ‘hello world’; 相当于
  const a = await Promise.resolve(‘hello world’);

async

• 有了这个async关键字，只是表明里面可能有异步过程，里面可以有await关键字。当然，全部是同步代码也没关系。当然，这时候这个async关键字就显得多余了。不是不能加，而是不应该加。
• async函数，如果里面有异步过程，会等待； 但是async函数本身会马上返回，不会阻塞当前线程。

promise

参考：https://www.cnblogs.com/sunzhao/p/8418796.html

Promise对象有以下两个特点。

（1）对象的状态不受外界影响。Promise对象代表一个异步操作，有三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败）。只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态。这也是Promise这个名字的由来，它的英语意思就是“承诺”，表示其他手段无法改变。

（2）一旦状态改变，就不会再变，任何时候都可以得到这个结果。Promise对象的状态改变，只有两种可能：从pending变为fulfilled和从pending变为rejected。只要这两种情况发生，状态就凝固了，不会再变了，会一直保持这个结果，这时就称为 resolved（已定型）。如果改变已经发生了，你再对Promise对象添加回调函数，也会立即得到这个结果。这与事件（Event）完全不同，事件的特点是，如果你错过了它，再去监听，是得不到结果的。

new Promise((resolve, reject) => { });
其中resolve，reject 是两个函数，由 JavaScript 引擎提供，不用自己部署

• resolve函数的作用是，将Promise对象的状态从“未完成”变为“成功”（即从 pending 变为 resolved），在异步操作成功时调用，并将异步操作的结果，作为参数传递出去；
• reject函数的作用是，将Promise对象的状态从“未完成”变为“失败”（即从 pending 变为 rejected），在异步操作失败时调用，并将异步操作报出的错误，作为参数传递出去。

• .then(resolveCallback, rejectCallback) then方法可以接受两个回调函数作为参数。第一个回调函数是Promise对象的状态变为resolved时调用，第二个回调函数是Promise对象的状态变为rejected时调用。其中，第二个函数是可选的，不一定要提供。这两个函数都接受Promise对象传出的值作为参数。

function timeout(ms) {
  return new Promise((resolve, reject) => {
    setTimeout(resolve, ms, 'done');
  });
}

timeout(100).then((value) => {
  	console.log(value);
},
(err) => {
	console.error(err);
});

• .catch(error => console.log(error)) 只处理 reject 状态

匿名函数

• 第一种res=>{...}
• 第二种function(res){...}

模块化

// moduleA.js
module.exports = function( value ){
  return value * 2;
}
// 在B.js中引用模块A
var multiplyBy2 = require('./moduleA')
var result = multiplyBy2(4)
// 使用公共模块
var common = require('common.js')
Page({
  helloMINA: function() {
    common.sayHello('MINA')
  },
  goodbyeMINA: function() {
    common.sayGoodbye('MINA')
  }
})

作用域

• 局部变量
  在文件中声明的变量和函数只在该文件中有效，不同的文件中可以声明相同名字的变量和函数，不会互相影响
• 全局变量

// app.js, 定义全局变量
App({
  globalData: 1
})
// b.js
// 访问全局变量
var global = getApp()
console.log(global.globalValue) // 输出 globalValue

WXML

WXSS

• 尺寸单位：rpx（responsive pixel）
• 引用另一个样式文件：@import './test_0.wxss'
• 内联样式

<view style="color: red; font-size: 48rpx">view>

<view style="color: {{eleColor}}; font-size: {{eleFontsize}}">view>

• 选择器
  
  相应的优先级和权重：
  
  权重越高越优先。在优先级相同的情况下，后设置的样式优先级高于先设置的样式。

/* // 权重为 1 */
/* 元素选择器 */
view{    
  color: blue
}
/*  权重为 10 */
/* 类选择器 */
.mButtonClass{ 
  color: red
}
/*  权重为 100 */
/* id选择器 */
#button2id{ 
  color: pink
}

/*  权重为 1 + 100 = 101，优先级最高，元素颜色为orange */
button#button2id{ 
  color: orange
}

/* 权重为 1 + 10 = 11 */
button.mButtonClass{
  color: green
}