前言：
工作很久了一直都没接触过小程序，趁这段时间了解一下。同时跟大家分享一下个人的一些见解。如果有问题，欢迎各位指正。
运行环境
不同于web端项目运行在浏览器环境，微信小程序是基于微信APP环境运行的。需要使用微信开发者工具开发，由于不在浏览器所以没有window全局对象，可以使用微信API提供的wx对象
小程序页面组成
一个小程序页面由四个文件组成，分别是：
- .wxml：对应平时的html文件
- 标签名不一样，html常用div,p,span，小程序使用：text,block,view
- 小程序支持wx:if这样的属性以及{{name}}这样的表达式
- .wxss: 对应平时的css文件
- wxss支持rpx，rpx：小程序独有的单位，可以做自适应。实现原理：小程序把屏幕分成750份，1rpx代表屏幕1/750（不用自己做适配真好）
- 使用@import语句可以导入外联样式表，@import后跟需要导入的外联样式表的相对路径，用;表示语句结束。
- .json: 小程序的配置文件，项目根目录下的app.json是全局配置,每个页面又会有自己的.json配置文件
- .js: 就是js文件。支持ES6
app.json文件
app.json 是小程序的全局配置，包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等。
| 常用相关配置 | 作用 |
|---|---|
| pages | 配置小程序路由的地方，在这个数组里面加入一个路径，小程序会自动在pages文件夹创建对应的文件，数组第一项为小程序默认打开的页面 |
| window | 配置小程序页面的地方，包括页头，标题等。navigation开头的是导航栏相关设置，background开头的是窗口相关 |
| tabBar | 配置小程序底部导航栏的地方，数组类型，长度要大于等于2 |
| networkTimeout | 配置网络请求超时 |
| usingComponents | 注册全局组件 |
网络请求
在小程序里面请求数据也与之前不同，由于小程序宿主环境不是浏览器，所以基于XMLhttpRequest对象的ajax请求无法使用，（当然也不存在浏览器跨域问题）,小程序里使用 wx.request()发送网络请求。小程序上线后只支持https类型的请求，开发阶段可以在开发者工具中->详情>本地设置> 勾选不校验合法域名。
wx.request({
url: "",
method: "",
success: ()=> {}, //成功回调，建议使用箭头函数，否则会导致无法使用this.setData()
fail: ()=> {}, //失败回调
complete: ()=> {} //无论失败成功都会执行
})
页面导航
小程序里页面跳转使用方式有两种，并且区分跳转目标是否为tabBar页面
//声明式：navigator组件
<navigator url="" open-type="" delta=""></navigator>
//注意：url必须'/'开始，导航到tabBar
// open-typem默认是'navigate',导航到非tabBar页面
//导航到tabBar页面open-type必须是switchTab
//后退 open-Type必须是navigateBack,delta后退多少步，默认1
编程式：
wx.navigateTo({url}) //导航到非tabBar
wx.switchTab({url}) //导航到tabBar
wx.navigateBack({delta}) //后退 delta后退多少 默认1
路由传参就是正常的拼在后面，如：xxx/index?name=122&age=18, 参数可以在小程序页面的onLoad事件接收
上拉加载和下拉刷新
| 是否默认开启 | 作用 | |
|---|---|---|
| 上拉加载 | 是，可以在app.json或者页面的.json配置触发距离onReachBottomDistance | 滑倒距离底部一定的地方触发onReachBottom()，可以请求更多数据 |
| 下拉刷新 | 否，需要在app.json或者页面的.json配置enablePullDownRefresh为true | 下拉时会触发onPullDownRefresh()，不会自动关闭下拉刷新，需要手动调用wx.stopPullDownRefresh()关闭下拉刷新效果 |
生命周期
小程序分别有小程序生命周期3个，页面生命周期5个，组件生命周期5个
| 小程序生命周期 | 作用 |
|---|---|
| onLaunch | app初始化完成 可以在这里初始化appData |
| onShow | 显示小程序时候调用 |
| onHide | 隐藏小程序时候调用 |
| 页面生命周期 | 作用 |
|---|---|
| onLoad | 页面加载完成 ,可以在此处获取路由参数 |
| onReady | 页面渲染完成 |
| onShow | 显示页面时候调用 |
| onHide | 隐藏页面时候调用 |
| onUnLoad | 页面卸载 |
| 组件生命周期 | 作用 |
|---|---|
| created | 在组件实例刚刚被创建时执行，注意此时不能调用setData |
| attached | 在组件实例进入页面节点树时执行，可以请求初始数据 |
| ready | 在组件布局完成后执行 |
| moved | 在组件实例被移动到节点树另一个位置时执行 |
| datached | 在组件实例被从页面节点树移除时执行 |
WXS
微信除了上面四种文件，还有自身独有的wxs文件，一般是用来格式化数据，类似于Vue的computed。WXS代码可以编写在wxml 文件中的 标签内，或以.wxs为后缀名的文件内
- wxs有自己的数据类型
- 不支持ES6
- 遵循CommonJS规范
- 不能作为事件函数
- 不能调用js文件的函数以及wx提供的api
- 在ios系统性能比js好，安卓系统都差不多
<wxs module="moduleA"></wxs> //在wxml文件中使用定义
//直接使用
<view> {{moduleA(text)}} </view>
module.exports.xxx={} //.wxs为后缀名的文件内定义
//先引入在使用
<wxs src="./../tools.wxs" module="moduleB" />
<view> {{moduleB(text)}} </view>
