Fork me on GitHub

微信小程序开发相关

介绍

布局

flex

display: flex;

  1. 阮一峰 - Flex 布局教程:语法篇
  2. 阮一峰 - Flex 布局教程:实例篇
  3. mozilla.org - 使用 CSS 弹性盒子

容器的属性

  • flex-direction 主轴方向

    row(默认值):主轴为水平方向,起点在左端。
    ​ row-reverse:主轴为水平方向,起点在右端。
    ​ column:主轴为垂直方向,起点在上沿。
    ​ column-reverse:主轴为垂直方向,起点在下沿。

  • flex-wrap 换行样式

    (1)nowrap(默认):不换行。
    ​ (2)wrap:换行,第一行在上方。
    ​ (3)wrap-reverse:换行,第一行在下方。

  • flex-flow flex-directionflex-wrap 简写方式

    默认值为row nowrap

  • justify-content 主轴对齐方式

    flex-start(默认值):左对齐
    ​ flex-end:右对齐
    ​ center: 居中
    ​ space-between:两端对齐 (边上的项目到边框的距离是 0 ),项目之间的间隔都相等。
    ​ space-around:每个项目两侧的间隔相等。所以,项目之间的间隔 是 项目与边框的间隔的 2 倍。

  • align-items 交叉轴/侧轴 对齐方式

    flex-start:交叉轴的起点对齐。
    ​ flex-end:交叉轴的终点对齐。
    ​ center:交叉轴的中点对齐。
    ​ baseline: 项目的第一行文字的基线对齐。
    ​ stretch(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度。

  • align-content 多轴线时,一般是多条交叉轴时,多行项目就有多条交叉轴线相当于交叉轴对齐方式 是对全部的项目的对齐方式。

    ​ flex-start:与交叉轴的起点对齐。
    ​ flex-end:与交叉轴的终点对齐。
    ​ center:与交叉轴的中点对齐。
    ​ space-between:与交叉轴两端对齐,轴线之间的间隔平均分布。
    ​ space-around:每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍。
    ​ stretch(默认值):轴线占满整个交叉轴。

项目的属性

  • order

    order属性定义项目的排列顺序。数值越小,排列越靠前,默认为 0 。

  • flex-grow属性

    flex-grow属性定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大。
    ​ 如果所有项目的flex-grow属性都为1,则它们将等分剩余空间(如果有的话)。
    ​ 如果一个项目的flex-grow属性为2,其他项目都为1,则前者占据的剩余空间将比其他项多一倍。

  • flex-shrink属性

    flex-shrink属性定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。
    ​ 如果所有项目的flex-shrink属性都为1,当空间不足时,都将等比例缩小。
    ​ 如果一个项目的flex-shrink属性为0,其他项目都为1,则空间不足时,前者不缩小。
    ​ 负值对该属性无效。

  • flex-basis属性 (待理解)
    ​ flex-basis属性定义了在分配多余空间之前,项目占据的主轴空间(main size)。
    ​ 浏览器根据这个属性,计算主轴是否有多余空间。它的默认值为auto,即项目的本来大小。
    ​ 它可以设为跟width或height属性一样的值(比如350px),则项目将占据固定空间。

  • flex属性
    ​ flex属性是flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1 auto。后两个属性可选。

    1
    2
    3
    4
    5
    .item {
    flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
    }
    该属性有两个快捷值:auto (1 1 auto) 和 none (0 0 auto)。
    建议优先使用这个属性,而不是单独写三个分离的属性,因为浏览器会推算相关值。
  • align-self属性
    align-self属性允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性。默认值为auto,表示继承父元素的align-items属性,如果没有父元素,则等同于stretch。

    ​ .item {
    ​ align-self: auto | flex-start | flex-end | center | baseline | stretch;
    ​ }
    ​ 该属性可能取6个值,除了auto,其他都与align-items属性完全一致。

position 定位

http://www.runoob.com/css/css-padding.html

position 位置的意思,


  • position: static 默认, 不会被定位,由上下文自动确定其位置
  • position: absolute 绝对定位,向上找到第一个 position 为 relative 的标签为参考,可以使用 top left right bottom 等属性
  • position: relative 相对定位,以自己为参考
  • position: fixed 固定定位

一些实例

单行文本框垂直居中

  • 可以把其 [行高 line-height ] 设置为标签高度即可 line-height: height;

多行文本框垂直居中

CSS样式类型

标签选择器

1
2
3
4
5
/* 标签选择器 */
/* <view></view> */
view {
background-color: #333;
}

类选择器

1
2
3
4
5
/* 类选择器 */
/* <view class="con con"></view> */
.con {
background-color: #333;
}

id选择器

1
2
3
4
5
/* id选择器 */
/* <view id="con"></view> */
#con {
background-color: #333;
}

