[toc]

Uniapp笔记1

介绍

什么是 uni-app？

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

uni-app 由 DCloud 公司开发，它的目标是帮助开发者快速构建跨平台的应用。

uni-app 官网 https://uniapp.dcloud.net.cn/

uni-app 的功能框架图

从下面uni-app功能框架图可看出，uni-app在跨平台的过程中，不牺牲平台特色，可优雅的调用平台专有能力，真正做到海纳百川、各取所长。

uniapp 中的通用代码

globalData 全局变量

globalData 是一个全局的变量对象，它可以在所有的页面中访问到。

globalData 全局变量对象通常定义在 App.vue 文件中。

示例如下：

// App.vue 文件中
export default {
  globalData: {
    userInfo: null,
    text: 'text'  
  }
}

操作 globalData 全局变量对象的方式如下：

• 在 App.vue 文件中直接操作 globalData 对象。
• 在任何页面中，可以通过 getApp() 方法获取到 App 实例，然后通过 App 实例访问 globalData 对象。
• 如果需要把globalData的数据绑定到页面上，可在页面的onShow页面生命周期里对全局变量进行重赋值。

示例如下：

// 页面中访问 globalData 全局变量对象
export default {
  onLoad() {
    // 获取 App 实例 
    const app = getApp();
    console.log(app.globalData.text); // 获取全局变量
    app.globalData.text = 'newText'; // 修改全局变量
  }
}

注意：在页面的生命周期函数中，如onLaunch或onShow，你可以直接使用this.globalData来临时获取全局数据，因为在这些生命周期函数中，getApp()可能还没有创建出应用实例。

全局样式

在App.vue中，可以定义一些全局通用样式，例如需要加一个通用的背景色，首屏页面渲染的动画等都可以写在App.vue中。

/* App.vue 全局通用样式 */
page {
  background-color: #f5f5f5;
}

API 请求封装