Fork me on GitHub

小程序杂记

布局

迫于生计开始写小程序.

小程序重要的东西有布局:
使用的是flex布局,这点很重要的。

justify-contentalign-items一个表示水平轴一个表示交叉轴,但是这两者的话都没有一个绝对的主轴,这点是要根据flex-direction的设定来确定的,flex-directionrow那么水平方向的就为主轴,另外一个为交叉轴,如果为column,那么垂直方向的就为主轴,另外一个为交叉轴。

当然如果加了reverse之后交叉轴的方向就得换个参照点了。

组件的使用可以参考页面里面的json里面的相关配置

1
"usingComponents": {}

注意这个地方使用组件的话一定要记得具体精确到文件里面去(貌似小程序这里不会默认解析index)

1
2
3
4
5
"usingComponents":{
"v-like":"/components/like/index",
"v-movie":"/components/classic/movie/index",
"v-epsoide":"/components/epsoide/index"
}

小程序用px做单位的话,会直接乘以二去换算,所以一般使用rpx来作为单位(rpx尺寸是按照1:1来进行换算的),同时rpx是可以针对不同的机型去进行一个自适应。

字体的大小可能需要使用px(可能没必要使用随着机型去进行放大。)

小程序里面做适应的两个神器:

  • flex
  • rpx

设置全局样式在app.wxss里面的page里面设置就可以了,不需要自己去设置,现在大部分样式都可以继承下来了。

组件最好不要留有空白间距。

数据显示

数据的来源

  • WXML
  • JS->WXML
  • 服务器->JS->WXML

数据绑定 组件内部的数据放在js文件里面的data里面去,然后wxml去调用的时候这样表示即可。

三元表达式这样调用即可:

1
<text>{{ like ? count1 : count2 }}</text>

如果我们想要在一个图片里面这么玩的话,可以把src的值封装成变量即可。

1
<image src="{{ like ? yesSrc : noSrc }}" />

1
2
3
4
5
6
7
data: {
like: false,
count1: 99,
count2: 999,
yesSrc:'./images/like.png',
noSrc: './images/like@dis.png'
},

这么表示即可。里面properties里面可以指定使用一些组件外部能够操作的数据,就如上面likecount肯定是要外部能够操作的,我们就需要把这些属性发在properties里面去就可以了

1
2
3
4
5
6
7
8
9
10
11
12
properties: {
like: {
type: Boolean,
},
count: {
type: Number,
}
},
data: {
yesSrc:'./images/like.png',
noSrc: './images/like@dis.png'
},

事件的定义在methods里面去拿数据就可了。

然后我们去给里面绑定一个事件(注意学习一波这里取数据的方法是可以使用es6的,修改数据使用的是类似于react里面的那套api):

1
2
3
4
5
6
7
8
9
10
11
methods: {
onLike:function (e) {
let { like, count } = this.properties;
count = like ? count - 1 : count + 1;
this.setData({
count,
like: !like
})
console.log(e);
}
}

这里注意到小程序里面的一些事件(这里以like组件作为例子),我们都是写在methods里面的。如果我们想调用这个绑定这个事件到wxml里面去的话,使用小程序相对应的语法即可(bind:tap="onLike"):

1
2
3
4
5
<!-- image组件是有默认的宽和高的 -->
<view class="container" bind:tap="onLike">
<image src="{{ like ? yesSrc : noSrc }}" />
<text>{{ count }}</text>
</view>

生命周期函数

利用小程序来访问API数据,还是和之前的框架(例如react,vue)一样,我们需要一个生命周期函数.

一般我们创建一个页面里面的js文件里面都会帮我们默认写好生命周期函数。

生命周期函数的概念是和react,vue里面的生命周期函数没有区别的。

一般我们发送请求的数据都会放在onLoad()这个生命周期函数之类,这个生命周期函有点类似于react里面被移除的一个API叫做componentWillMount,但是这里我们一般都把请求写在这里(毕竟小程序没有react那么多的东西要去拓展。。。)

onLoad

我们在这个地方进行数据请求的话,我们会使用wx.request()这个函数去进行一个api的调用。相关文档参考这里

使用的话大概是这个样子为:

1
2
3
4
5
6
7
8
9
onLoad: function (options) {
wx.request({
url: 'http://bl.7yue.pro/v1/classic/latest',
// res是服务器返回给我们的数据,在success这个里面能拿到
success: function(res){
console.log(res);
}
})
},

对于开发过程中产生的无法校验的http接口的情况的话,我们可以在小程序开发者工具里面关闭掉关于http校验的相关操作。wx.request()这里也和axios一样,这里就是个异步函数。所以想拿到值,我们需要自己来操作一下(上面就是一种操作)。

回调函数有个缺陷就是,在回调函数的外面this是有值的,比如success这个函数的外面是可以抓到值的,但是到success里面使用this.data.xxx去拿data里面的数据是拿不到的。这个时候我们把this赋值一下就ok了.let self = this(就是之前那种传统的方法),当然这里我们用箭头函数就OK了

