入门
# 微信小程序
# 准备 🔥
# 开发前
- 申请 appid。appsecret 在服务端有用
# 配置
- [x] ES6 转 ES5
- [x] 增强编译。为了使用 async、await
- [x] 使用 npm 模块
- [ ] 开发阶段可以勾上"不校验合法域名"，方便开发阶段使用 HTTP 协议
# 使用 NPM 包
npn init 后安装。之后可以在 node_modules 该 npm 包的 package.json 中 version查看真实安装的版本，_id不知是不是
还需要安装后点击「工具」—「构建 npm」，构建完毕会自动创建 miniprogram_npm 目录，这个才是最终要引用的组件目录。此时 node_modules 就没有用了，除非再次构建
# NPM semver 🔥
版本号规则
~0.6.2：只会安装0.6.x中第三位 latest 版本
^0.6.2：会安装0.x.x中第二、三位 latest 版本
# 数据单向绑定 & 简易的数据双向绑定
Vue 是双向数据绑定，可以绑定复杂的数据
微信小程序支持简易的数据双向绑定，只有 input 的 value 支持！！！
# 回调地狱 & 解决 🔥
# callback
由于微信小程序的 wx.request 为异步请求，且使用的是回调函数来获取返回值（回调地狱），使用不同函数来调用时为了不产生回调地狱，则必须使用 callback 来处理返回值，有多少层调用就会有多个 callback，很是难受。
所以可以封装 Promise。
# Promise
# async await
ES8 语法，需要在小程序勾选增强编译
async 只是一个标识符，用于声明异步函数
只有在函数（方法）有 return 返回值时，这个值才会被 Promise.resolve() 包装为 Promise 对象（可以无需手动 new）；否则还是同步执行的！
await 用于暂停执行异步函数后面的代码，等待 Promise 对象被 resolve
# JS 基础
# ES6 模版字符串
# 普通函数 VS 箭头函数的 this 指向问题
# 前端分层 🔥
前端 view 层的 JS 是否应该写业务逻辑？
- 一般 View 层应该仅做数据绑定
抽取 model 层
- 数据流转等操作应该放在 model 层，而最终的数据交由 view 层来绑定、渲染
# JS 面向对象 🔥
- 比较麻烦，因为没有类型约束！
- 需要考虑对象的状态所在类（不要太扣细节！太过于求完美！）
# 组件设计通用原则 🔥
# 组件目的
对骨架、样式、业务逻辑（行为）的封装
业务逻辑这里可以使用计数器组件来说明。有时需要根据货物数量来限制增减等
# 灵活性和易用性取舍
易用性：可封装原有组件，来限制以获取易用性（提高稳定）
灵活性（可提供如下方式实现）：
Slot 插槽
外部样式类
业务逻辑（其实没有灵活的，目前只能做到提供多种业务逻辑，通过对属性传参来决定。否则就是另一个组件了）
可以提供 Behavior 行为来让使用者自定义
可提供**默认值（样式、插槽）**来中和
# 样式宽高的固定
- 固定高宽，你必须要有理由，比如为了点击事件的区域更大。
- 固定高宽，弊端就是版本更迭很繁琐。修改和维护不方便。
- 固定高宽，数值难以确定。
写样式时（特别是组件开发），width 指定 750rpx 则可以用 100% 替代，因为父容器的宽度不确定性
# 小程序自定义组件的坑
自定义组件添加 margin 无效解决：1.给原生组件加；2.view包裹；3.自定义外部样式类
自定义组件无法使用 app.wxss 中定义的样式，需要自己写，然后 @import 导入！
# HTTPS 证书
- lets encrypt
- caddy
# 首页请求数量
- HTTP 请求数量
- 数据库查询次数，join
- 接口灵活性、可维护性
# WXS & JS
- 逻辑层：JS
- 视图层：要在小程序的 wxml 中写 js，只能使用 wxs（只支持 ES5！！！）
# Observer 监听器
# Hover 点击态
- view 的动画使用
# scroll-view 的一些问题
enable-flex 为 true 的 scroll-view x 轴滚动时 y 轴留白问题，解决：
align-items: center;
也可以取消 scroll-view 的 enable-flex，采用内嵌 view，给该 view 来设置 flex
# 图片下面多出10rpx左右问题
display: flex;
# 单行文字省略问题
由于必须指定 width，所以有时可以使用 js 来截取，或者 wxs 来截取
# 触摸区大小 width
为了触摸区大点，来指定 width
# 抽象节点 🔥
类似 插槽
# 不使用 setData
有些数据无需渲染，使用 this.data.xxx = xxx 即可
# rpx—机型
只有在 iPhone 6 上才满足 2rpx = 1px
# 上拉加载
# 阈值修改
app.json修改即可
onReachBottomDistance
# 状态
- 点击（下拉）加载（基本不会看到该状态！！）
- 加载中；
- 没有更多
总之就是12123这样的循环，但是1基本不会出现！
# 图片 bind:load
使用该方式来动态指定图片长宽
# 小程序的渲染层对对象的封装 🔥
注意，经过小程序渲染层后，对象已经不再是原来的对象，无法根据引用类型特征，直接修改！
# 直接事件转发 🔥
自己封装开源组件为新的组件，那么该开源组件的事件可以直接在使用封装组件的地方调用，会自动转发！！
# 自定义分享按钮样式 🔥
没有 API ！！！必须使用原生 button！！！样式比较难修改！！！
- 盖住原生 button。比较麻烦
- 使用 lin-ui button。牛皮的很啊！🔥
# text 标签不要随便换行🔥
否则会有空行！
# LinUI 的 Tabs 标签页 & Segment 选项卡
- Tabs 标签页：标签 和 页面！是2个联动起来的
- Segment 选项卡：只管理标签！方便使用
# 屏幕宽高 🔥
const getSystemSize = async function () {
// const res = await promisic(wx.getSystemInfo)()
const res = await wxp.getSystemInfo()
return {
windowHeight: res.windowHeight, // 可使用窗口宽度，单位px
windowWidth:res.windowWidth, // 可使用窗口高度，单位px。除去原生配置的 tabbar，导航栏
screenWidth: res.screenWidth, // 屏幕宽度，单位px
screenHeight: res.screenHeight, // 屏幕高度，单位px
}
}
2
3
4
5
6
7
8
9
10
不同机型之间 rpx 和 px 比例可有上述计算
# console.log 数字 & 字符串 🔥
- 数字为蓝色表示！
- 字符串为黑色！
# 小程序长列表组件 🔥
普通列表，追加时，setData 会造成全部都需要重新渲染，而小程序不允许渲染这么多，所以到后面的数据就不会显示了。
推荐使用 recycle-view 长列表组件来实现！！！