2025年unapp学习心得

大家好，我是讯享网，很高兴认识大家。

开发环境搭建

1. 安装HBuilderX：HBuilderX是uniapp开发必备的集成开发环境，可以到官网下载安装包进行安装。

2. 安装uni-app插件：在HBuilderX中打开插件市场，搜索并安装uni-app插件。

3. 创建uniapp项目：在HBuilderX中选择“新建项目”，选择uni-app模板，填写项目名称、路径等信息，点击“创建”按钮即可创建uniapp项目。

4. 配置开发环境：在HBuilderX中打开项目，点击“运行”按钮，选择需要运行的平台（如微信小程序、App等），根据提示进行配置，如填写AppID、配置证书等。

5. 运行项目：配置完成后，点击“运行”按钮即可在对应平台上运行uniapp项目。

需要注意的是，不同平台的开发环境配置可能会有所不同，需要根据具体情况进行调整。同时，还需要安装相应的开发工具，如微信开发者工具、支付宝开发者工具等，才能在对应平台上进行开发和调试。

项目基本目录结构

uniapp项目的基本目录结构如下：

讯享网

其中，pages目录存放各个页面的vue文件；static目录存放静态资源文件；components目录存放组件文件；App.vue是应用程序的根组件；main.js是应用程序的入口文件。

可以使用以下几种方法来引入资源：

template引入资源,如image，video等标签的src属性时，可以使用相对路径或绝对路径，形式如下：

<image class="logo" src="/static/logo.png"></image>
       <image class="logo" src="@/static/logo.png"></image>
  
       <image class="logo" src="../../static/logo.png"></image>

js文件或script标签内，可以使用相对路径和绝对路径，形式如下：

import add from '@/common/add.js'

import add from '@/common/add.js'

css文件或style标签内，可以使用相对路径和绝对路径，形式如下：

@import url('../../common/uni.css');

css文件或style标签内引用的图片路径，可以使用相对路径也可以使用绝对路径，形式如下

background-image: url(/static/logo.png);
       background-image: url(@/static/logo.png);

       background-image: url(../../static/logo.png);

生命周期可以分为以下几种：

1. 应用程序生命周期

应用程序生命周期是指应用程序从启动到关闭的整个过程，包括应用程序启动、显示、隐藏、关闭等事件。常用的应用程序生命周期函数有`onLaunch()`、`onShow()`、`onHide()`等。

2. 页面生命周期

页面生命周期是指页面从创建到销毁的整个过程，包括页面创建、显示、隐藏、销毁等事件。常用的页面生命周期函数有`onLoad()`、`onShow()`、`onHide()`、`onUnload()`等。

3. 组件生命周期

路由配置主要包括两个方面：页面路由和全局路由。

1. 页面路由

页面路由是指应用程序中各个页面之间的跳转关系。在uniapp中，可以使用`uni-app`框架提供的`uni.navigateTo()`、`uni.redirectTo()`、`uni.reLaunch()`、`uni.switchTab()`等方法来进行页面跳转。

例如，要从当前页面跳转到`/pages/home/home.vue`页面，可以使用`uni.navigateTo()`方法：

```js
uni.navigateTo({
url: '/pages/home/home'
});
```

需要注意的是，在使用页面路由时，需要注意页面路径的正确性，以及页面跳转的顺序和方式，避免出现不必要的问题。

2. 全局路由

全局路由是指应用程序中各个页面之间的公共跳转关系，如底部导航栏、侧边栏等。在uniapp中，可以使用`uni-app`框架提供的`uni-tabbar`、`uni-sidebar`等组件来实现全局路由。

小程序分包功能

在uniapp中，可以使用小程序分包功能来优化小程序的加载速度和性能。小程序分包是将小程序的代码分成多个包，分别加载不同的页面和功能，从而提高小程序的启动速度和响应速度。

在uniapp中，可以使用`pages.json`文件来配置小程序分包。`pages.json`文件中的`subPackages`字段可以用来定义小程序的分包信息。例如：

在上面的例子中，`subPackages`字段定义了两个分包，分别是`pages/subpkg1/`和`pages/subpkg2/`。每个分包中包含了多个页面，可以根据具体需要进行配置。

父子组件之间的通信。

父子组件之间可以通过props和$emit进行通信。父组件通过props向子组件传递数据，子组件通过$emit向父组件发送事件。

总结

学习uniapp需要掌握Vue.js框架、HTML、CSS、JavaScript等前端基础知识。在开发过程中，需要注意项目基本目录结构、引入资源、生命周期、路由配置、路由跳转、路由传参、小程序分包、组件、父子组件通信等方面。通过不断的实践和学习，可以提高uniapp开发的效率和质量。