uni-app框架的学习

每天都在打代码qwq

已于 2024-12-06 22:18:26 修改

阅读量2.4k

点赞数 33

文章标签： uni-app 前端学习

于 2023-05-22 11:10:18 首次发布

本文链接：https://blog.youkuaiyun.com/xi_xi_00/article/details/130787411

版权

本文详细介绍了uni-app框架，包括其优点、开发环境、项目结构、页面路由配置、静态资源使用、应用与页面生命周期、页面跳转及参数传递、数据绑定和v-属性的使用。uni-app是一个使用Vue.js开发的跨平台框架，支持多种目标平台，提供丰富的组件和API，降低了开发成本。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.uni.navigateTo(OBJECT)

2.uni.redirectTo(OBJECT)

3.uni.reLaunch(OBJECT)

4.uni.switchTab(OBJECT)

5. uni.navigateBack(OBJECT)

五、在uni-app中使用静态资源

六、认识uniapp应用生命周期和页面生命周期

uniapp应用生命周期（详情）编辑

页面生命周期（详情）

七、使用uni.navigate进行页面间的跳转及传递参数

八、uni-app中进行数据绑定、使用v-属性

一、uni-app的官方介绍

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

1.uni-app的优点

跨平台发行，运行体验更好

与小程序的组件、API一致；
兼容weex原生渲染，增加了开发效率高，但是由于weex坑比较多，建议还是使用局部渲染优化；
通用前端技术栈,学习成本更低

支持vue语法，微信小程序API
内嵌mpvue
开发生态,组件更丰富

支持通过npm安装第三方包
支持微信小程序自定义组件及JS SDK
兼容mpvue组件及项目(内嵌mpvue开源框架)
App端支持和原生混合编码
插件丰富,DCloud将发布插件到市场

二、开发环境

uniapp的开发环境可以分为以下几个方面：

开发工具：Uni-app官方提供了HBuilderX开发工具，可在其中开发、调试和打包Uni-app项目。
开发语言：Uni-app的开发语言为Vue.js，需要掌握Vue.js相关的基础知识。
开发库：Uni-app提供了一些基础组件和API，如页面、导航栏、TabBar、Ajax等，可直接使用。
目标平台：Uni-app支持多个平台，如小程序、H5、App、快应用等，可根据需要选择对应的平台进行开发。

综上所述，Uni-app的开发环境需要掌握Vue.js基础知识，使用HBuilderX开发工具进行开发、调试和打包，结合Uni-app提供的基础组件和API进行开发，最终选择目标平台进行发布。

三、uni-app的项目结构

uni-app的项目结构如下：

App.vue：uni-app的根组件，通常包含页面的公共部分，如导航栏、底部标签栏等。
main.js：uni-app的入口文件，用于初始化Vue实例并且挂载到dom节点上。
pages文件夹：存放uni-app的页面文件，以.vue为后缀。
common文件夹：存放通用的样式文件和Javascript脚本文件。
components文件夹：存放uni-app的公共组件，如弹窗、模态框等。
static文件夹：存放静态资源文件，如图片、音频等。
manifest.json：uni-app项目的配置文件，用于指定应用的名称、图标、启动页、主题等信息。
pages.json：uni-app页面配置文件，用于指定页面的路径、标题、导航栏样式等信息。

四、pages.json页面路由的配置

路由的配置

1.uni.navigateTo(OBJECT)

保留当前页面，跳转到应用内的某个页面，使用uni.navigateBack可以返回到原页面。

2.uni.redirectTo(OBJECT)

关闭当前页面，跳转到应用内的某个页面。

3.uni.reLaunch(OBJECT)

关闭所有页面，打开到应用内的某个页面。

注意： 如果调用了 uni.preloadPage(OBJECT) 不会关闭，仅触发生命周期 onHide

4.uni.switchTab(OBJECT)

跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面。

5. uni.navigateBack(OBJECT)

关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages() 获取当前的页面栈，决定需要返回几层。

页面间参数传递

在 onLoad 里得到

onLoad 的参数是其他页面打开当前页面所传递的数据。

例：从index页点击所选榜单后跳转到所选列表页

index页：

list页

五、在uni-app中使用静态资源

在uni-app中使用静态资源可以通过以下几种方式：

在static文件夹中创建子文件夹，并将静态资源放入其中。在页面中直接使用路径访问即可，例如：

<img src="/static/images/logo.png">

2.在Vue组件中使用require引入静态资源，例如：

<template>
  <div>
    <img :src="imgUrl" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      imgUrl: require("@/assets/images/logo.png")
    };
  }
};
</script>

<style>
</style>

3.在CSS中使用url引入静态资源，例如：

background-image: url('/static/images/bg.jpg');

六、认识uniapp应用生命周期和页面生命周期

uniapp应用生命周期（详情）

页面生命周期（详情）

七、使用uni.navigate进行页面间的跳转及传递参数

在使用uni.navigate进行页面跳转时，可以通过query参数传递数据。

使用方法如下：

在跳转的页面中，可以通过以下方法获取传递的参数：

onLoad(query) {
  console.log(query)
}

在跳转的页面中，使用以下代码进行跳转：

uni.navigateTo({
  url: '/pages/test/test?a=1&b=2',
  success() {
    console.log('跳转成功')
  }
})

在另一个页面中获取传递的参数：

onLoad(query) {
  console.log(query.a) // 输出1
  console.log(query.b) // 输出2
}

注意：在使用uni.navigate进行页面跳转时，需要在manifest.json文件中定义要跳转到的页面路径。

八、uni-app中进行数据绑定、使用v-属性

在uni-app中进行数据绑定和使用v-属性，可以采用类似Vue.js的语法。

数据绑定

在页面的data属性中定义数据，然后使用大括号将数据绑定到页面的元素上。例如：

<template>
  <view>
    <text>{{ message }}</text>
  </view>
</template>

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

在上面的例子中，将message数据绑定到了text标签上，页面将显示“Hello World!”。

v-属性

可以通过v-属性实现条件渲染、循环渲染等功能。

条件渲染：

<template>
  <view>
    <text v-if="isShow">Hello Uni-App!</text>
  </view>
</template>

<script>
export default {
  data() {
    return {
      isShow: true
    }
  }
}
</script>

在上面的例子中，使用v-if判断isShow的值，如果为true，则显示Hello Uni-App!。

循环渲染：

<template>
  <view>
    <text v-for="(item, index) in list" :key="item.id">{{ item.name }}</text>
  </view>
</template>

<script>
export default {
  data() {
    return {
      list: [
        { id: 1, name: 'Apple' },
        { id: 2, name: 'Banana' },
        { id: 3, name: 'Orange' }
      ]
    }
  }
}
</script>

在上面的例子中，使用v-for循环渲染list数组中的数据，并将每个数据的name属性绑定到text标签上。