通配样式 暂时不考虑

1
/* 通配样式  暂时不考虑*/

交集

1
2
3
4
/* 交集 */
.con1.con2 {
background-color: #333;
}

并集

1
2
3
4
/* 并集 */
.con1,.con2 {
background-color: #333;
}

子代

1
2
3
4
/* 子代 */
.con1>con2 {
background-color: #333;
}

后代

1
2
3
4
/* 后代 */
.con1 .con2 {
background-color: #333;
}

JS

数据类型

WXS 语言目前共有以下几种数据类型:
number : 数值
string :字符串
boolean:布尔值
object:对象
function:函数
array : 数组
date:日期
regexp:正则

数组操作

1
2
3
4
5
6
7
8
9
10
11
// 声明一个数组
var arr = []

// 添加一个对象,同时返回添加后的数组长度
arr.push('')

// 删除最后一个对象,同时返回这个数组
arr.pop()

// 从sidx位置开始删除len个对象
arr.splice(sidx, len)

JavaScript中对数组的一些操作函数,可参考

String 和 Number 相互转换

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

// 会自动忽略掉末尾的0 比如 【 1.00.toString() = '1' 】 【 parseFloat('1.00') = 1 】
var n = 10
String(1)
n.toString()
console.log(parseInt("1.001"));
console.log(parseFloat('1.00'));


// 价格转换
var price = 100.99; // 元为单位
price.toFixed(price); // '100.99'
(100.00).toFixed(); // '100.00'

var price = 10009; // 分为单位
(10009/100.0).toFixed(price); // '100.99'
(10000/100.0).toFixed(100.00); // '100.00'

JS文件中的各种写法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
// 使用 module.exports 输出对象
module.exports = {formatTime: formatTime}

// 引用
const obj = require('./utils/util') // 相对路径 . 表示当前路径 .. 表示当前路径的上一层路径
const obj = require('/utils/util') // 绝对路径
const obj = require('../utils/util') // 相对路径

// 定义一个变量
var num1 = 10;

// 定义一个常量
const num2 = 10;

// 定义一个函数
var f2 = function(res) {}
// 定义一个函数
var f3 = (res) => {}
// 定义一个函数
var f4 = res => {}
// 定义一个函数
function get(res) {}

// 定义一个对象,在对象中定义函数和在外面基本一样
var http = {
a: () => {
},
kk: 10,
}

// 更简洁的方式
fun({

})

// module class Promise 箭头函数 =>

Promise

个人理解,Promise 是一个对象,他的目的是封装异步操作,让异步操作处理更简洁。

创建 promise

下面是创建 promise 的代码,需要过它传入的参数是一个函数 ()=>()

resolve, reject 是函数的参数。同时他们也是一个函数,这里暂时不管它是干撒的,反正必须这写就好了。

1
2
3
4
5
6
7
8
9
10
11
const promise = new Promise( (resolve, reject)=>() )

const promise = new Promise((resolve, reject) => {
setTimeout(function() {
if (true) {
resolve('value');
} else {
reject('error');
}
}, 1000)
});

