1、小程序自定义组件

小程序内自定义组件的思想来源于js的函数复用的思想。js只能实现js代码的复用，但是对于小程序是带有外观的和骨架的复用、定义、引用与使用组件，组件自定义：

注意此处路径要用绝对路径

绝对路径

页面使用组件

小程序尺寸单位与设计原则
小程序设计稿依据：
以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设置成一样大小。

增大bottom可以实现往上偏移，组件的消除间距也可以实现最优化偏移

固定宽度还是自适应？：
对于inline-flex的理解。inline-flex可以阻止flex的container变成block，导致在小程序中向右充满整个屏幕。使用inline-flex后，container的长度，由内部组件决定，也就是自适应。当然自适应的缺点是当内部组件大小变化时，有个跳动效果（没见过...），据说不好看。

组件的封闭性、开放性及粒度

组件封装性 开放性
封装在内部 ，开放出来的
粒度
非常简单的功能 非常复杂的功能

组件的properties属性详解

从组件的外部可以去设置，就是开放的数据、称作是属性。组件中开放的数据要以对象的形式写在properties里，由type(必写，该数据的类型)，values(选填，数据的默认值)和observer(选填，是函数)
properties可以被外部访问，data不行

let、var与组件事件应用：

es5里面没有块级作用域的概念，是es6新增的。只要是用{}包括起来的都是块级作用域

看待组件的两种观点：

不建议将代码全都敲在一个主页上，不利于代码的维护和可读，可将其拆分成一个个组件，每一组件实现一个或者两个简单的功能，优先考虑拆分，再考虑复用，复用并不一定要求一行代码都不改，可以适当的修改。

开发者可以将页面内的功能模块抽象成自定义组件，以便在不同的页面中重复使用；
也可以将复杂的页面拆分成多个低耦合的模块，有助于代码维护。

组件作用：

1. 复用，并适当的修改；

2. 代码拆分

   
   
   

   官方建议

数据来源：
wxml
js -> wxml
服务器 -> js -> wxml (主要)

如何从服务器加载数据：

1. 区分http动词：
   GET：查询数据；
   POST：提交数据；
   PUT：更新数据
2. 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'的指向

常规的用that转换一下

改写箭头函数：保持函数的定义体也就是花括号内不变，然后把函数定义function去掉，在（）后面加上箭头即可。

直接使用this

正确理解Promise

promise主要解决异步嵌套的问题，实现类似同步return的效果

ES6 const常量

ES6 Module export与import

关于路径的引用：

在import中引用路径必须是相对路径，组件里面是可以使用绝对路径的。
常见的报错：

这里说明是第三方错误，即开发者错误，code.startsWith is not a function，提示比较模糊，可能是code不是字符串，所以没有相关属性方法，也可能小程序不支持这个方法

使用toString转换成字符串

http 中封装的方法中 success回调函数中执行params.success(res)，可以将请求到的数据返回给page页面打印出来

【获取异步数据】
1， 用回调函数当做参数传进去
2， promise 写法 = 一个变量
不能直接用回调函数的写法那样 = 赋值给一个变量
那是同步方法的获取方式
这么说来promise是同步方法，里面才是异步的

关于CSS的常规和难点使用：

例如把此处的小图标靠左浮动：

首先由偏移：相对定位，指的是相对于对当前位置有偏移，注意偏移量是相反的方向。

成功偏移到了左上方

在flex布局中，如果文字长短不一，又希望能够与其他组件居中显示（注意不是文字通过text-align:center自己居中），可以设定max-width，其意义是，文字较短的时候长短自适应，文字较长（如大于550rpx）则换行。

组件的粒度:不同页面的业务逻辑应该写到page里面，而不是组件
like组件的数据在初始化过程，由page里向api请求到了数据，传到了like组件
同样，在提交数据的时候，逻辑代码也应该写在页面
组件只负责比较通用的简单的业务逻辑
特定的业务逻辑写在组件的使用方，比如调用api请求不要写在组件里，而是应该写在对应的页面

自定义事件的激活与监听：

组件中激活自定义事件

页面使用

初始化时，组件的data与properties的处理不同