【笔记】uni-app学习笔记

发表于 更新于 分类于 阅读次数：

前言

uni-app是一个开放源代码的跨平台前端应用开发框架，由中华人民共和国的DCloud公司于2018年开发并维护。该框架基于Vue.js技术栈，允许开发者使用单一代码库构建可运行于iOS、Android、HarmonyOS NEXT、Web以及各类小程序（包括微信、支付宝、百度、今日头条、飞书、QQ、快手、钉钉、淘宝、360、京东、小红书）和快应用等多个平台的移动应用程序。（维基百科）

创建项目

Vue2

1
2
npm install -g @vue/cli
vue create -p dcloudio/uni-preset-vue <project_name>

Vue3（JS）

1
2
npx degit dcloudio/uni-preset-vue#vite <project_name>
npm install

Vue3（TS）

1
npx degit dcloudio/uni-preset-vue#vite-ts <project_name>

Hbuilder手动连接Android模拟器

  • 如果HBuilder不能扫描到设备，可以手动建立adb连接

<port>：端口号

腾讯手游助手：5555
网易MuMu：7555
夜神：62001
逍遥：21503
雷电：5555
BlueStacks：5555
Genymotion：5555

1
adb connect <ip>:<port>

条件编译

平台条件

MP-WEIXIN、H5、APP-PLUS
APP-PLUS：包含APP-VUE和APP-NVUE
APP-PLUS-NVUE：包含APP-NVUE

JS中定义条件编译

  • 肯定条件
main.js
1
2
3
// #ifdef 平台标识符
...
// #endif
  • 否定条件
main.js
1
2
3
// #ifndef 平台标识符
...
// #endif
  • 多个条件
main.js
1
2
3
// #ifdef 平台标识符 || 平台标识符
...
// #endif

Vue中定义条件编译

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<template>
  <!-- #ifdef 平台标识符 -->
  ...
  <!-- #endif -->
</template>

<script>
  // #ifdef 平台标识符
  ...
  // #endif
</script>

<style>
  /* #ifdef 平台标识符 */
  ...
  /* #endif */
</style>

全局对象

应用的生命周期函数

App.vue
1
2
3
4
5
6
7
<script>
  export default {
    onLaunch: function () {},
    onShow: function () {},
    onHide: function () {}
  };
</script>

全局数据

App.vue
1
2
3
4
5
6
7
8
9
<script>
  export default {
    data: function () {
      return {
        key: "value"
      }
    }
  };
</script>
pages/page/page.vue
1
2
3
4
5
6
7
8
9
<script>
  export default {
    onLoad: function () {
      // 获取全局对象
      const app = getApp();
      console.log(app.key); // "value"
    }
  };
</script>

全局配置

pages：页面路由，第一行默认为首页

pages.style：页面样式

globalStyle：全局样式

pages.json
1
2
3
4
5
6
7
8
9
10
11
12
{
  "pages": [
    {
      "path": "pages/page/page",
      "style": {
        "navigationBarTitleText": "页面"
      }
    }
  ],
  "globalStyle": {},
  "tabBar": {}
}

CSS样式

作用范围

全局样式

  • App.vue文件内定义的样式默认为全局样式
App.vue
1
2
3
4
5
<style>
  * {
    color: red;
  }
</style>

局部样式

  • 非App.vue文件内定义的样式默认为局部样式
pages/page/page.vue
1
2
3
4
5
<style>
  * {
    color: red;
  }
</style>

预处理器

lang：指定预处理器

1
2
3
4
5
<style lang="less">
  * {
    color: red;
  }
</style>

当前组件的根组件的样式

1
2
3
page {
  color: red;
}

uni.scss

  • uni.scss可以定义新的或重写旧的全局样式
  • uni.scss中定义的变量是全局变量，项目中的其他样式文件无需导入就可以直接使用
uni.scss
1
2
3
* {
  color: red;
}

清单文件

manifest.json
1
2
3
4
5
6
7
{
  "name" : "",
  "appid" : "",
  "description" : "",
  "versionName" : "1.0.0",
  "versionCode" : "100",
}

页面

目录结构

1
2
3
+ pages
  + page
    - page.vue

页面的生命周期函数

onPullDownRefresh：顶部下拉刷新
onReachBottom：页面触底

1
2
3
4
5
6
7
8
9
10
11
<script>
  export default {
    onLoad: function (options) {},
    onShow: function () {},
    onReady: function () {},
    onHide: function () {},
    onUnload: function () {},
    onPullDownRefresh: function () {},
    onReachBottom: function () {}
  };
