uniapp学习笔记

lllllllllzj

已于 2023-06-05 14:04:19 修改

阅读量197

点赞数

分类专栏： vue 文章标签： vue.js javascript 前端笔记前端框架

于 2023-06-05 14:03:48 首次发布

本文链接：https://blog.csdn.net/weixin_53296485/article/details/131046521

版权

vue 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

uniapp项目结构

Uniapp是一个跨平台开发框架，可以在同一个代码库中进行开发并将其编译为iOS，Android和Web应用程序。下面是Uniapp项目的基本结构：

├── App.vue // 应用程序的根组件
├── main.ts // 应用程序的入口文件，主要用于初始化Vue实例
├── manifest.json // 应用程序的配置文件，包括应用程序名称、版本号、图标等
├── pages // 存放页面的目录
│   ├── index // 首页页面目录
│   │   ├── index.vue // 首页的Vue组件
│   │   ├── main.js // 首页的入口文件，主要用于设置页面路由等
│   ├── about // 关于页面目录
│   │   ├── index.vue // 关于页面的Vue组件
│   │   ├── main.js // 关于页面的入口文件，主要用于设置页面路由等
├── static // 存放静态文件的目录，如图片、音频等
├── uni.scss // 应用程序的全局样式文件
├── unpackage // 经过编译生成的文件，包括iOS、Android和Web应用程序原生代码等
├── package.json // 应用程序的依赖项配置文件
├── README.md // 应用程序的说明文件

Uniapp项目的整体结构非常清晰，可以按照这个基本模板进行开发和维护。

uniapp页面生命周期

在Uniapp中，页面也有自己的生命周期函数，以下是Uniapp页面的生命周期函数及其作用：

1. onLoad：页面加载时触发，可以在该函数中获取页面的路由参数。

2. onShow：页面显示时触发，该函数可以在页面显示的时候进行一些数据的刷新。

3. onReady：页面初次渲染完毕时触发，该函数可以在页面初次渲染完毕后进行一些额外的操作。

4. onHide：页面被隐藏时触发，该函数可以在页面被隐藏的时候做一些清理工作。

5. onUnload：页面卸载时触发，该函数可以在页面卸载时进行一些清理工作。

除了上述的页面生命周期函数，还有一些特定类型的页面生命周期函数，如：

1. onPullDownRefresh：在页面下拉刷新时触发，可以在该函数中进行数据的刷新。

2. onReachBottom：在页面滚动到底部时触发，可在该函数中进行上拉加载更多的操作。

3. onShareAppMessage：在用户点击分享按钮时触发，可以在该函数中自定义分享的内容。

uniapp组件和指令

Uniapp封装了一些基础组件和指令，方便开发者进行快速开发。下面是常用的Uniapp组件和指令：

组件：

1. `<view>`：类似于HTML中的div元素，用于布局。

2. `<text>`：用于显示文本内容。

3. `<image>`：用于显示图片，在App端支持本地图片、远程图片和base64图片，在H5端支持远程图片和base64图片。

4. `<button>`：用于创建按钮。

5. `<input>`：用于创建文本输入框。

6. `<form>`：用于创建表单，用法和HTML中的form元素类似。

7. `<swiper>`：用于实现轮播图效果。

8. `<swiper-item>`：用于包裹轮播项。

指令：

1. `v-if`：用于根据条件是否显示元素。

2. `v-for`：用于循环渲染列表数据，类似于JavaScript中的for循环。

3. `v-bind`：用于绑定数据到元素上，常用于绑定样式和属性。

4. `v-model`：用于双向数据绑定，常用于表单元素。

5. `v-on`：用于绑定事件监听器，常用于按钮点击事件等。

6. `v-show`：用于根据条件是否显示元素，与`v-if`类似，但该指令不会在元素不显示时销毁元素。

uniapp路由管理

uniapp中的路由管理使用的是Vue.js中的vue-router，同时也有一些uniapp的自身特点。以下是uniapp路由管理的主要内容：

1. 定义路由表
在uniapp中，路由表一般位于`router`目录下的`index.js`文件里面。可以使用`routes`属性定义路由表，例如：

import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'
import About from './views/About.vue'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/about',
      name: 'about',
      component: About
    }
  ]
})

其中，路由表里面包含多个路由信息对象，每个路由信息对象包含三个属性：

- `path` 路径: 表示该路由所匹配的路径名称；
- `component` 组件: 表示该路由所对应的组件；
- `name` 名称: 表示该路由的名称。

2. 路由跳转
在代码中使用`<router-link>`标签或`$router.push`方法（或其他跳转方式）即可实现路由跳转。例如：

<template>
  <div>
    <router-link to="/">Home</router-link>
    <router-link to="/about">About</router-link>
    <button @click="goToHome">Go to Home</button>
  </div>
</template>

<script>
export default {
  methods: {
    goToHome () {
      // 使用 $router.push 跳转到指定路由
      this.$router.push('/')
    }
  }
}
</script>

3. 路由传参
uniapp中的路由传参非常灵活，可以使用URL参数、查询参数、路由参数等不同的方式。例如：

