概述

EBAOZU 移动端基于 Vue 2 + Uni-app 架构开发，支持一次编写编译到微信小程序、H5、以及独立 APP。本文档说明在移动端子系统中新增页面的标准开发流程。

---

目录结构与规范

view/uniapp/
├── api/                    # API 接口统一封装目录
├── components/             # 公共复用组件
├── config/                 # 接口与环境配置
├── libs/                   # 登录与授权工具
├── mixins/                 # Vue 混入（如主题颜色混入）
├── pages/                  # 主包页面
│   ├── index/              # 首页
│   ├── goods_details/      # 商品详情
│   └── ...
├── pages/users/            # 分包：用户中心子页面
├── pages/activity/         # 分包：营销活动页面
├── pages.json              # 页面与分包路由主配置
└── ...

---

新增页面开发步骤

创建页面组件

在对应的主包 pages/ 或分包目录下创建 .vue 文件：

<!-- view/uniapp/pages/custom/index.vue -->
<template>
  <view class="custom-page" :style="colorStyle">
    <!-- 自定义导航栏（可选） -->
    <NavBar title="自定义功能" :isBack="true"></NavBar>

    <!-- 列表内容 -->
    <view class="content">
      <view class="item-card" v-for="item in list" :key="item.id">
        <text class="title">{{ item.title }}</text>
      </view>
    </view>

    <!-- 空状态 -->
    <emptyPage v-if="!list.length && !loading" title="暂无数据"></emptyPage>
  </view>
</template>

<script>
import colors from '@/mixins/color';
import emptyPage from '@/components/emptyPage.vue';
import NavBar from '@/components/NavBar.vue';
import { getCustomList } from '@/api/custom';

export default {
  mixins: [colors],
  components: { emptyPage, NavBar },
  data() {
    return {
      list: [],
      loading: false
    };
  },
  onLoad(options) {
    this.fetchData();
  },
  onPullDownRefresh() {
    this.fetchData().then(() => {
      uni.stopPullDownRefresh();
    });
  },
  methods: {
    async fetchData() {
      this.loading = true;
      try {
        const res = await getCustomList();
        this.list = res.data.list || [];
      } catch (err) {
        uni.showToast({ title: err.msg || '加载失败', icon: 'none' });
      } finally {
        this.loading = false;
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.custom-page {
  min-height: 100vh;
  background-color: #f5f5f5;
  .content {
    padding: 20rpx;
    .item-card {
      background: #fff;
      border-radius: 12rpx;
      padding: 24rpx;
      margin-bottom: 20rpx;
    }
  }
}
</style>

配置页面路由 (pages.json)

根据页面体积与加载优先级，配置在主包或分包中：

{
  "pages": [
    {
      "path": "pages/custom/index",
      "style": {
        "navigationBarTitleText": "自定义功能",
        "enablePullDownRefresh": true,
        "navigationBarBackgroundColor": "#ffffff",
        "navigationBarTextStyle": "black"
      }
    }
  ],
  "subPackages": [
    {
      "root": "pages/users",
      "pages": [
        {
          "path": "custom_detail/index",
          "style": {
            "navigationBarTitleText": "详情"
          }
        }
      ]
    }
  ]
}

定义与调用 API

在 view/uniapp/api/ 下创建或补充 API 接口定义：

// view/uniapp/api/custom.js
import request from '@/utils/request.js';

export function getCustomList(data) {
  return request.get('custom/list', data, { noAuth: false });
}

---

跨端条件编译示例

Uni-app 支持针对不同端（微信小程序、H5、APP）编写专有代码：

<!-- 模板条件编译 -->
<!-- #ifdef MP-WEIXIN -->
<button open-type="share">分享给微信好友</button>
<!-- #endif -->

<!-- #ifdef H5 -->
<button @tap="copyLink">复制链接</button>
<!-- #endif -->

// JS 条件编译
// #ifdef MP-WEIXIN
wx.showShareMenu({ withShareTicket: true });
// #endif

---

注意事项

1. 分包优化：非首屏核心主路径页面，尽量配置在 subPackages 分包中，防止微信小程序主包体积超过 2MB 限制。
2. 样式单位：布局一律使用 rpx 单位以适配不同屏幕分辨率。
3. 安全区域适配：页面底部吸底操作栏需加上 padding-bottom: env(safe-area-inset-bottom); 适配 iPhone 底部安全区。