【笔记】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>

条件编译

main.js
1
2
3
// #ifdef VUE3
...
// #endif
main.js
1
2
3
// #ifndef VUE3
...
// #endif

全局对象

生命周期

  • 生命周期函数只能在App.vue中定义
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
10
11
<script>
  export default {
    data() {
      return {
        globalData: {
          key: "value"
        }
      }
    }
  }
</script>
pages/page/page.vue
1
2
3
4
5
6
7
8
9
<script>
  export default {
    onLoad() {
      // 获取全局对象
      const app = getApp();
      console.log(app.globalData.key); // "value"
    }
  }
</script>

全局配置

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

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

清单文件

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

组件

内置组件

容器组件

1
<view></view>

文本组件

1
<text></text>

图片组件

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

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

1
<image src=""></image>

按钮组件

type=""：按钮类型

default、primary、warn

1
<button></button>

滚动视图组件

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

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

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

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

轮播图组件

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
<swiper v-bind:indicator-dots="true">
  <swiper-item>
    <image></image>
  </swiper-item>
  
  <swiper-item>
    <image></image>
  </swiper-item>
</swiper>

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;
}

完成

参考文献

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