项目笔记-我的第一个uni-app项目（钉钉小程序）

uni-app 的学习

官方文档：uni-app官方文档

1.为什么使用uni-app?

虽然要开发的小程序目前只是应用在钉钉，但不排除后续要在微信端或其他平台发布，为了避免之后不必要的重构，选择uni-app进行开发，一套代码适配多个平台。通用技术栈，学习成本更低。

2.使用vscode开发

习惯了vscode的暗黑风，虽然uni-app推荐使用Hbuilder进行开发，但是，不喜欢！！！反正环境不好了都是一个样,又不是不能用是吧？
配置参考：当 uni-app 遇见 vscode

3. uni-app特性

1.生命周期
（1）应用生命周期（仅在App.vue中生效）

函数名	说明
onLaunch	uni-app 初始化完成时触发（全局只触发一次
onShow	uni-app 启动，或从后台进入前台显示
onHide	当从前台进入后台
onError	报错时触发

（2）页面生命周期
常用：onShow、onReady(初次渲染完成)、onHide、onPullDownRefresh(下拉刷新)、onReachBottom(上拉刷新、抵达底部)、onShareAppMessage、onPageScroll、onPageScroll
（3）组件生命周期。与vue2基本一致，无onLoad

2.条件编译

<!--  组件的条件编译 -->
<!--  #ifdef  %PLATFORM% -->
平台特有的组件
<!--  #endif -->

//api的条件编译
// #ifdef  %PLATFORM%
平台特有的API实现
// #endif

/*  #ifdef  %PLATFORM%  */
平台特有样式
/*  #endif  */

%PLATFORM% 可取值如下：

值	平台
APP-PLUS	App
APP-PLUS-NVUE或APP-NVUE	App nvue
H5	H5
MP-WEIXIN	微信小程序
MP-ALIPAY	支付宝小程序
MP-BAIDU	百度小程序
MP-TOUTIAO	字节跳动小程序
MP-QQ	QQ小程序
MP-360	360小程序
MP	微信小程序/支付宝小程序/百度小程序/字节跳动小程序/QQ小程序/360小程序
QUICKAPP-WEBVIEW	快应用通用(包含联盟、华为)
QUICKAPP-WEBVIEW-UNION	快应用联盟
QUICKAPP-WEBVIEW-HUAWEI	快应用华为

3.页面通讯

• uni.$emit
• uni.$on
• uni.$once
• uni.$off

4.路由

• pages.json统一配置
• 页面栈

5.页面样式及其布局
与css语法基本一致。

• 尺寸单位：px, rpx(类似rem)，最好统一用rpx（设计稿以750px换算）（App端，在 pages.json 里的 titleNView 或页面里写的 plus api 中涉及的单位，只支持 px。注意此时不支持 rpx）

6.基于webview。支持的算是Es，没有dom、bom相关api。所以本地缓存需要用对应提供的storage等。

钉钉小程序的坑

1.安卓端rgba不生效。使用rgb+opacity代替。
2.textarea两行起、无法通过改变最小高度进行高度自适应。不过可以通过隐藏的view+高度100%的textarea进行解决。（有注意到其他的一个小程序有实现对象功能且还能调用钉钉的表情、、、可是找不到对应的api、、、无果）

通过这次项目了解/巩固的点

1.promise.all()。与async/await结合应用，特定场景下，即可以同时发起多个请求，又可以确保数据已加载完成再进行其他操作。
2.async/await。
3.不同组件同时发起同一个请求，通过vuex保存对应请求的状态，除第一个请求外，其他保存为promise并返回。
4.flex布局。冲就完事了。
5.保存视频进度？本地storage保存一下对应的视频id的播放时长吧