Uni App 简介与解析

联合国教科文组织（United Nations Educational, Scientific and Cultural Organization）曾经提出“千里之堤毁于蚁穴”的名言，强调了在构建大型项目时细节的重要性。在当代信息时代，互联网更是充斥着大量的信息与娱乐内容。为了吸引访问者并确保他们持续访问，越来越多的网站需要更像应用程序一样的交互性。此外，随着移动设备的普及，跨平台性已经成为开发者越来越关注的问题。怎样保证用户浏览网页时无障碍、高效呢？Uni App深度结合Vue生态体系，给前端开发者提供了“一处编写，随处运行”的解决方案。在这篇文章中，我们将介绍如何使用Uni App来构建博客平台。

一、Uni App 简介

Uni App，全称“Universal Application”，是一个基于 Vue.js 的开发框架，可以用一套代码同时编译出 Android、iOS、H5等多个平台的应用，并且能够方便地集成原生模块。 Uni App 抽象出”统一API转换器“层（该层对外只提供JS API），将语法转换为对平台产商底层API调用，进而实现了一处编写、随处运行的理念。

二、使用Uni App构建博客平台

1. 数据交互

无论是博客平台的文章列表还是分类列表，都需要从后端接口中获取数据。Uni App提供了网络请求API和Vuex数据管理方法。

1） 网络请求

Uni App引入V3版本的uni-request网络请求库，支持Promise和拦截器等高级功能。可以使用如下方式实现对后端接口的数据获取：

```
// data.js代码
import request from '@/common/js/request.js';

export const getBlogs = (pageNo, pageSize) => {
  return request({
    url: '/api/blog/list',
    method: 'get',
    params: {
      pageNo,
      pageSize,
    },
  });
};
```

```
// blogs.vue代码
async onLoad() {
    const result = await getBlogs(this.pageNo, this.pageSize);
    if (result.code === 0) {
        // 成功处理逻辑
    } else {
        // 错误处理
    }
},
```

2） 数据管理

为了更好地管理状态（例如列表页与详情页之间）, 我们可以使用Uni App封装成uni-simple-router插件：

```
// App.vue代码
<template>
  <div class="app">
    <!-- 无navbar时需添加一个20px的placeholder保持与顶部距离一致 -->
    <div class="placeholder" style="height: 20upx;" v-if="$root.$mp.query.navbar !== 'true'"></div>

    <!--导航栏-->
    <template v-if="$root.$mp.query.navbar === 'true'">
      <navBar></navBar>
    </template>

    <!--路由容器-->
    <router-view></router-view>

    <!--选项卡 / 底部导航-->
    <tabBar></tabBar>
  </div>
</template>
<script>
  import tabBar from "@/components/tabbar.vue";
  import navBar from "@/components/navbar.vue";

  export default {
    components: { tabBar, navBar },
  };
</script>
```

注意：如果是使用前所未有的uniCloud，可以直接在业务代码中访问websocket、云函数、数据库等基础服务。

2.UI设计

UI设计是博客平台中最具代表性的东西，在Uni App中有两种方式实现UI设计：weex和uni-ui。

1） Weex

Weex是阿里巴巴推出的跨平台组件化开发框架，可以快速实现高交互性的博客界面。Weex的重点在于其高度定制化的控件样式，并且它非常适合存在足够大数据量的情况下进行操作和复杂场景构建。使用Weex可以使布局更为灵活和自由：

```
<template>
  <div class="flex-col container">
    <div class="header flex-col">
      <div class="title">这是一个标题</div>
      <div class="info">
        <div>作者</div>
        <div>发布时间</div>
      </div>
    </div>
    <div class="content">这是一篇博客正文</div>
    <div class="footer">
      <div class="like">点赞</div>
      <div class="share">分享</div>
    </div>
  </div>
</template>
<style lang="less" scoped>
@import '~@/common/less/base.less';

.container {
  width: 100%;
  height: auto;
  padding: 20upx;
  margin-top: 20upx;
}

.header {
  .title {
    font-size: 32upx;
  }

  .info {
    display: flex;
    justify-content: space-between;
    font-size: 24upx;
  }
}

.content {
  font-size: 28upx;
  line-height: 44upx;
  margin-top: 20upx;
  margin-bottom: 20upx;
}

.footer {
  display: flex;
  justify-content: space-between;
  border-top: 2upx solid #ebebeb;
  padding-top: 20upx;

  .like,
  .share {
    font-size: 28upx;
  }
}
</style>
```

2） Uni-UI

Uni-UI是基于Vue.js的组件库，拥有丰富的组件和UI样式。Uni-UI提供了非常多的UI组件，并支持Vue组件和生命周期钩子函数。我们在Uni App中使用了uni-list组件来完成文章列表显示：

```
<template>
  <view>
    <uni-list class="blogs" :header="header">
      <uni-card :shadow="true" v-for="(blog, index) in blogs" :key="blog.id">
        <div slot="header" class="title">{{ blog.title }}</div>
        <div slot="footer" class="foot">
          <i class="iconfont icon-time"></i> {{ blog.createTime }}
        </div>
      </uni-card>
    </uni-list>
  </view>
</template>
```

3.富文本编辑器

博客平台中需要实现对富文本的编辑和展示，可以使用Uni App插件提供的HBuilderX富文本编辑器插件。该插件支持多种富文本编辑功能和文本样式，并且可以方便地与后台数据交互。

4.博客发布

在Uni App中，可以使用H5+实现博客的发布。H5+是一个跨平台Hybrid App解决方案，支持将应用打包成APP并在各个应用商店发布。具体实现过程如下：

1） 创建配置文件 package.json

```
{
  "name": "blog",
  "version": "0.0.1",
  "description": "uni-app blog",
  "main": "dist/build/h5plus/" //注意此处指定的是h5plus目录
}
```

2） 安装 HBuilderX 和 uni-app-cli

```
npm install -g uni-app-cli

npm install -g hbcli
```

3） 使用 uni-app-cli 执行构建命令，打包 H5+ 应用

```
cd your_project_directory

npm run build:h5plus
```

4） 将封装后的资源文件传入 HBuilderX 的 res 目录

将打包生成的dist/build/h5plus/中的资源文件上传到服务器，并将HBuilderX中项目的res文件夹中覆盖原有的文件。

5） 打包成 apk

在HBuilderX打开项目，点击“发行”——“云打包”，上传更新的资源文件，最后再提取下载