功能总览

• 环境分离：提供开发、测试和生产环境的配置分离
• 常用插件整合：dayjs、pinia
• 基础封装：基于伊娃服务封装了快速获取字典、系统配置等方法
• 请求工具脚本：可通过 core/utils/request.js 调用接口
• 分包处理
• 主题定义
• 内置图标

启动项目

1. 安装依赖

npm install --registry https://registry.npmmirror.com

2. hbuilderx运行 hbuilderx => 选中项目 => hbuilderx运行菜单 => 运行微信小程序开发环境

全局组件

Icon/图标

Icon组件基于iconfont进行封装，用于获取项目中内置的iconfont图标，用法如下：

<!-- 基础用法 -->
<Icon value="icon-mp-bell-fill"/>

<!-- 调整尺寸-->
<Icon value="icon-mp-bell-fill" size="40rpx"/>

<!-- 调整颜色-->
<Icon value="icon-mp-bell-fill" color="#fff"/>

icon可在static/iconfont/demo_index.html中获取。

CustomHeader/自定义头部

自定义头部用于在 navigationStyle 为 custom 的页面中使用。用法如下：

<!-- 基础用法 -->
<CustomHeader title="详情页" />

<!-- 调整标题颜色 -->
<CustomHeader title="详情页" font-color="#333"/>

<!-- 调整背景色 -->
<CustomHeader title="详情页" background-color="#fff"/>

<!-- 去掉返回按钮 -->
<CustomHeader title="详情页" :with-back="false"/>

参数名称	参数说明
title	头部标题，默认为空字符串
font-color	头部标题字体颜色，默认为#fff
background-color	头部背景色，默认为transparent
with-back	是否包含返回按钮

DefaultAvatar/默认头像

DefaultAvatar组件为默认头像组件，使用项目中的logo制作的头像。用法如下

<DefaultAvatar/>

Empty/空提示

Empty组件为空提示组件，用于实现列表无数据时的空提示。用法如下

<!-- 基础用法 -->
<Empty/>

<!-- 指定消息 -->
<Empty message="未找到订单记录"/>

NoMore/没有更多数据

NoMore组件为没有更多数据组件，用于实现列表没有更多数据时的底部提示。用法如下

<!-- 基础用法 -->
<NoMore/>

<!-- 指定消息 -->
<NoMore>没有更多订单了</NoMore>

全局对象/方法

$consts/常量

可在core/plugins/consts.js中定义常量，如下方式获取

console.log(this.$consts.NAME);

$storage/本地存储

提供方法如下

方法名	参数	描述
get	key	从存储中获取数据
set	key, value	存储数据
remove	key	根据key删除存储的数据

用法如下

// 写入数据
this.$storage.set('myKey', 1);
// 获取数据
console.log(this.$storage.get('myKey'));
// 删除数据
this.$storage.remove('myKey');

$tip/全局提示

$tip全局对象封装了常用的消息提示方法。

注意：除了接口异常提示 apiFailed 方法外，其它提示方法最大仅支持7个汉字。如需提示更多内容，请使用 $dialog.alert 方法实现。

// 接口异常提示，传入异常对象
this.$tip.apiFailed(e)

// 接口成功提示
this.$tip.apiSuccess('操作成功')

// 消息提示
this.$tip.info('系统维护中')

// 成功提示
this.$tip.success('操作成功')

// 警告提示
this.$tip.warning('缺少必填信息')

// 错误提示
this.$tip.error('操作失败')

$dialog/弹窗提示

// 二次确认
this.$dialag.confirm('确认删除吗？')
  .then(() =>   { // 成功操作 })
  .catch(() =>   { // 取消操作 })

// 二次确认：指定标题
this.$dialag.confirm('确认删除吗？', '确认删除')
  .then(() =>   { // 成功操作 })
  .catch(() =>   { // 取消操作 })

// 二次确认：指定其它参数
this.$dialag.confirm('确认删除吗？', '确认删除', {
  cancelText: '取消',
  confirmText: '确认',
  confirmColor: '#007aff',
  // 其它 uni.showModal 方法参数
})
  .then(() =>   { // 成功操作 })
  .catch(() =>   { // 取消操作 })

// 提示
this.$dialag.alert('实现超过7个字的文字提示')

// 提示：指定标题
this.$dialag.alert('实现超过7个字的文字提示', '操作成功')

// 提示：指定其它参数
this.$dialag.alert('实现超过7个字的文字提示', '操作成功', {
  confirmText: '知道了',
  confirmColor: '#007aff',
  // 其它 uni.showModal 方法参数
})

$bus/事件总线

事件总线用于处理跨页面的事件。

// 绑定confirm事件
this.$bus.on('confirm', () =>   {
  // 删除confirm事件
  this.$bus.delete('confirm')
})
// 触发confirm事件
this.$bus.emit('confirm')

$dayjs/日期处理

详见dayjs中文网（非官网）

$c/获取系统配置值

详见获取系统配置值

$d/获取字典数据标签

详见获取字典数据标签

$dc/获取字典数据配置

详见获取字典数据配置

$defaultStore/默认store

可通过默认store获取默认store中的数据，如

// 获取客户端配置
console.log(this.$defaultStore.clientConfig)

$navigateTo/跳转

封装uni.navigateTo方法，实现tabbar和普通页面的统一跳转，用法如下

// 跳转到tabbar页面（tabbar页面需要存放在pages/tabbar下）
this.$navigateTo('/pages/tarbar/index')

// 跳转到普通页面
this.$navigateTo('/pages_common/pages/login')

// 成功和失败处理
this.$navigateTo('/pages_common/pages/login')
  .then(() =>   {})
  .catch(e =>   {})

$back/返回到上一页

封装uni.navigateBack方法，实现返回上一页，用法如下

// 普通调用
this.$back()

// 成功和失败的处理
this.$back()
  .then(() =>   {})
  .catch(e =>   {})

$getImageURL/获取图片路径

基于伊娃后端服务提供的获取图片接口，封装获取图片完整访问路径的方法，用法如下：

this.$getImageURL('文件的fileKey')

$previewImage/预览单张图片

基于 uni.previewImage 实现的图片预览功能，方便实现单张图片的预览。用法如下：

// 基础用法
this.$previewImage('图片地址')

// 指定其它参数
this.$previewImage('图片地址', {
  indicator: 'none',
  // 其它 uni.previewImage 方法参数
})

分包处理

注意：分包应该是子页面，而不应该是tabbar对应的页面，这会导致切换tab时页面还在加载中导致闪现的情况。

1. 创建分包目录，与pages同级，如pages_common
2. 修改pages.json文件如下

{
  "pages": [],
  "subPackages": [
    {
      "root": "pages_common",
      "pages": [
        {
          "path": "pages/login"
        }
      ]
    }
  ]
}