微信小程序-慕课网《旧岛》实战(一)

1. 快捷键
   1. command+P 快速打开文件
   2. command+R打开最近文件
   3. alt+shift+E 格式化代码
2. 规范
   1. 是否加分号
   2. 单引号还是双引号
   3. <image> 有没有闭标签
   4. 变量命名
3. flex布局(主轴和交叉轴由direction决定)
   1. flex-direction:column row column-reverse row-reverse
   2. justify-content(主轴):flex-start flex-end center space-between space-around
   3. align-items(交叉轴):baseline(文字顶部对齐) stretch(上下占据空间) ，其它同上
   4. flex-wrap:wrap
4. 样式
   1. 字体 px 和rpx 在iphone6 设计图 rpx 和实际图分辨率 1:1关系 px和实际图分辨率，有的地方会用到px，比如字体(如果想保持不随手机改变大小的)
   2. 全局样式继承：继承app.wxss
      1. 组件可以继承的有 font font-size font-family
      2. 页面可以继承所有样式
   3. 文字一般有空白间距：消除 line-height:24rpx; font-size:24rpx; 设置的一样
   4. 让flex行级元素：inline-flex
5. 事件&数据&细节
   1. bind:tap bindtap 一样
   2. request网络请求 都是异步的
   3. this在回调函数不能够使用
      1. 箭头函数 可以使用this
      2. let that = this
   4. import 只能导入相对路径
   5. 回调函数没有return能力 ，可以通过方法再回调 或者是Promise
   6. 自定义组件 data properties 可以理解成都是data，所以建议不要取同名 如果有同名 properties会覆盖data
   7. observer 在properties改变的时候触发 所以不能在observer声明的方法更改properties的值
   8. “>” 子元素选择器 ，另外一个是后代选择器 子元素选择器只能选择直接儿子 后代选择器可以选择所有后代的元素
   9. 改变组件的样式
      1. 通过子元素选择器

.component-container :v-tag:nth-child(1) > view {
}

这种hacker方式，侵入性高
2. 通过externalClass 导入外部 class ，但是外部样式不一定覆盖普通样式，这时候需要利用样式优先级 ，添加 !important

10. 多继承 behavior 可以添加的数组（覆盖 重叠）
11. wxs 可以解决 在xml 表达式过于复杂的问题，相当于过滤器 wxs和javascript,语法上相当于es5

//wxss
<wxs src=“” name=“utils”/>

//filter.wxs
var doText = function(text){
}
module.exports{
doText:doText
}

//wxss
<text>{{utils.doText(article.summary)}}</text>

12. Promise all 所有做完才会执行then方法 返回的是一个数组 race 执行最快的一个