【前端每日基础】day31——uni-app

modaoshi51991

已于 2024-05-30 15:33:38 修改

阅读量1.5k

点赞数 25

分类专栏：前端每日基础文章标签：前端 uni-app

于 2024-05-30 09:42:45 首次发布

本文链接：https://blog.youkuaiyun.com/modaoshi51991/article/details/139306534

版权

前端每日基础专栏收录该内容

45 篇文章

订阅专栏

uni-app 开发详细介绍

基本概念
uni-app：uni-app 是一个使用 Vue.js 开发多端应用的框架，可以编译到微信小程序、支付宝小程序、百度小程序、字节跳动小程序、H5、App等多个平台。
跨平台：一次开发，多端部署。通过条件编译实现多端差异化处理。
开发环境设置
HBuilderX：DCloud 提供的一款开发工具，支持 uni-app 的创建、开发、调试和发布。
Vue CLI：可以通过命令行工具创建 uni-app 项目。
安装 HBuilderX
下载并安装 HBuilderX。
打开 HBuilderX，选择新建 -> uni-app 项目，按照向导创建项目。
使用 Vue CLI
安装 Vue CLI：

npm install -g @vue/cli

创建 uni-app 项目：

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

项目结构
uni-app 项目的基本结构如下：

├── components       # 组件目录
├── pages            # 页面目录
│   ├── index        # 示例页面
│   │   ├── index.vue
│   │   ├── index.json
│   │   ├── index.scss
│   │   └── index.js
├── static           # 静态资源目录
├── main.js          # 入口文件
├── App.vue          # 应用配置
├── manifest.json    # 应用配置文件
├── pages.json       # 页面配置文件
└── uni.scss         # 全局样式

常用组件和 API
uni-app 提供了丰富的基础组件和 API，用于构建用户界面和调用系统能力。

常用组件
视图容器：< view>、< scroll-view>、< swiper>。
基础内容：< text>、< icon>、< rich-text>。
表单组件：< button>、< input>、< textarea>、< picker>。
导航组件：< navigator>。
媒体组件：< image>、< audio>、< video>。
示例代码

<template>
  <view>
    <text>{{ message }}</text>
    <button @click="handleClick">点击我</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello uni-app'
    }
  },
  methods: {
    handleClick() {
      this.message = 'Button clicked!';
    }
  }
}
</script>

<style>
button {
  padding: 10px;
  background-color: #007AFF;
  color: white;
  border-radius: 5px;
}
</style>

生命周期
uni-app 的生命周期与 Vue.js 的生命周期类似，但在不同平台上会有所不同。主要分为应用生命周期和页面生命周期。

应用生命周期
onLaunch：应用初始化时触发，全局只触发一次。
onShow：应用启动或从后台进入前台时触发。
onHide：应用从前台进入后台时触发。
页面生命周期
onLoad：页面加载时触发。
onShow：页面显示时触发。
onReady：页面初次渲染完成时触发。
onHide：页面隐藏时触发。
onUnload：页面卸载时触发。
6. 网络请求
使用 uni.request 进行 HTTP 请求。

uni.request({
  url: 'https://example.com/api/data',
  method: 'GET',
  success: res => {
    console.log(res.data);
  },
  fail: err => {
    console.error(err);
  }
});

条件编译
uni-app 通过条件编译实现多端差异化处理，使用 #ifdef 和 #endif 进行代码片段的条件编译。

// #ifdef MP-WEIXIN
console.log('微信小程序');
// #endif

// #ifdef APP-PLUS
console.log('App');
// #endif

路由与页面跳转
使用 uni.navigateTo 进行页面跳转。

uni.navigateTo({
  url: '/pages/detail/detail?id=123&name=test'
});

在目标页面获取参数：

onLoad(options) {
  console.log(options.id); // 输出：123
  console.log(options.name); // 输出：test
}

数据缓存
使用 uni.setStorage 和 uni.getStorage 对数据进行本地存储和读取。

// 存储数据
uni.setStorage({
  key: 'userInfo',
  data: { name: 'John', age: 30 },
  success: () => {
    console.log('数据存储成功');
  }
});

// 读取数据
uni.getStorage({
  key: 'userInfo',
  success: res => {
    console.log(res.data); // 输出：{ name: 'John', age: 30 }
  }
});

常见问题和解决方案
如何实现跨平台兼容？

使用条件编译（#ifdef 和 #endif）来处理不同平台的差异化代码。
如何处理表单数据提交？

使用表单组件（如、等），并通过 @submit 事件监听表单提交，使用 uni.request 发送数据到后台。
如何处理用户登录？

使用 uni.login 获取用户登录凭证，通过后台接口验证用户身份并获取用户信息。

uni.login({
  provider: 'weixin',
  success: loginRes => {
    if (loginRes.code) {
      // 发送 loginRes.code 到后台换取 openid, sessionKey, unionid
      uni.request({
        url: 'https://example.com/login',
        method: 'POST',
        data: {
          code: loginRes.code
        },
        success: res => {
          console.log('登录成功:', res.data);
        }
      });
    } else {
      console.error('登录失败！' + loginRes.errMsg);
    }
  }
});

如何使用自定义组件？

在 components 目录下创建自定义组件文件，并在页面中引入和注册组件。

<!-- 自定义组件 my-component.vue -->
<template>
  <view>
    <text>{{ text }}</text>
  </view>
</template>

<script>
export default {
  props: {
    text: {
      type: String,
      default: ''
    }
  }
}
</script>

<style>

/* 组件样式 */

在页面中使用自定义组件：

<template>
  <view>
    <my-component text="Hello from component"></my-component>
  </view>
</template>

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

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

总结
uni-app 是一个功能强大的跨平台开发框架，通过一次开发即可部署到多个平台。掌握其基本概念、项目结构、常用组件和 API、生命周期以及常见问题和解决方案，可以帮助你快速上手并开发出高质量的应用。在实际开发中，熟练使用 HBuilderX 和 Vue.js，将大大提高你的开发效率。希望这些内容对你的 uni-app 开发有所帮助。祝你面试成功！