前端【uniapp】02-uniapp【全局文件】【组件【内置、扩展】】【声明周期】【API调用】【条件编译】

为你编程 / 2024-04-23 / 原文

一、uni-app 基础知识

　　uni-app 是组合了 Vue 和微信小程序的相关技术知识，要求大家同时俱备 Vue 和原生小程序的开发基础。

1、全局文件

　　在小程序中有全局样式、全局配置等全局性的设置，为此在 uni-app 中也有一些与之相对应的全局性的文件。

uni.scss

　　uni-app 项目在运行时会自动将 uni.scss 会自动被注入到页面样式当中，根据这个特性可以在 uni.scss 中定义一些全局 SASS 变量，统一页面的样式风格，如主色调、边框圆角等。

1 /* uni.scss */
2 /* 在原有 sass 变量基础上添加新的变量 */
3 $uni-bg-color: #f4f4f4;

App.vue

　　App.vue 在 uni-app 中是一个特殊的文件

 1 <script>
 2   // 相当于小程序的 app.js
 3   export default {
 4     onLaunch: function () {
 5       console.log('App Launch')
 6     },
 7     onShow: function () {
 8       console.log('App Show')
 9     },
10     onHide: function () {
11       console.log('App Hide')
12     },
13   }
14 </script>
15 
16 <!-- 组件模板需要被省略 -->
17 <template></template>
18 <!-- 组件模板需要被省略 -->
19 
20 <style>
21   /* 相当于 app.wxss */
22   page {
23     background-color: $uni-bg-color;
24   }
25 </style>

template 组件模板须要省略
script 相当于小程序的 app.js
style 相当于小程序的 app.wxss，为其指定 lang="scss" 属性后，会自动安装 dart-sass 插件

pages.json

　　pages.json 文件即包含了小程序的【全局配置】也包含了【页面配置】：

 1 {
 2     "pages": [
 3         {
 4             "path": "pages/index/index",
 5             "style": {
 6                 "navigationBarTitleText": "学习uni-app"
 7             }
 8         }
 9     ],
10     "globalStyle": {
11         "navigationBarTextStyle": "black",
12         "navigationBarTitleText": "uni-app",
13         "navigationBarBackgroundColor": "#F8F8F8",
14         "backgroundColor": "#F8F8F8"
15     },
16     "uniIdRouter": {}
17 }

　　上述是 pages.json 初始的代码，其中

pages 对应的是【页面配置】，path 指定页面的路径，style 为该路径的相关配置，如背景色、导航栏等
globalStyle 对应【全局配置】的 window，用来全局配置页面背景色、导航栏等

　　那其它的全局配置如何定义呢？比如 tabBar、subPackages

　　答案是其它的【全局配置】与 globalStyle 平级就可以了

重点：tabBar 的图片必须要放到 static 目录下，否则小程序中无法运行

关于`tabBar`的配置

　　在pages.json文件中与globalStyle 平级

 1 {
 2     "pages": [],
 3     "globalStyle": {},
 4     "tabBar": {
 5     　　"color": "",
 6     　　"selectedColor": "",
 7     　　"borderStyle": "",
 8     　　"position": "",
 9     　　"list": [
10        {
11         "text": "",
12         "pagePath": "",
13         "iconPath": "",
14         "selectedIconPath": ""
15       }
16     ]
17   },
18     "uniIdRouter": {}
19 }

关于subPackages的配置

　　在pages.json文件中与globalStyle 平级

 1 {
 2     "pages": [],
 3     "globalStyle": {},
 4   "tabBar": {},
 5   "subPackages": [
 6     {
 7       "root": "",
 8       "pages": [
 9         {
10           "path": "",
11           "style": {
12             
13           }
14         }
15       ],
16     }
17   ],
18     "uniIdRouter": {}
19 }

　　其它的【全局配置】，也都采用与 globalStyle 平级的方式来写就可以了。

2、组件

　　在 uni-app 中组件分成内置组件和扩展组件。

内置组件

　　uni-app 把微信小程序的内置组件都做了重新实现，保证能够在不同的平台表现尽量一致，因此在学习使用uni-app 的组件时，只需要参照微信小程序内置组件即可。

 1 <view class="message">hello uni-app!</view>
 2 <image src="" mode="" />
 3 <swiper autoplay>
 4   <swiper-item>
 5     <image src="" />
 6   </swiper-item>
 7   <swiper-item>
 8     <image src="" />
 9   </swiper-item>
10 <swiper>

　　内置组件的使用与原生组件基本一致

扩展组件

　　在 uni-app 中的扩展组件（uni ui）大多是一些业务性与交互性比较强的组件，比如倒计时组件、日历组件、文件上传等，扩展组件是需要下载到项目录目录中才可以使用。

　　uni-app官方文档：https://uniapp.dcloud.net.cn/component/uniui/uni-ui.html#

