uniapp学习心得

最新推荐文章于 2024-10-17 15:32:11 发布

dx___dx

最新推荐文章于 2024-10-17 15:32:11 发布

阅读量1.7k

点赞数 28

文章标签： uni-app

本文链接：https://blog.csdn.net/dx___dx/article/details/139653272

版权

学习uni-app的过程中，我深刻体会到了其跨平台开发的便利性、高性能以及良好的生态系统，同时也认识到了一些挑战和不足。1

uni-app以其跨平台开发的能力，允许开发者使用一份代码同时开发出App、H5、小程序、快应用等多个平台的应用，这大大提高了开发效率。其基于Vue.js的开发模式，支持组件化和模块化开发，减少了冗余代码的编写，使得开发过程更加简单。此外，uni-app底层使用原生渲染，性能比H5和Webview渲染更快，能够提供流畅的用户体验。DCloud公司提供的丰富UI组件和插件市场，为开发者扩展应用功能提供了便利，形成了良好的生态系统。

然而，学习uni-app也面临一些挑战。对于没有Vue开发经验的人来说，学习和上手uni-app需要一定的时间。由于uni-app是跨端开发，它并不支持所有的原生API，这在一定程度上限制了其开发灵活度。此外，不同平台的差异可能导致uni-app应用在不同平台上的展示效果存在差异，需要在开发时特别注意兼容性问题。

总的来说，uni-app是一个值得尝试的开发方式，特别适合小规模项目和快速原型开发。尽管它对于复杂的项目和对性能要求较高的应用可能不如原生开发，但对于希望提高开发效率和跨平台兼容性的开发者来说，uni-app提供了一个很好的选择。

UniApp是一个使用Vue.js开发跨平台应用的开发框架，它可以编译到iOS、Android、以及各种小程序，UniApp提供了一套完整的开发方案，可以满足不同开发需求。

以下是一些UniApp的常用功能和API的简单概述：

条件编译：UniApp支持条件编译，可以在同一个项目中根据不同平台使用不同的代码和资源。

// #ifdef H5
console.log('Web 平台');
// #endif

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

数据绑定和响应式系统：UniApp使用Vue的数据绑定和响应式系统，可以轻松更新UI。

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

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

API封装：UniApp支持使用Promise进行异步处理，可以封装平台特有的API调用。

export function getUserInfo() {
return new Promise((resolve, reject) => {
uni.getUserInfo({
success: (res) => resolve(res),
fail: (err) => reject(err)
})
})
}

路由和导航：UniApp提供了路由和导航的API，可以方便地进行页面跳转。

// 跳转到指定页面

uniapp页面跳转的几种方式

一、uni.navigateTo

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

使用：

// 1.不传参

uni.navigateTo({

url:'./home/index'

});

// 2.传参字符串

uni.navigateTo({

url:`./home/index?title=${title}`

});

// 3.传参对象

// 传入

let data = {

title:'hello',

id: 1

}

uni.navigateTo({

url:`./home/index?data=`+ encodeURIComponent(JSON.stringify(data))

})

// 接受参数

onLoad: function (option) {

const item = JSON.parse(decodeURIComponent(option.item));

}

二、uni.redirectTo

定义：可以关闭当前界面并跳转到其他的非tabbar界面（可带参数）

使用：

uni.redirectTo({

url:'./home/index'

});

三、uni.reLaunch

定义：关闭所有页面，打开到应用内的某个页面（可带参数）

使用：

uni.reLaunch({

url:'./home/index'

});

四、uni.switchTab

定义：跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面

使用：

uni.switchTab({

url:'./home/index'

});

uni.navigateTo({
url: '/pages/detail/detail'
});

// 关闭当前页面，返回上一页面
uni.navigateBack({
delta: 1
});

组件系统：UniApp支持自定义组件和第三方组件，可以提高开发效率。

<template>
<view>
<custom-component :prop="value"></custom-component>
</view>
</template>

<script>
import customComponent from '@/components/custom-component.vue';

export default {
components: {
customComponent
},
data() {
return {
value: 'Hello Custom Component'