</script>
1
2
3
4
5
6
7
8
9
10
11
<script setup>
  import { onLoad, onShow, onReady, onHide, onUnload, onPullDownRefresh, onReachBottom } from "@dcloudio/uni-app";

  onLoad(function (options) {});
  onShow(function () {});
  onReady(function () {});
  onHide(function () {});
  onUnload(function () {});
  onPullDownRefresh(function () {});
  onReachBottom(function () {});
</script>

下拉刷新事件

pages.json
1
2
3
4
5
6
7
8
9
10
{
  "pages": [
    {
      "path": "pages/page/page",
      "style": {
        "enablePullDownRefresh": true
      }
    }
  ]
}
1
2
3
4
5
6
7
8
9
10
11
<script>
  export default {
    onPullDownRefresh: function () {

      ...

      // 关闭下拉刷新
      uni.stopPullDownRefresh();
    }
  };
</script>

Vue组件的生命周期

传送门

组件

内置组件

容器组件

1
2
3
<template>
  <view></view>
</template>

文本组件

1
2
3
<template>
  <text></text>
</template>

图片组件

  • 默认尺寸为：320px*240px

src=""：图片路径，也可以是图片的Base64编码
mode=""：图片裁剪缩放模式

1
2
3
<template>
  <image src=""></image>
</template>

按钮组件

type=""：按钮类型

default、primary、warn

1
2
3
<template>
  <button></button>
</template>

滚动视图组件

scroll-y="true"：纵向滚动视图

1
2
3
4
5
<template>
  <scroll-view scroll-y="true">
    <view></view>
  </scroll-view>
</template>

scroll-x="true"：横向滚动视图

1
2
3
4
5
<template>
  <scroll-view scroll-x="true">
    <view></view>
  </scroll-view>
</template>

轮播图组件

v-bind:indicator-dots：启用指示器
indicator-active-color=""：指示器高亮时颜色
indicator-color=""：指示器默认时颜色
v-bind:autoplay="true"：启用自动轮播
v-bind:interval="3000"：指定自动轮播间隔时间，单位毫秒
v-bind:duration="1000"：指定轮播动画持续时间，单位毫秒

1
2
3
4
5
6
7
8
9
10
11
<template>
  <swiper v-bind:indicator-dots="true">
    <swiper-item>
      <image></image>
    </swiper-item>
    
    <swiper-item>
      <image></image>
    </swiper-item>
  </swiper>
</template>

自定义组件

  • 使用easycom规范创建的组件，无需引入即可使用
    • easycom规范：创建组件时，文件路径结构为components/组件名/组件名.vue时，则这个组件按照了easycom模式创建
components/compomemt/compomemt.vue
1
2
3
4
5
6
7
8
9
<template>
  ...
</template>

<script>
  export default {
    name: ""
  }
</script>

组件的生命周期函数

components/component/component.vue
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<script>
  export default {
    name: ""
  }
</script>

Component({
  lefetimes: {
    created: function () {},
    attached: function () {},
    ready: function () {},
    moved: function () {},
    detached: function () {}
  }
});

页面的生命周期函数

  • OptionsAPI中不能在组件中使用页面的生命周期函数
  • CompositionAPI中可以在组件中使用页面的生命周期函数，但是不同设备的支持情况有差异

传送门

路由

组件

页面导航

open-type=""：页面跳转方式

navigate：打开新页面
switchTab：打开新页面，只可以跳转到tabBar页面
redirect：页面重定向

1
2
3
<template>
  <navigator open-type="navigate" url=""></navigator>
</template>

API

获取所有路由

1
2
3
<script setup>
  const pages = getCurrentPages();
</script>

页面导航

1
2
3
4
5
<script setup>
  uni.navigateTo({
    url: "/pages/page/page"
  });
</script>
1
2
3
4
5
<script setup>
  uni.redirectTo({
    url: "/pages/page/page"
  });
</script>
1
2
3
4
5
<script setup>
  uni.switchTab({
    url: "/pages/page/page"
  });
</script>
1
2
3
4
5
<script setup>
  uni.reLaunch({
    url: "/pages/page/page"
  });
</script>
1
2
3
4
5
<script setup>
  uni.navigateBack({
    delta: 1
  });
</script>
传递参数
通过查询字符串传递参数
  • 发送数据