　　参照文档来使用相应的组件，插件市场也有许多第三方的优秀组件库，如 uView(不支持 Vue3)

生命周期

　　在 uni-app 中生命周期也微信小程序一样也分成3个类别，分别是应用级生命周期、页面级生命周期和组件级生命周期，其支持情况可见下表：

　　当然上表是不需要大家死记硬背的，大家记这样一个原则即可：

　　【应用生命周期】和【页面生命周期】采用小程序的生命期，自定义【组件生命周期】使用 Vue 的生命周期。

　　结合 Vue3 的 setup 语法使用【应用生命周期】和【页面生命周期】需要用到 @dcloudio/uni-app 包

1 <script setup>
2   // Vue 组件生命周期
3   import { onMounted } from 'vue'
4   // 应用/页面生命周期（小程序生命周期）
5   import { onLaunch, onLoad } from '@dcloudio/uni-app'
6   
7   // ...
8 </script>

API 调用

命名空间

　　uni-app 把微信小程序绝大部分的 API 做了重新实现，使其尽量能在不同的平台（H5的限制比较多）中使用，所不同的是在调用这些 API 时，需要将命名空间换成 uni，举例来说明，原来的调用方法为 wx.request 在 uni-app 中则换成 uni.request 即可。

 1 <script setup>
 2   import { onLoad } from '@dcloudio/uni-app' 
 3   
 4   // 页面加载后获取接口数据
 5   onLoad(() => {
 6     // 原来的 wx.request 换成 uni.request
 7     uni.request({
 8       url: '',
 9       success(result) {
10         console.log(result)
11       }
12     })
13   })
14 </script>

Promise

　　在原生小程序中有部分的 API 是不支持 Promise 的，比如 wx.request、wx.uploadFile 等，在 uni-app 中对这些 API 的调用方法做了规订，使其即能支持 Promise 也可以支持 callback 方式，它是这样规定的：

在调用 API 时，如果传入 success、fail、complete 任意回调函数，即为callback方式，就不不能使用then方式拿结果

1 // 回调方式，不返回 Promise
2 uni.request({
3   url: 'https://your.api.com/xxx',
4   success: (result) => {
5     console.log(result)
6   }
7 })
8 
9 // 如果在调用 API 时传入了 success fail complete 那么不会返回 Promise

在调用 API 时，没有传入任意回调函数，即为 Promise 方式，可以通过then方式拿结果，配合async/awit使用

1 // Promise 方式
2 const result = uni.request({
3   url: 'https://your.api.com/xxx'
4 })
5 // Promise 对象
6 console.log(result)

　　返回值为 Promise 时方便配置 async/wait 来获取结果。

条件编译

　　uni-app 目标是通过编写一套代码，实现跨端的开发，但是不同的平台之间存在的差异也是事实，很难做到完全一套代码在各个平台都能够兼容，比如 uni.login 这个 API 在 H5 平台就无法被支持，再比如 keep-alive 只能用在 H5 端。

　　为了解决平台的差异性，特殊情况下需要为不同平台编写合适的代码，且要保证这些代码只在某个的平台下运行，uni-app 提供了条件编译的技术解决方案。

基本语法

　　条件编译是用特殊的注释作为标记，在编译时根据这些特殊的注释，将注释里面的代码编译到不同平台。

　　语法格式为：

1 #ifdef 平台名称 || 平台名称
2 特定平台要执行的代码
3 #endif
4 
5 #ifndef 平台名称
6 除了特定平台之外其它平台要执行的代码
7 #endif

　　下面以 H5 平台来给大家演示具体的语法：

 1 <script setup>
 2   // #ifdef H5
 3   console.log('这段代码只在 H5 端才会运行')
 4   // #endif
 5 </script>
 6 <template>
 7   <!-- #ifdef H5 -->
 8   <view class="iconfont icon-search"></view>
 9   <!-- #endif -->
10   
11   <!-- #ifndef H5 -->
12   <view class="iconfont icon-scan"></view>
13   <!-- #endif -->
14 </template>
15 <style lang="scss" scoped>
16   .iconfont {
17     color: #666;
18     font-size: 30rpx;
19     /* #ifdef H5 */
20     font-size: 28rpx;
21     /* #endif */
22   }
23 </style>

平台名称

　　不同的不台对应了不同的名称，这些名称都是 uni-app 内置提供的，比如 H5、MP-WEIXIN、APP-PLUS 等

值	生效条件
VUE3	Vue 版本为 Vue3
APP-PLUS	App 平台，包括 Android 和 IOS
APP-ANDROID	Android 平台
APP-IOS	IOS 平台
H5	H5 平台
MP	小程序平台，包括所有小程序
MP-WEIXIN	微信小程序
MP-ALIPAY	阿里小程序