flex布局
1) Flex 是 Flexible Box 的缩写,意为”弹性布局”,用来为盒状模型提供最大的灵活性。
2) 任何一个容器都可以指定为 Flex 布局。
3) display: ‘flex’
flex 属性
1) flex-direction:
row(默认值):主轴为水平方向,起点在左端。
row-reverse:主轴为水平方向,起点在右端。
column:主轴为垂直方向,起点在上沿。
column-reverse:主轴为垂直方向,起点在下沿。
移动端相关知识
物理像素
1) 屏幕的分辨率
2) 设备能控制显示的最小单元,可以把物理像素看成是对应的像素点
设备独立像素 & css 像素
设备独立像素(也叫密度无关像素),可以认为是计算机坐标系统中的一个点,这个点代
表一个可以由程序使用并控制的虚拟像素(比如:CSS 像素,只是在 android 机中 CSS 像素就
不叫”CSS 像素”了而是叫”设备独立像素”),然后由相关系统转换为物理像素。
小程序框架接口
App
1. 全局 app.js 中执行 App()
2. 生成当前应用的实例对象
3. getApp()获取全局应用实例
Page
1. 页面.js 中执行 Page()
2. 生成当前页面的实例
3. 通过 getCurrentPages 获取页面实例
wxml 语法
初始化数据
1. 页面.js 的 data 选项中
使用数据
1. 模板结构中使用双大括号 {{message}}
修改数据
1. this.setData({message: ‘修改之后的数据’}, callback)
2. 特点:
a) 同步修改: this.data 值被同步修改
b) 异步更新: 异步将 setData 函数用于将数据从逻辑层发送到视图层(异步)
事件绑定
1. bind 绑定:事件绑定不会阻止冒泡事件向上冒泡
2. catch 绑定: 事件绑定可以阻止冒泡事件向上冒泡
列表渲染
语法说明
1. wx:for=’{{arr}}’
2. wx:key=’{{唯一值}}’
注意事项
1. 默认的个体: item
2. 默认的下标: index
3. 自定义个体变量名称: wx:for-item=’myItem’
4. 自定义下标变量名称: wx:for-index=’myIndex’
数据绑定
1.data中初始化数据
2.修改数据:this.setData()
1.修改数据的行为始终是同步的
3.数据流
1.单项:Model-->View
路由跳转
路由跳转需要用到API,可在微信官方文档查询
url:+页面路径
wx.redirectTo:关闭当前页面跳转到目的页面(左上角按钮回到主页面)
wx.reLaunch:关闭所有页面跳转到目的页面(左上角按钮回到主页面)
生命周期函数
onload(请求一次)
onshow(请求多次)考虑清楚可能影响性能
onready(全部加载玩后可调用请求)