uniapp学习笔记

目录

uniapp项目结构

uniapp页面生命周期

uniapp组件和指令

uniapp路由管理

uniapp网络请求

uniapp组件通信

怎么使用uniapp开发一个小程序

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. ``：类似于HTML中的div元素，用于布局。

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

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

4. ``：用于创建按钮。

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

6. `

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

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

8. ``：用于包裹轮播项。

指令：

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.push`方法（或其他跳转方式）即可实现路由跳转。例如：

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

在路由的目标组件中，可以使用`$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属性来传递数据给子组件：

// 父组件



// 子组件

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

2. 事件总线

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

// 组件A



// 组件B

在上述例子中，我们使用`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



// 组件B

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

怎么使用uniapp开发一个小程序

使用Uniapp开发一个简单小程序的步骤如下：

1. 安装HBuilderX集成开发环境。

2. 在HBuilderX中选择创建Uniapp项目，选择要创建的小程序类型，如微信小程序、支付宝小程序等。

3. 将项目代码放置在项目目录下的pages文件夹内，其中包括每个页面的Vue组件、配置文件等。

4. 在App.vue中配置小程序基本信息，如名称、AppID等。

5. 在pages.json中配置小程序的页面路由信息、窗口样式、tabBar等。

6. 利用Vue的基础知识，编写页面的Vue组件代码，实现页面的交互逻辑、数据渲染等。

7. 在需要使用小程序API的地方引入API模块，如使用uni.request进行网络请求、使用uni.showToast显示提示框等。

8. 进行小程序打包与发布，生成小程序包文件（如wxapkg文件），并上传至小程序平台进行审核发布。