探索UniApp

简介

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

uni-app由来：是为了解决跨平台开发的问题。在移动应用开发中，不同平台（如iOS、Android）有不同的开发语言和技术栈，这导致开发者需要针对不同平台开发多套代码，增加了开发和维护的成本。DCloud公司正是看到了这些问题，因此决心打造一款终极的跨平台解决方案，此时，uni-app就应运而生，Uni-app的出现使得开发者可以使用同一套代码，快速地部署到多个平台，提高了开发效率和降低了开发成本。

uni-app特点：

1.跨更多平台

2.一套代码，多平台运行

3.运行体验好，性能高

4.开发生态、周边生态丰富（组件丰富）

5.通用技术栈，学习/开发成本低

uniapp的优势 ：

1. **快速开发：**利用UniApp，开发者可以快速构建出功能完善、性能优良的跨平台应用，节省了大量开发时间。
2. **统一维护：**一套代码同时适配多个平台，减少了维护成本，统一了应用的开发和管理。
3. **良好的用户体验：**UniApp能够保证应用在不同平台上的一致性和稳定性，给用户带来良好的使用体验。
4. **开发者生态：**UniApp拥有庞大的开发者社区和生态系统，提供丰富的资源和支持，有助于开发者更好地学习和成长。

开发工具

1. Hbuilderx
2. 微信开发者工具 

创建新项目

准备工作：

1. 安装Node.js：**确保你的计算机上已经安装了Node.js，UniApp的开发环境需要使用到Node.js。

2. 安装HBuilderX：**HBuilderX是一款强大的跨平台IDE，支持UniApp的开发，你可以从官网下载并安装。

打开HBuilderX，点击工具栏里的文件 -> 新建 -> 项目

选择vue2点击创建

项目创建完成之后，选择“运行”-->"运行到浏览器“命令则创建成功

基础配置

1.结构目录

2.全局配置

在UniApp中，使用全局配置文件来配置整个应用的一些基本信息和行为。全局配置文件通常是App.vue或者main.js中的App对象，具体取决于你的项目结构。

1.页面路径配置

javascript
export default {
  pages: [
    'pages/index/index',
    'pages/about/about',
    // 其他页面路径
  ],
  window: {
    navigationBarTitleText: 'UniApp Demo',
    navigationBarBackgroundColor: '#ffffff',
    // 窗口样式等配置
  }
}

2.全局样式配置

export default {
  globalStyle: {
    navigationBarTextStyle: 'black',
    navigationBarBackgroundColor: '#ffffff',
    // 全局样式配置
  }
}

3.路由配置：可以在全局配置文件中配置应用的路由信息，包括路由模式、默认路由、路由拦截等。这些配置可以帮助你管理应用的路由跳转和页面导航。

export default {
  router: {
    mode: 'hash',
    base: '/',
    // 路由配置
  }
}

开始使用

资源路径的引入

在进行uni-app项目开发时，通常需要引入一些外部资源，如图片、视频、js脚本、CSS样式等等，以下讲解各种资源的引入方式。

1、本地图片或视频的引入

• 绝对路径,需提供完整的 URL 地址，包括协议、域名和资源路径。

例如：<image src="https://example.com/images/image.jpg">

• 相对路径，需提供相对于当前文件的路径

例如：<image src="../../static/images/image.jpg">

或者

<image src="@/static/images/image.jpg">  但是要注意，这种写法既不是传统意义上的绝对路径，也不是严格意义上的相对路径，而是 uni-app 框架提供的路径别名方式，用来指向特定目录中的资源文件。

2、js文件的引入

例如：import "../../common/js/index.js"

或者：（以下写法需要js文件里面有export 导出关键字才需要这样引入）

写法一： import common from '@/utils/common.js'

写法二： import common from '../../utils/common.js'  具体相对路径请根据实际文件夹情况来设置

3、css文件的引入

写法一： @import "@/styles/common.css"

写法二： @import "../../styles/common.css"   具体相对路径请根据实际文件夹情况来设置

