uniapp笔记

1.项目目录

2.模板语法

• vue组件语法

v-bind / :
v-on / @
v-model
v-if
v-show
v-for

• 空标签

template

• view 作为div使用
• text 作为span使用

3. uni条件编译

每个平台有自己的一些特性，因此会存在一些无法跨平台的情况；条件编译是用特殊的注释作为标记，在编译时根据这些特殊的注释，将注释里面的代码编译到不同平台。

#ifdef：if defined 仅在某平台存在
#ifndef：if not defined 除了某平台均存在
#endif 结尾
//平台值
APP-PLUS:App
APP-PLUS-NVUE或APP-NVUE : App nvue
H5 H5
MP-WEIXIN 微信小程序
MP-ALIPAY 支付宝小程序
MP-BAIDU 百度小程序
MP-TOUTIAO 字节跳动小程序
MP-LARK 飞书小程序
MP-QQ QQ小程序
MP-KUAISHOU 快手小程序
···
#ifdef H5 只在h5端展示

4. 页面布局

• vue文件引入css文件

• 使用单位

推荐使用rpx，会根据不同设备进行换算
750 宽度下， 2rpx=1px，即iphone678模型下

5. 生命周期（常用）

• 应用的生命周期

onLaunch 初始化完成时触发（全局只触发一次）
onShow 启动，或从后台进入前台显示
onHide 从前台进入后台
onError 报错时触发
注意： 只能在App.vue里监听应用的生命周期

• 页面的生命周期

onLoad 监听页面加载，其参数为上个页面传递的数据，参数类型为 Object（用于页面传参）
onShow 监听页面显示，页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面
onReady 监听页面初次渲染完成。注意如果渲染速度快，会在页面进入动画完成前触发
onHide 监听页面隐藏
onUnload 监听页面卸载
onResize 监听窗口尺寸变化
onPullDownRefresh 监听用户下拉动作，一般用于下拉刷新
onReachBottom 页面滚动到底部的事件（不是scroll-view滚到底），常用于下拉下一页数据
onShareAppMessage 用户点击右上角分享
···

• 组件的生命周期

vue的组件的生命周期
created
mounted
beforeDestroy

• 顺序

进入时，应用的生命周期 > 页面生命周期 > 组件生命周期
出来时，组件的生命周期 > 页面生命周期 >应用的生命周期

6. tabar

//pages.json文件中
{
  "tabBar": {
    "list": [{
      "pagePath": "pages/index/index",
      "text": "首页"
    },{
      "pagePath": "pages/other/other",
      "text": "其他"
    }]
  }
}

//tabbar只能使用跳转
uni.switchTab({
    url: '/pages/index/index'
});

7. image自适应高度

在img标签中使用 mode=“widthFix” 属性

8. 获取设备高度

uni.getSystemInfoSync().windowHeight //获取设备可用高度，减去头部、tabar部分剩余高度

9. 滚动条位置设置–重置高度

使用scroll-view 组件，如果移动了滚动条，如果有切换tab，滚动条位置不会重置，
使用scroll-top=“数字” 属性表示滚动条位置，如果想每次切换tab重置顶部，如果设一个变量，切换时将变量归0，注意该变量初始为0，切换时不能设置为0，值没有变化，不会置顶，可设为1，效果一样