小程序尺寸单位与设计原则
小程序设计稿依据:
以iphone6为基准
宽度为750个物理像素,对应逻辑分辨率为375pt
高度为667 * 2 个物理像素,即1334个物理像素 对应逻辑分辨率为667pt
备注:物理像素的尺寸并不是真实物理尺寸,没有长度概念,指代的是像素点的个数(点是没有尺寸概念的)
px不会自适应,在所有屏幕上大小不变
rpx会根据屏幕自适应
以iphone6为基准的前提下(屏幕显示宽度为375pt)
在css中写px,和iphone6的pt 是1:1的关系,如375px对应了375pt
写rpx,则是2:1的关系,如750rpx对应了375pt
如果一张图的宽度为750个像素(不能在脑海中将看到的尺寸750简单理解为750px),想要完整显示,图片宽度的调整要么写375px, 要么写750rpx
flex rpx 解决了小程序布局和响应的痛点
pc端 生产力工具 涉及大量的交互 输入 响应式
小程序支持的css选择器远比文档中要多,简单骨架结构优先考虑使用子元素写css,缺点是复用性差
苹方字体设置:安卓:思源字体
由于小程序自动把每个页面添加Page全局容器,所以 page样式的巧妙应用:
组件只能继承极少数全局样式component 组件 可以继承的css 样式只有 font 和 color 属性,
page 可以继承其他属性的样式,
组件只能继承极少数全局样式
可以继承的有font、color
组件具有封闭的特性,尽量不要被全局影响才是最佳
page页面可以继承全局的样式
组件最好不要留有空白间距,文字默认带上下间距,消除文字上下间距的方法是,将font-size和line-height设置成一样。本节中,老师之所以要这样做,是因为不希望组件留下多余的空白,
文字是带有上下边距的,在设置组件的时候,最好不要留无意义的空白,这会把整个组件撑大,对主页引用组件时的布局有影响。消除文字上下边距方法:font-size和line-height设置成一样大小。
固定宽度还是自适应?:
对于inline-flex的理解。inline-flex可以阻止flex的container变成block,导致在小程序中向右充满整个屏幕。使用inline-flex后,container的长度,由内部组件决定,也就是自适应。当然自适应的缺点是当内部组件大小变化时,有个跳动效果(没见过...),据说不好看。
组件的封闭性、开放性及粒度
组件封装性 开放性
封装在内部 ,开放出来的
粒度
非常简单的功能 非常复杂的功能
组件的properties属性详解
从组件的外部可以去设置,就是开放的数据、称作是属性。组件中开放的数据要以对象的形式写在properties里,由type(必写,该数据的类型),values(选填,数据的默认值)和observer(选填,是函数)
properties可以被外部访问,data不行
看待组件的两种观点:
不建议将代码全都敲在一个主页上,不利于代码的维护和可读,可将其拆分成一个个组件,每一组件实现一个或者两个简单的功能,优先考虑拆分,再考虑复用,复用并不一定要求一行代码都不改,可以适当的修改。
开发者可以将页面内的功能模块抽象成自定义组件,以便在不同的页面中重复使用;
也可以将复杂的页面拆分成多个低耦合的模块,有助于代码维护。
组件作用:
- 复用,并适当的修改;
-
代码拆分
数据来源:
wxml
js -> wxml
服务器 -> js -> wxml (主要)
如何从服务器加载数据:
- 区分http动词:
GET:查询数据;
POST:提交数据;
PUT:更新数据 - json数据返回
生命周期函数:
onload() => 页面加载时触发。一个页面只会调用一次,可以在onLoad的参数中获取打开当前页面路径中的参数
onShow() => 页面显示/切入前台时触发
onReady() => 页面初次渲染完成时触发。一个页面只会调用一次,代表页面已经准备妥当,可以和视图层进行交互
onHide() => 页面隐藏/切入后台时触发
onUnload() => 页面卸载时触发
wx.request()发送http请求:
url
data
header
method
success
fail
小程序中2xx,4xx都会走success,
当网络中断的情况下会走fail
同步、异步与回调函数,异步的性能比较高,
ES6箭头函数与this指代
回调函数里面因为当前函数作用域的改变,this指代会不明确,不是所写代码的界面的this。
在回调函数中'this'没有指向,为'null'
在回调函数中,使用箭头函数,来保证'this'的指向
改写箭头函数:保持函数的定义体也就是花括号内不变,然后把函数定义function去掉,在()后面加上箭头即可。
正确理解Promise
promise主要解决异步嵌套的问题,实现类似同步return的效果
ES6 const常量
关于路径的引用:
在import中引用路径必须是相对路径,组件里面是可以使用绝对路径的。
常见的报错:
http 中封装的方法中 success回调函数中执行params.success(res),可以将请求到的数据返回给page页面打印出来
【获取异步数据】
1, 用回调函数当做参数传进去
2, promise 写法 = 一个变量
不能直接用回调函数的写法那样 = 赋值给一个变量
那是同步方法的获取方式
这么说来promise是同步方法,里面才是异步的
关于CSS的常规和难点使用:
例如把此处的小图标靠左浮动:
首先由偏移:相对定位,指的是相对于对当前位置有偏移,注意偏移量是相反的方向。
组件的粒度:不同页面的业务逻辑应该写到page里面,而不是组件
like组件的数据在初始化过程,由page里向api请求到了数据,传到了like组件
同样,在提交数据的时候,逻辑代码也应该写在页面
组件只负责比较通用的简单的业务逻辑
特定的业务逻辑写在组件的使用方,比如调用api请求不要写在组件里,而是应该写在对应的页面