uni-app学习心得体会

uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、H5、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉）等多个平台。

一、uniapp的主要特点及开发环境

（1）主要特点

1. 跨平台开发：uniapp支持同时开发iOS、Android、H5、小程序等多个平台的应用，开发者只需要编写一份代码，就能将应用发布到不同的平台。

2. 极致性能：uniapp支持原生组件渲染和编译运行，可以实现与原生应用相当的性能表现。

3. 多端统一：uniapp的UI框架使用了VUE.js，能够提供一致的开发体验和统一的UI风格。

4. 便利性：uniapp提供了一系列扩展组件和插件，可以快速集成到应用中，并提供了丰富的开发文档和社区支持。

综合来说，uniapp是一种高效、便捷、跨平台的移动应用开发框架，可以大大提升开发效率，降低开发成本，受到了广泛的欢迎和应用。

（2）开发环境

HBuilderX 

• H 是 HTML 的首字母
• Builder 是构造者
• X 是 HBuilder 的下一代版本。

我们也简称HX。

HX的特点：轻巧，运行速度快，vue开发强化，界面清爽简洁，强大的语法提示，高效极客工具，更强的JSON支持，以上特点有利于开发者更好的开发。

二、uniapp的项目结构

如图所示

 三、uniapp组件的局部引用和全局引用

（1）局部引用

 （2）全局引用

1.在main.js中注册为全局组件

import child from './components/page-head.vue'
Vue.component('page-head',pageHead)

2.在页面中直接使用

<template>
    <view>
        <page-head title="123">
			
		</page-head>
    </view>
</template>

<script>
    export default {  
        data() {
            return {
                
            }
        },
        methods: {

        },
        onLoad() {
			
        }
    }
</script>

<style>

</style>

 四、uniapp的生命周期

uniapp 的生命周期是指应用程序在运行过程中会经历的一系列阶段。uniapp 提供了三种生命周期钩子函数：应用级别的生命周期（App），页面级别的生命周期（Page）和组件级别的生命周期（Component）。下面是各个钩子函数的解释：

应用级别生命周期函数（App）：

• onLaunch：应用程序启动时触发，只会触发一次。
• onShow：应用程序启动或从后台进入前台时触发。
• onHide：应用程序从前台进入后台时触发。
• onError：应用程序发生错误时触发。
• 

页面级别生命周期函数（Page）：

• onLoad：页面加载时触发，只会触发一次。
• onShow：页面出现在前台时触发。
• onHide：页面从前台进入后台时触发。
• onUnload：页面卸载时触发。
• 

组件级别生命周期函数（Component）：

• created：组件实例化时触发。
• attached：组件被添加到页面节点树时触发。
• ready：组件渲染完成时触发。
• detached：组件被从页面节点树中移除时触发。

 

 五、总结

通过本学期对uniapp的学习，使我对uniapp有了全面的认知，在学习的过程中，也遇到了不少问题，但在解决问题的过程中，也让我受益匪浅，在今后的学习过程中我会尝试做一些小项目来巩固自己的知识，不断地加深自己的技能。