生命周期

UniApp的生命周期与Vue.js框架的生命周期类似，但也有一些特定于UniApp的生命周期事件。以下是UniApp中常用的生命周期事件：

1. onLaunch：小程序初始化时触发，全局只触发一次。

2. onShow：小程序启动或从后台进入前台显示时触发，可以获取到路径和启动参数。

3. onHide：小程序从前台进入后台时触发。

4. onUniNViewMessage：监听从uni-app内的nvue页面发送来的数据。

5. onError：小程序出现错误时触发，包括脚本错误、API调用失败等。

6. onPageNotFound：页面不存在时触发，只有在app.json中定义了tabBar的页面，才会触发。

7. onUnhandledRejection：监听未处理的 Promise 拒绝事件。

8. onThemeChange：监听系统主题变化事件，仅app组件可用。

9. onPageShow：页面显示时触发，对应Vue生命周期中的mounted钩子。

10. onPageHide：页面隐藏时触发，对应Vue生命周期中的beforeDestroy钩子。

以上是UniApp中常用的生命周期事件。

基础组件

1.视图容器：view, scroll-view, swiper, movable-view 等。

2.基础内容：text, icon 等。

3.表单组件：button, input, checkbox, radio, switch 等。

4.导航组件：navigator, tabbar 等。

5.媒体组件：image, video, audio 等。

6.地图组件：map。

7.画布组件：canvas。

8.开放能力组件：ad, web-view 等。

常用Api

UniApp 提供了丰富的 API，用于处理页面生命周期、网络请求、本地存储、设备信息等。

1. 页面生命周期 API：

   • onLoad：页面加载时触发的生命周期钩子函数。
   • onShow：页面显示时触发的生命周期钩子函数。
   • onHide：页面隐藏时触发的生命周期钩子函数。
   • onUnload：页面卸载时触发的生命周期钩子函数。

2. 网络请求 API：

   • uni.request：发起网络请求。
   • uni.uploadFile：上传文件。
   • uni.downloadFile：下载文件。

3. 本地存储 API：

   • uni.setStorage：将数据存储到本地缓存中。
   • uni.getStorage：从本地缓存中获取数据。
   • uni.removeStorage：移除本地缓存中的数据。

4. 设备信息 API：

   • uni.getSystemInfo：获取设备信息，如屏幕宽度、高度等。
   • uni.getLocation：获取用户当前的地理位置信息。
   • uni.scanCode：调用客户端扫码功能。

5. 界面交互 API：

   • uni.showToast：显示消息提示框。
   • uni.showModal：显示模态对话框。
   • uni.showActionSheet：显示操作菜单。

6. 路由 API：

   • uni.navigateTo：保留当前页面，跳转到应用内的某个页面。
   • uni.redirectTo：关闭当前页面，跳转到应用内的某个页面。
   • uni.reLaunch：关闭所有页面，打开到应用内的某个页面。

7. 其他常用 API：

   • uni.getStorageSync：同步获取本地缓存数据。
   • uni.setNavigationBarTitle：设置当前页面的标题。
   • uni.showLoading / uni.hideLoading：显示/隐藏加载提示框。

这些 API 能够满足大部分应用的需求，在实际开发中根据具体需求选择合适的 API 进行调用。同时，UniApp 还支持插件扩展，可以通过导入插件来增加更多功能。

总结

 学习 UniApp 可以带来跨平台开发的便利，让开发者能够使用 Vue.js 构建一次代码，同时在多个平台上运行。在学习 UniApp 之前，最好先掌握 Vue.js。因为 UniApp 是基于 Vue.js 的，对 Vue.js 的理解将有助于更好地理解和使用 UniApp。学习 Vue.js 包括理解 Vue.js 的基本概念、指令、组件等。UniApp 的优势在于跨平台，因此了解不同平台的特性和限制是必要的。学习 UniApp 不仅要掌握其 API，还需要理解不同平台的适配方法和技巧，以确保应用在各个平台上都能够良好运行，为此不断深入学习