小程序学习笔记

1.引入公共文件（如头部、底部）

1）先准备好头部文件，如放一些控件，然后再需要引用的wxml的需要的位置上写

<include src="头部文件的路径" />

注意：末端的斜杠不能忘

2）如果公共文件中使用了<template>标签，那么引入方式为：

<import src="公共文件的路径">
<template is="指明该文件中的哪个template" data="{{变量名如text:'具体数据'}}"/>

如，公共文件中的内容为

<template name="footer1">内容1 {{text}}</template>

<template name="footer2">内容2</template>

那么在引入时就应该写成

<import src="路径">

<template is="footer1" data="{{text:'aaaaa'}}"/>

 

2.绑定事件的两种方法：bind和catch

1）冒泡事件：当点击子时，其父跟父的父也会被点击到也就是触发到，对应的绑定方法就是bind

2）非冒泡时间：当点击子时，就是点击子，其父不会被触发，对应的绑定方法就是catch

事件有属性：currenttarget：是指当前目标，target是指触发事件是事件源，如使用bind绑定方法，点击子，触发了子也触发了父，在父的cuttenttarget就是父，而target是子。

绑定事件可以设置id，标识本控件，data-id是控件对应数据的id，data-title是数据的标题

 

3.页面跳转

1）通过绑定事件bindtab来实现，类似于js的函数。其中有两种方法：

jumb:function(){
wx.navigateTO("跳转的目标路径")//本页面不会被销毁，可以通过返回回到本页面
}

jumb:function(){
wx.redirectTo(跳转的目标路径")//本页面被销毁，无法返回
}

 2）添加跳转的标签来实现，有点像html中的a标签，也是有两种方法：

<navigate src="路径">
前台供点击的内容，如“点击此处”
</navigate>

<navigate src="路径" redirect>
前台供点击的内容，如“点击此处”
</navigate>

3）页面下方菜单的跳转方式：（写在全局的app.json中）

"tabBar":{
"List":[{
"pagePath":"目标路径",
"text":"按钮显示的文字"
}]
}

4）页面传参，直接在url后面添加?后写变量名如AAA=变量值，与url传参一致

在接收页面的js中。在data中添加一个接收变量名，如BBB，在onload函数中赋值

this.setData(BBB:options.AAA)

再在wxml中通过双大括号使用即可。

4.flex布局

1）设置display为flex

2）根据需要设置容器属性

flex-direction:row;/*两个值，一个row，一个column，设置flex中内容的排列方式，同时指定主轴，另外一个方向就是交叉轴了*/

flex-wrap: wrap;/*三个值，nowarp默认值，不换行，warp换行，warp-reverse，反转换行*/

flex-flow: column warp;/*上两个相当于这一个 ,不知为何这里不起作用*/

justify-content:space-between;/*flex-start,flex-end,space-arround,space-between 指定主轴上元素的对齐方式*/

align-items: flex-end;/*指定交叉轴上元素的对齐方式，除了上述五个属性外，还有stretch,当交叉轴没有设置高度时，自动占满屏幕baseline，元素中文字对齐*/

3）再设置flex元素的属性

felx-grow:2；/*当有多余空间时，元素的放大比例*/

flex-shrink:2;/*当空间不足时，元素的缩小比例*/

flex-basis: 250rpx；/元素在主轴上占据的空间

flex:1 1 250rpx /grow\shrink\basisi的简写

order:1 /定义元素的排列顺序，在所有排序中排第几位

align-self:flex-end;  /定义元素自身的对齐方式

 

5.相对布局和绝对布局

1）相对定位的参照物是自己

2）绝对定位的参照物是离本身最近的一个已定位的父级元素

3）position：absolute/relative

     left:15 rpx;

     top:15 rpx;