入门uniapp学习笔记

别活在过去i

已于 2023-11-08 16:46:39 修改

阅读量150

点赞数 1

分类专栏：前端uniapp 文章标签： uni-app 学习笔记

于 2023-11-08 15:00:17 首次发布

本文链接：https://blog.csdn.net/L170311/article/details/134287979

版权

前端uniapp 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

前言：

天有不测风云，机缘巧合之下我从一位略懂后端的皮毛小将转行前端开发，当初学java之前也是使用过html、css、js基础知识维护过学校教务系统的页面，如今正式学习前端框架也是别有一番滋味。.

官网链接：uni-app官网 (dcloud.net.cn)

学习参考资料：uni-app开发框架教程-学习视频教程-腾讯课堂

介绍一下Uniapp

什么是uinapp？

官网原话 uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台。

DCloud公司拥有900万开发者、数百万应用、12亿手机端月活用户、数千款uni-app插件、70+微信/qq群。阿里小程序工具官方内置uni-app，腾讯课堂官方为uni-app录制培训课程，开发者可以放心选择。

uni-app在手，做啥都不愁。即使不跨端，uni-app也是更好的小程序开发框架、更好的App跨平台框架、更方便的H5开发框架。不管领导安排什么样的项目，你都可以快速交付，不需要转换开发思维、不需要更改开发习惯。

.个人见解： UniApp是一个基于Vue.js的跨平台应用开发框架，一套代码构建同时运行在多个平台的应用程序。UniApp的主要目标是提供一种高效、简单和灵活的开发方式，开发者可以使用熟悉的Web技术（HTML、CSS和JavaScript）进行开发，并通过UniApp将应用程序打包成原生应用，以便在多个平台上发布和运行。

开发环境的搭建

下载和安装开发工具

uni-app支持通过可视化界面、vue-cli命令行两种方式快速创建项目。

1. 可视化界面：

官网链接：HBuilderX-高效极客技巧 (dcloud.io)

官网有详细的安装教程，安装好后长这样：

2.CLI（命令行工具）：

打开终端或命令行工具。
输入以下命令来安装Vue CLI（如果已经安装了Vue CLI，可以跳过这一步）：

npm install -g @vue/cli

安装完成后，输入以下命令来创建一个新的UniApp项目：

vue create -p dcloudio/uni-preset-vue my-project

进入项目目录：

cd my-project

启动开发服务器：

npm run dev:mp-weixin

运行以上命令后，你就可以在微信开发者工具中打开项目，并开始使用UniApp进行开发了。

个人推荐第一种，方便快捷又好用,国产软件无需汉化，支持国产！

创建新项目

创建好后项目基本目录是这样：

开发工具介绍

1.项目管理：

创建新项目：可以通过工具提供的模板或自定义配置创建一个新的UniApp项目。
打开现有项目：可以打开已经存在的UniApp项目进行编辑和调试。

2.代码编辑器：

代码高亮：支持对HTML、CSS和JavaScript代码的语法高亮显示，方便开发者编写代码。
代码补全：提供代码补全功能，可以自动完成代码和标签的输入。
代码格式化：支持对代码进行格式化和美化，提高代码的可读性。

3.调试和预览：

内置调试器：可以在开发工具中进行代码调试，方便查找和修复错误。
实时预览：提供实时预览功能，可以在开发工具中即时查看应用程序在不同平台上的效果。

4.设备模拟器：

内置模拟器：提供内置的设备模拟器，可以模拟不同设备的屏幕尺寸和分辨率，方便调试和适配。
响应式设计：支持响应式设计，可以根据不同设备的屏幕尺寸自动调整界面布局。

5.打包和发布：

打包应用程序：提供打包应用程序的功能，可以将UniApp项目打包为不同平台（如iOS、Android、微信小程序等）的应用程序。
发布应用程序：支持将打包好的应用程序发布到应用商店或其他渠道。

6.插件和扩展：

插件市场：提供插件市场，可以下载和安装各种插件，扩展开发工具的功能。
扩展支持：支持通过插件或扩展来增强开发工具的功能和性能。

Uniapp基础知识

页面结构

UniApp的页面结构基于Vue.js的单文件组件规范，它将页面划分为三个主要部分：template、style、script。

template：

模板部分使用HTML语法来定义页面的结构和内容。
可以在模板中使用Vue.js的指令和插值表达式来实现动态渲染和数据绑定。
可以使用UniApp提供的组件、自定义组件和原生组件来构建页面的UI元素。

style：

样式部分使用CSS语法来定义页面的样式和布局。
可以使用普通的CSS样式规则，也可以使用预处理器（如Less、Sass等）来编写样式。
可以使用全局样式和组件样式来实现页面的美化和定制。

script：