1
2
3
success:(res) => {
console.log(res);
}

由于我们前面在like组件里面使用了两个properities(分别为countlike),这里我们就可以使用父组件来将这两个值从父组件这里传递下去。

home.wxml

1
<v-like like="{{ classicData.like_status }}" count="{{ classicData.fav_nums }}" />

通过这样可以类似react里面的props将值传递下去。

home.js这边获取到请求的数据还是和以前react里面一样,拿到数据后把他使用请求数据的组件的状态存储下面就可了。

1
2
3
4
5
6
7
8
onLoad: function (options) {
classic.getLatest(res => {
console.log(res);
this.setData({
classicData:res
})
})
}

这个setDatareact里面的setState是一模一样的= =,都是用来搞数据更新的,但你不能直接去改变data里面的数据值。

创建自定义事件

我们在使用组件的时候,有的时候可能需要去使用到一些我们自己定义的一系列事件(因为使用原有的事件会有些东西无法获取到)。我们之间监听一个组件的点击事件使用的是bind:tap="xxx(事件名)",类似于react里面的onClick事件一样hhh。

但是我们在父组件里面这样去监听子组件的点击事件的时候是拿不到当前子组件里面的一些状态。

所以我们要先在子组件里面创建一个自定义事件来通知页面点击了事件,然后把父组件知道的状态传递出去,我们需要使用小程序里面自带的自定义事件里面的激活API来完成操作即可。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
methods: {
onLike:function (e) {
let { like, count } = this.properties;
count = like ? count - 1 : count + 1;
this.setData({
count,
like: !like
})
// 发起一个自定义事件
let behavior = this.properties.like ? 'like' : 'cancel'
// 在这里激活我们的自定义事件like,它里面还有第三个参数
this.triggerEvent('like',{
behavior
},{})
}
}

然后我们将父组件里面需要调用的事件绑定到like这个东西上面即可:

1
<v-like bind:like="LikeClick" />

然后父组件里面定义一下这个点击事件:

1
2
3
LikeClick: function (e) {
console.log(e);
},

这个时候event那里就可以拿到子组件传递过来的behavior了。

组件的生命周期函数

就想pages有自己的生命周期函数,组件(components)里面也会有自己的生命周期函数。

我们想在组件里面输出一些值的内容的话是可以在生命周期函数里面输出的:
一般会使用attached这个生命周期函数的钩子。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
Component({
properties: {
index:Number
},
data: {
year: Number,
month: String,
},
methods: {
},
attached: function(){
console.log(this.properties);
console.log(this.data);
}
})

attached这个地方会打印出一个属性的值。propertiesdata这个地方会输出同样的值(所以这个地方我们不要给这两个东西写个同样的值,一般情况下data会覆盖掉properties下面同样的值)。

从父组件传递过来的数字,我们一般不放在attached这个生命周期函数里面去写,我们会使用properities这个属性里面的一个observer参数来去做。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
Component({
properties: {
index:{
type: String,
observer: function(newVal,oldVal,changePath){
let val = newVal < 10 ? '0' + newVal : newVal;
this.setData({
_index: val
})
}
}
},
data: {
year:0,
month: '',
_index: '0'
},
methods: {
},
attached: function(){
}
})

当然这个地方也不能在observer内部使用this.setData里面去修改index这个值,因为这里会出现无限递归调用的现象,就像在render里面使用componentDidMount一样。这个地方所以需要使用一个类似中转变量的东西_index来去回避那个陷阱。(不要在一个属性的监听值里面去修改这个监听值的内容)。

Behavior

小程序里面提供了组件的复用机制可以使用behavior这个API

比如说我们的多个组件里面有一些可以共用的东西,例如一些properities或者是data或者是methods甚至是attached这个生命周期函数都可以。

现在假设我们的组件里面都用共用的两个属性叫做imgcontent,我们在组件目录下的根路径下面新建一个classic-beh.js的文件,里面使用Behavior来新建一个公共的属性即可:

1
2
3
4
5
6
7
8
let classicBeh = Behavior({
properties: {
img:String,
content: String
},
})
export { classicBeh }

然后我们需要使用这些公共属性的组件是可以直接去里面调用这些东西的:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
import { classicBeh } from '../classic-beh';
Component({
behaviors: [ classicBeh ],
properities: {
},
data: {
pauseSrc: 'images/player@waitting.png',
playSrc: 'images/player@playing.png'
},
methods: {
}
})

在组件内部通过behaviors这个属性去直接进行一波的调用。这样以后这些组件有了共同的趋势了的话,这样我们直接去behavior里面去添加属性。

循环渲染数据

jsx里面渲染数据的话,我们一般都是直接使用map对一个对象数组去进行一个遍历,而在小程序里面,我们通常使用这样的语法:

1
2
3
<block wx:for="{{books}}">
<v-book book="{{item}}" />
</block>
-------------本文结束感谢您的阅读-------------