当前位置:   article > 正文

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

项目笔记-我的第一个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中生效)

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

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

2.条件编译

<!--  组件的条件编译 -->
<!--  #ifdef  %PLATFORM% -->
平台特有的组件
<!--  #endif -->
  • 1
  • 2
  • 3
  • 4
//api的条件编译
// #ifdef  %PLATFORM%
平台特有的API实现
// #endif
  • 1
  • 2
  • 3
  • 4
/*  #ifdef  %PLATFORM%  */
平台特有样式
/*  #endif  */
  • 1
  • 2
  • 3

%PLATFORM% 可取值如下:

平台
APP-PLUSApp
APP-PLUS-NVUE或APP-NVUEApp nvue
H5H5
MP-WEIXIN微信小程序
MP-ALIPAY支付宝小程序
MP-BAIDU百度小程序
MP-TOUTIAO字节跳动小程序
MP-QQQQ小程序
MP-360360小程序
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的播放时长吧

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/盐析白兔/article/detail/318426
推荐阅读
相关标签
  

闽ICP备14008679号