脚本部分使用JavaScript语法来定义页面的行为和逻辑。
可以在脚本中编写页面的事件处理、数据处理和业务逻辑。
可以使用Vue.js的生命周期钩子函数和自定义方法来响应页面的生命周期和用户交互

UniApp中的页面还可以通过路由配置进行管理，路由配置定义了页面的路径、名称和访问权限等信息。通过路由配置，可以实现页面之间的导航和跳转。

此外，UniApp还提供了丰富的组件库，包括基础组件和扩展组件，用于快速构建页面的UI元素和功能。开发者也可以自定义组件，通过组件化的方式实现页面的复用和模块化。

页面生命周期

UniApp的页面生命周期钩子函数与Vue.js的生命周期钩子函数类似，但也有一些UniApp特定的生命周期钩子函数。下面介绍一下这个UniApp的生命周期:

onLaunch：

        作用：当小程序启动时触发，只触发一次。
        适用范围：仅适用于微信小程序。
onShow：

        作用：当页面显示时触发，每次打开页面都会触发。
        适用范围：适用于所有平台。
onHide：

        作用：当页面隐藏时触发，通常是用户切换到其他页面时触发。
        适用范围：适用于所有平台。
onReady：

        作用：当页面初次渲染完成时触发。
        适用范围：适用于所有平台。
onLoad：

        作用：当页面加载时触发，只触发一次。
        适用范围：适用于所有平台。
onUnload：

        作用：当页面卸载时触发。
        适用范围：适用于所有平台。
onResize：

        作用：当页面尺寸发生变化时触发。
        适用范围：适用于所有平台。
onPullDownRefresh：

        作用：当用户下拉页面时触发刷新操作。
        适用范围：适用于所有平台。
onReachBottom：

        作用：当页面滚动到底部时触发加载更多操作。
        适用范围：适用于所有平台。
onPageScroll：

        作用：当页面滚动时触发。
        适用范围：适用于所有平台。

详情看官网

组件和模板

组件的使用方法：

引入组件：在页面的脚本部分（script）中使用import语句引入需要的组件。
注册组件：使用components字段将引入的组件注册到页面中。
在模板中使用组件：在模板部分（template）使用自定义的组件标签，如<my-component></my-component>。

<template>
  <view>
    <my-component></my-component>
  </view>
</template>

<script>
import MyComponent from '@/components/MyComponent.vue';

export default {
  components: {
    MyComponent
  }
}
</script>

模板的使用方法：

在模板部分（template）使用HTML语法定义页面的结构和内容。
使用Vue.js的指令和插值表达式实现动态渲染和数据绑定。
可以使用UniApp提供的基础组件、自定义组件和原生组件来构建页面的UI元素。

<template>
  <view>
    <text>{{ message }}</text>
    <button @click="handleClick">新增</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      message: '你好'
    }
  },
  methods: {
    handleClick() {
      this.message = 'uniapp!';
    }
  }
}
</script>

在上面的例子中，模板部分使用了插值表达式{{ message }}来展示数据，同时使用@click指令监听按钮的点击事件。脚本部分定义了数据和方法，当按钮被点击时，数据会被更新，从而实现了动态渲染和交互。

数据绑定和事件处理

数据绑定

在Uniapp中也是分单向数据绑定和双向数据绑定的

单向数据绑定：

在模板中使用插值表达式：使用{{ }}的插值表达式将数据绑定到模板中，实现数据的动态渲染。
使用指令：UniApp提供了一些指令，如v-show、v-if、v-for等，可以根据数据的状态来控制元素的显示和隐藏，实现动态渲染。

举个例子：

<template>
  <view>
    <text>{{ message }}</text>
    <button @click="updateMessage">更新</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      message: '你好'
    }
  },
  methods: {
    updateMessage() {
      this.message = '开发者';
    }
  }
}
</script>

例子里的{{ message }}使用插值表达式将message数据绑定到模板中的文本元素，当按钮被点击时，数据message会被更新，从而实现动态渲染。

双向数据绑定：

使用v-model指令：UniApp的v-model指令可以实现双向数据绑定，将表单元素的值与数据进行双向绑定

<template>
  <view>
    <input v-model="message" />
    <text>{{ message }}</text>
  </view>
</template>

<script>
export default {
  data() {
    return {
      message: ''
    }
  }
}
</script>

这个例子中<input>元素使用v-model指令与message数据进行双向绑定，当用户在输入框中输入内容时，数据message会自动更新，同时<text>元素中的内容也会实时更新。

事件处理

1.组件事件处理：通过在组件中定义事件处理函数，然后在模板中绑定事件触发时调用相应的处理函数。

<template>
  <view @click="handleClick">点击我触发事件</view>
</template>

<script>
export default {
  methods: {
    handleClick() {
      console.log('点击事件被触发');
    }
  }
}
</script>