<template>
  <div>
    <router-link :to="{ path: '/users/'+userId }">Go To User {{ userId }}</router-link>
    <button @click="goToUser(userId)">Go to User {{ userId }} (query)</button>
  </div>
</template>

<script>
export default {
  data () {
    return {
      userId: 123
    }
  },
  methods: {
    goToUser (userId) {
      // 使用 query 传参
      this.$router.push('/user?userId=' + userId)
    }
  }
}
</script>

在路由的目标组件中，可以使用`$route`对象来获取传递的参数，例如：

export default {
  computed: {
    userId () {
      // 使用路由参数传参
      return this.$route.params.userId
    },
    userIdFromQuery () {
      // 使用 query 传参
      return this.$route.query.userId
    }
  }
}

这样就可以实现路由传参了。

以上就是uniapp中的路由管理的基本内容。需要注意的是，uniapp框架的路由跳转和传参方法可能会与其他跨平台框架有所不同。因此，在学习和使用时需要注意区别。

uniapp网络请求

在Uniapp中进行网络请求可以使用uni-app官方提供的`uni.request()`函数或者使用第三方库如axios等。

uni.request()函数接受一个options对象作为参数，该对象可以包括以下选项：

1. url：必填选项，请求的接口地址。

2. data：选填选项，请求发送的数据。

3. method：选填选项，请求的HTTP方法，包括GET、POST等。

4. header：选填选项，请求头信息。

5. dataType：选填选项，接收数据的类型，包括json、text等。

6. responseType：选填选项，响应的数据类型，包括text、arraybuffer、blob等。

7. sslVerify：选填选项，是否验证 SSL 证书。

下面是一个简单的例子：

uni.request({
  url: 'https://xxx.com/api',
  data: {
    name: 'chatai',
    age: 20
  },
  header: {
    'Content-Type': 'application/json'
  },
  method: 'POST',
  success: res => {
    console.log(res)
  },
  fail: err => {
    console.log(err)
  }
})

上述例子中，我们向"https://xxx.com/api"接口发送了一个POST请求，传递了一个包含name和age属性的json数据，设置了请求头的Content-Type为application/json。

Uniapp还提供了一个`uni.uploadFile()`函数，用于上传文件，其用法基本类似于`uni.request()`函数。

uniapp组件通信

在Uniapp中，组件之间通信可以使用props、事件总线、Vuex等方式。

1. Props

在父组件中使用props属性来传递数据给子组件：

// 父组件
<template>
    <div>
        <child :message.sync="message"/>
    </div>
</template>
<script>
import Child from './Child.vue'
export default {
    components: {
        Child
    },
    data () {
        return {
            message: 'Hello World'
        }
    }
}
</script>

// 子组件
<template>
    <div>
        <p> {{message}} </p>
    </div>
</template>
<script>
export default {
    props: {
        message: {
            type: String,
            default: ''
        }
    }
}
</script>

在上述例子中，我们使用`props`把父组件中的`message`数据传递给了子组件，子组件中通过接收该数据来实现页面展示。

2. 事件总线

使用`uni.$emit`和`uni.$on`来实现事件的发布和订阅：

// 组件A
<template>
    <button @click="changeGlobalData">改变全局数据</button>
</template>
<script>
export default {
    methods: {
        changeGlobalData () {
            uni.$emit('changeData', 'new data')
        }
    }
}
</script>

// 组件B
<template>
    <div>
        <p> {{data}} </p>
    </div>
</template>
<script>
export default {
    data () {
        return {
            data: ''
        }
    },
    mounted () {
        uni.$on('changeData', data => {
            this.data = data
        })
    }
}
</script>

在上述例子中，我们使用`uni.$emit`来触发`changeData`事件，同时在组件B中使用`uni.$on`接收`changeData`事件并改变组件B数据。

3. Vuex

使用Vuex来管理全局数据，子组件通过`mapGetters`和`mapActions`获取并操作全局数据：

// store.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

const store = new Vuex.Store({
    state: {
        data: 'Hello World'
    },
    mutations: {
        setData (state, payload) {
            state.data = payload
        }
    },
    actions: {
        changeDataAsync ({commit}, payload) {
            setTimeout(() => {
                commit('setData', payload)
            }, 3000)
        }
    }
})
export default store

// 组件A
<template>
    <button @click="changeData">改变全局数据</button>
</template>
<script>
import { mapActions } from 'vuex'
export default {
    methods: {
        ...mapActions([
            'changeDataAsync'
        ]),
        changeData () {
            this.changeDataAsync('new data')
        }
    }
}
</script>

// 组件B
<template>
    <div>
        <p> {{data}} </p>
    </div>
</template>
<script>
import { mapGetters } from 'vuex'
export default {
    computed: {
        ...mapGetters({
            data: 'data'
        })
    }
}
</script>

在上述例子中，我们使用Vuex来存储并管理全局数据，子组件A通过`mapActions`调用`changeDataAsync`方法来修改全局数据，子组件B通过`mapGetters`获取全局数据。