1
2
3
4
5
<script setup>
  uni.navigateTo({
    url: "/pages/page/page?key=value"
  });
</script>
  • 接收数据
1
2
3
4
5
6
7
<script>
  export default {
    onLoad: function (options) {
      console.log(options.key);
    }
  };
</script>
1
2
3
4
5
<script setup>
  import { onLoad } from "@dcloudio/uni-app";

  onLoad(function (options) {});
</script>
1
2
3
4
5
<script setup>
  const pros = defineProps({
    key: String
  });
</script>
通过事件管道传递参数
  • 发送数据
1
2
3
4
5
6
7
8
<script setup>
  uni.navigateTo({
    url: "/pages/page/page"，
    success: function (res) {
      res.eventChannel.emit("event", "payload");
    }
  });
</script>
  • 接收数据
1
2
3
4
5
6
7
8
9
10
<script>
  export default {
    onLoad: function (options) {
      const eventChannel = this.getOpenerEventChannel();
      eventChannel.on("event", function (data) {
        console.log(data);
      });
    }
  };
</script>
1
2
3
4
5
6
7
8
9
10
11
12
<script setup>
  import { onLoad } from "@dcloudio/uni-app";
  import { red, getCurrentInstance } from "vue";

  const $instance = ref(getCurrentInstance().proxy);
  onLoad(function () {
    const eventChannel = $instance.value.getOpenerEventChannel();
    eventChannel.on("event", function (data) {
      console.log(data);
    });
  });
</script>

事件总线

发射事件

1
2
3
<script setup>
  uni.$emit("event", "payload");
</script>

监听事件

开始监听事件

1
2
3
4
5
<script setup>
  uni.on("event", function (payload) {
    ...
  });
</script>
只监听一次事件
1
2
3
4
5
<script setup>
  uni.once("event", function (payload) {
  ...
  });
</script>

停止监听事件

1
2
3
4
5
<script setup>
  uni.off("event", function () {
    ...
  });
</script>
停止监听所有事件
1
2
3
<script setup>
  uni.off();
</script>

页面的生命周期函数

生命周期函数 备注
onLoad() 页面加载
onShow() 页面显示
onReady() 页面就绪
onHide() 页面隐藏
onUnload() 页面卸载
onPullDownRefresh() 下拉刷新
onReachBottom() 页面滚动到底部 
1
2
3
4
5
6
7
<script>
  export default {
    onLoad: function () {
      ...
    }
  };
</script>
1
2
3
4
5
6
7
<script setup>
  import { onLoad } from "dcloudio/uni-app";
  
  onLoad(function () {
    ...
  });
</script>

停止下拉刷新

1
2
3
4
5
6
7
<script>
  export default {
    onPullDownRefresh: function () {
      uni.stopPullDownRefresh();
    }
  };
</script>

发送请求

1
2
3
4
5
6
7
8
9
10
11
12
13
<script setup>
  uni.request({
    url: "",
    method: "",
    data: {},
    success: function (res) {
      ...
    },
    fail: function (err) {
      ...
    }
  });
</script>

缓存

同步缓存

添加缓存

1
2
3
<script>
  uni.setStorageSync("key", "value");
</script>

删除缓存

1
2
3
<script>
  uni.removeStorageSync("key");
</script>
删除所有缓存
1
2
3
<script>
  uni.clearStorageSync();
</script>

获取缓存

1
2
3
<script>
  const value = uni.getStorageSync("key");
</script>

异步缓存

添加缓存

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<script>
  uni.setStorage({
    key: "key",
    data: "value",
    success: function () {
      ...
    },
    fail: function () {
      ...
    },
    complete: function () {
      ...
    }
  });
</script>

删除缓存

1
2
3
4
5
6
7
8
9
10
11
12
uni.removeStorage({
  key: "key",
  success: function () {
    ...
  },
  fail: function () {
    ...
  },
  complete: function () {
    ...
  }
});
删除全部缓存
1
2
3
4
5
6
7
8
9
10
11
uni.clearStorage({
  success: function () {
    ...
  },
  fail: function () {
    ...
  },
  complete: function () {
    ...
  }
});
1
uni.clearStorage();

获取缓存

1
2
3
4
5
6
7
8
9
10
11
12
uni.getStorage({
  key: "key",
  success: function (data) {
    console.log(res.data); // "value"
  },
  fail: function () {
    ...
  },
  complete: function () {
    ...
  }
});

完成

参考文献

DCloud官方文档
知乎——赵青青