2.全局事件处理：通过在App.vue中的onLaunch、onShow等生命周期函数中注册全局事件处理函数，然后在任意页面中触发相应的事件。

<script>
export default {
  onLaunch() {
    uni.$on('myEvent', () => {
      console.log('全局事件被触发');
    });
  }
}
</script>

常见的事件类型包括：

点击事件（@click）：当用户点击某个元素时触发。
输入事件（@input）：当用户输入内容时触发。
滚动事件（@scroll）：当页面滚动时触发。
触摸事件（@touchstart、@touchmove、@touchend）：当用户触摸屏幕时触发。
表单事件（@submit、@reset）：当表单提交或重置时触发。
生命周期事件（onLoad、onShow、onHide等）：当页面生命周期发生变化时触发。

路由和导航

路由配置

1.在pages.json文件中配置页面路由信息。在pages.json文件中，可以设置页面路径、页面样式等信息。

{
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "首页"
      }
    },
    {
      "path": "pages/detail/detail",
      "style": {
        "navigationBarTitleText": "详情页"
      }
    }
  ],
  "tabBar": {
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页"
      },
      {
        "pagePath": "pages/detail/detail",
        "text": "详情页"
      }
    ]
  }
}

2.使用uni.navigateTo或uni.redirectTo方法进行页面跳转。uni.navigateTo方法可以保留当前页面，而uni.redirectTo方法会关闭当前页面。

// 在首页点击按钮跳转到详情页，并传递参数
uni.navigateTo({
  url: '/pages/detail/detail?id=1&name=cat'
});

3.在目标页面中通过this.$route.query获取传递的参数。

export default {
  onLoad(options) {
    console.log(options.id);      // 输出：1
    console.log(options.name);    // 输出：cat
  }
}

导航栏和标签栏

1.导航栏的使用：

在pages.json文件中配置导航栏样式。在每个页面的style字段中，可以设置导航栏的样式，包括标题、背景色、文字颜色等。

{
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "首页",
        "navigationBarBackgroundColor": "#ffffff",
        "navigationBarTextStyle": "black"
      }
    }
  ]
}

在页面中显示导航栏。在页面的模板中，可以使用navigationBarTitleText字段来显示导航栏标题。
```
<template>
  <view>
    <navigation-bar title="首页"></navigation-bar>
    
  </view>
</template>
```
2.标签栏的使用：

在pages.json文件中配置标签栏样式。在pages.json文件的tabBar字段中，可以设置标签栏的样式，包括图标、文字、选中状态等。

{
  "tabBar": {
    "color": "#999999",
    "selectedColor": "#007aff",
    "backgroundColor": "#ffffff",
    "borderStyle": "black",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "static/tabbar/home.png",
        "selectedIconPath": "static/tabbar/home_selected.png"
      },
      {
        "pagePath": "pages/detail/detail",
        "text": "详情",
        "iconPath": "static/tabbar/detail.png",
        "selectedIconPath": "static/tabbar/detail_selected.png"
      }
    ]
  }
}

在页面中显示标签栏。在App.vue中的模板中，可以使用uni-tab-bar组件来显示标签栏。

<template>
  <view>
    <uni-tab-bar :list="tabList" @click="handleTabClick"></uni-tab-bar>
    <!-- 页面内容 -->
  </view>
</template>

<script>
export default {
  data() {
    return {
      tabList: [
        {
          pagePath: 'pages/index/index',
          text: '首页',
          iconPath: 'static/tabbar/home.png',
          selectedIconPath: 'static/tabbar/home_selected.png'
        },
        {
          pagePath: 'pages/detail/detail',
          text: '详情',
          iconPath: 'static/tabbar/detail.png',
          selectedIconPath: 'static/tabbar/detail_selected.png'
        }
      ]
    };
  },
  methods: {
    handleTabClick(index) {
      uni.switchTab({
        url: '/' + this.tabList[index].pagePath
      });
    }
  }
}
</script>

上面例子中的图片路径需要根据实际情况进行修改，可以将图片放在静态资源目录中。同时，要使用标签栏，需要在App.vue的template中引入uni-tab-bar组件。

数据请求和API调用

还在学习中，后续更新~~~~~~~

打包和发布

还在学习中，后续更新~~~~~~~

后续

百看不如一练，还需项目实战巩固理论知识，后续项目实操后继续更新

别活在过去i

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
入门uniapp学习笔记

什么是uinapp？官网原话uni-app是一个使用Vue.js开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台。DCloud公司拥有900万开发者、数百万应用、12亿手机端月活用户、数千款uni-app插件、70+微信/qq群。阿里小程序工具官方内置uni-app，腾讯课堂官方为uni-app录制培训课程，开发者可以放心选择。uni-app在手，做啥都不愁。即使不跨端，
复制链接

扫一扫