创建一个支持 Promise 函数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
const func = (options = {time: 2000}) => (
promise
)

// 合并起来
const func = (options = {time: 2000}) => (
new Promise((resolve, reject) => {
setTimeout(function () {
if (false) {
// 成功回调
resolve('value');
} else {
// 异常回调
reject('error');
}
}, options.time)
})
)

调用支持 Promise 的函数

1
2
3
4
5
 // then 的()中的内容其实就是 上面的 resolve 是一个函数。
// catch 的()中的内容其实就是 上面的 reject 是一个函数。
func().then(res => {
}).catch(res => {
})

上面介绍了最简单的 Promise 定义,其他各种功能可参考下面的内容。

Promise 的其他功能

Promise 实例具有then方法,也就是说,then方法是定义在原型对象Promise.prototype上的。它的作用是为 Promise 实例添加状态改变时的回调函数。前面说过,then方法的第一个参数是resolved状态的回调函数,第二个参数(可选)是rejected状态的回调函数。

then方法返回的是一个新的Promise实例(注意,不是原来那个Promise实例)。因此可以采用链式写法,即then方法后面再调用另一个then方法。

1
2
3
4
5
getJSON("/posts.json").then(function(json) {
return json.post;
}).then(function(post) {
// ...
});

上面的代码使用then方法,依次指定了两个回调函数。第一个回调函数完成以后,会将返回结果作为参数,传入第二个回调函数。

采用链式的then,可以指定一组按照次序调用的回调函数。这时,前一个回调函数,有可能返回的还是一个Promise对象(即有异步操作),这时后一个回调函数,就会等待该Promise对象的状态发生变化,才会被调用。

1
2
3
4
5
6
7
getJSON("/post/1.json").then(function(post) {
return getJSON(post.commentURL);
}).then(function (comments) {
console.log("resolved: ", comments);
}, function (err){
console.log("rejected: ", err);
});

上面代码中,第一个then方法指定的回调函数,返回的是另一个Promise对象。这时,第二个then方法指定的回调函数,就会等待这个新的Promise对象状态发生变化。如果变为resolved,就调用第一个回调函数,如果状态变为rejected,就调用第二个回调函数。

如果采用箭头函数,上面的代码可以写得更简洁。

1
2
3
4
5
6
getJSON("/post/1.json").then(
post => getJSON(post.commentURL)
).then(
comments => console.log("resolved: ", comments),
err => console.log("rejected: ", err)
);

多个 then 连起来写的时候,后面的 then 要等前面的 then 或者 catch 执行后才执行,同时前面的 then 或者 catch 的返回值会带到后面的 then 中。

如下面的代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
const func = (options = {time: 2000}) => (
new Promise((resolve, reject) => {
setTimeout(function () {
if (false) {
resolve('value');
} else {
reject('error');
}
}, options.time)
})
)

func({
time: 2000
}).then(function(res) {
wx.showToast({
title: 'then 1' + res,
})
return 3000
}).catch(res=>{
wx.showToast({
title: 'catch 1' + res,
})
return 4000

}).then(function(post) {

console.log('then2' + post)

baseRequest.func({
time: post
}).then(res =>
wx.showToast({
title: 'then 2' + res,
})
)
}).catch(post=>{

baseRequest.func({
time: post
}).catch(res =>
wx.showToast({
title: 'catch 2' + res,
})
)
})

组件

  • 组件的定义,使用,传值、事件传递 响应标识
  • 定义 Blocks 循环
  • 界面跳转
  • css的各种布局
  • wxml 中各种条件判断
  • 组件的导入,css的导入,js方法的导入和导出使用
  • 定时器
  • 微信提供的一些系统功能的使用
  • 刷新组件
- END -
扫一扫上面的二维码图案,加我微信

文章作者:梁大红

特别声明:若无特殊声明均为原创,转载请注明,侵权请联系

版权声明:署名-非商业性使用-禁止演绎 4.0 国际