alibaba/ice 小程序应用配置详解-优快云博客

alibaba/ice 小程序应用配置详解

ice ICE是阿里巴巴开源的一款企业级中后台搭建工具，提供了丰富的组件库、模板以及可视化拖拽功能，帮助企业快速构建高质量的企业级应用。项目地址: https://gitcode.com/gh_mirrors/ice1/ice

前言

在基于 alibaba/ice 框架开发小程序时，合理的应用配置是项目开发的重要环节。本文将全面介绍如何在 ice 框架中配置小程序应用，包括全局配置和页面级配置，帮助开发者更好地掌握小程序配置技巧。

全局配置详解

基本概念

全局配置是小程序的核心配置之一，它决定了整个应用的基础行为和外观表现。在 ice 框架中，我们通过 src/app.ts 文件中的 miniappManifest 对象来定义这些配置。

配置方式

在项目根目录的 src/app.ts 文件中，我们可以导出 miniappManifest 对象来配置小程序：

export const miniappManifest = {
  // 小程序窗口表现配置
  window: {
    defaultTitle: '我的小程序',  // 默认标题
    navigationBarBackgroundColor: '#ffffff',  // 导航栏背景色
    navigationBarTextStyle: 'black',  // 导航栏标题颜色
    navigationBarTitleText: '首页',  // 导航栏标题文字
    backgroundColor: '#f8f8f8',  // 窗口背景色
    backgroundTextStyle: 'dark',  // 下拉 loading 的样式
    enablePullDownRefresh: false,  // 是否开启下拉刷新
    onReachBottomDistance: 50  // 页面上拉触底事件触发时距页面底部距离
  },
  
  // 路由配置
  routes: [
    'index',  // 首页
    'user/profile',  // 用户资料页
    'product/detail',  // 商品详情页
  ],
  
  // 底部 tab 栏配置
  tabBar: {
    color: '#999999',  // 文字默认颜色
    selectedColor: '#1AAD19',  // 选中文字颜色
    backgroundColor: '#ffffff',  // 背景色
    borderStyle: 'black',  // tabbar 上边框颜色
    list: [{
      pagePath: 'index',  // 页面路径
      text: '首页',  // 文字
      iconPath: 'assets/home.png',  // 图标路径
      selectedIconPath: 'assets/home-active.png'  // 选中图标路径
    }]
  }
};

关键配置项说明

window 配置：控制小程序窗口的表现形式，包括导航栏、背景色、下拉刷新等。
routes 配置：定义小程序的所有页面路由路径，这是 ice 框架特有的配置方式，相比原生小程序更加简洁。
tabBar 配置：如果小程序需要底部导航栏，可以通过此配置项定义。

最佳实践

对于多页面应用，建议将所有路由路径集中在此配置中，便于统一管理
窗口样式建议保持与品牌风格一致
路由命名应遵循一致的命名规范，如全部小写、使用连字符等

页面级配置详解

基本概念

除了全局配置外，每个小程序页面也可以有自己的配置项，用于覆盖全局配置或定义页面特有的行为。

配置方式

在页面组件文件中，我们可以通过导出 pageConfig 来定义页面级配置：

import { definePageConfig } from 'ice';

export const pageConfig = definePageConfig(() => ({
  defaultTitle: '商品详情',  // 页面标题
  allowsBounceVertical: 'NO',  // 是否允许纵向回弹
  transparentTitle: 'auto',  // 导航栏透明设置
  titleBarColor: '#262833',  // 导航栏背景色
  optionMenu: {
    icon: 'https://example.com/menu-icon.png'  // 右上角菜单图标
  },
  titlePenetrate: 'YES',  // 标题是否可穿透
  barButtonTheme: 'light'  // 导航栏按钮主题
}));