uni-app 开发微信小程序系列之 -- 框架基础

1. 框架简介

uni-app 是一个使用 Vue.js 开发跨平台应用的框架，它可以帮助开发者快速构建高质量的移动应用。uni-app 支持微信小程序、支付宝小程序、百度小程序、头条小程序、QQ 小程序、快应用、H5、App 等多种平台。

uni-app 框架包含两部分：

• 核心库： 负责跨平台底层 API 的实现，如网络请求、文件操作、数据库操作等。
• UI 框架： 负责跨平台 UI 组件的实现，如按钮、输入框、列表等。

2. 全局样式

uni-app 的全局样式是通过 globalStyle 对象来设置的，globalStyle 对象是一个 JSON 对象，它包含了各种样式属性，如 backgroundColor、color、fontSize 等。

{
  "navigationBarBackgroundColor": "#ffffff",
  "navigationBarTextStyle": "black",
  "navigationBarTitleText": "uni-app",
  "backgroundColor": "#f5f5f5",
  "backgroundTextStyle": "light",
}

3. pages 列表

uni-app 的 pages 列表是一个数组，它包含了所有页面组件的路径。

{
  "pages": [
    "pages/index/index",
    "pages/logs/logs"
  ]
}

4. navigationBarTitleText 属性

navigationBarTitleText 属性是用来设置页面标题的，它可以设置全局标题和当前页面的标题。

{
  "navigationBarTitleText": "uni-app"
}

5. 样式设置

uni-app 的样式设置支持多种方式，包括内联样式、外部样式表和预处理器。

内联样式

内联样式是指直接在 HTML 元素中设置样式，这种方式简单方便，但可维护性较差。

<view style="color: red;">Hello uni-app</view>

外部样式表

外部样式表是指将样式写在单独的 CSS 文件中，然后在 HTML 元素中引用该 CSS 文件，这种方式可维护性较好，但灵活性较差。

<link rel="stylesheet" href="style.css">

.red-text {
  color: red;
}

预处理器

预处理器是一种可以在编译前处理样式的工具，它可以帮助开发者编写更简洁、更易维护的样式。uni-app 支持 Sass、Less 等预处理器。

// style.scss
.red-text {
  color: red;
}

<view class="red-text">Hello uni-app</view>

6. 结语

本文介绍了 uni-app 的框架基础，包括全局样式、pages 列表、navigationBarTitleText 属性、样式设置等内容。通过对这些基础知识的学习，读者可以快速上手 uni-app 开发微信小程序。