当前位置：首页 > news >正文

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

news 文章来源：https://blog.csdn.net/modaoshi51991/article/details/139306534 2024/9/22 9:42:12

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); // 输出：123console.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, unioniduni.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 开发有所帮助。祝你面试成功！

相关文章：