元初框架核心概念详解

元初框架是一个为微信小程序设计的应用框架，它提供了一套完整的架构模式和工具集，用于构建复杂的小程序应用。以下是对框架核心概念的详细解析：

1. 应用配置 - application.js

application.js 是整个应用的配置中心，定义了应用的基本信息和全局设置。

appInfo:{
  version: 'v2.0.1',
  latestVersion: '',
  envVersion:'develop',
  appId:'APP_ID',
  // ... 其他配置 ...
},
startPage: 'journal',
startParam: {},
// ... 其他配置 ...
theme:'default'

主要配置项包括：

• 版本信息：控制应用版本号和环境版本
• 启动页面：定义应用启动时加载的第一个页面
• 主题设置：支持多种主题模式（默认、蓝色、微信、深色、粉色）

这些配置为整个应用提供了统一的参数管理，使得应用行为可以通过配置文件集中控制。

2. 数据管理 - db

数据库模块是框架的核心组件之一，负责数据的存储、查询和管理。

2.1 数据源结构

lib/db/db.js 定义了应用的初始数据结构，包括页面配置、账户信息、交易记录等：

module.exports = {
  "pages": [
    // 页面定义
    {
      "index": 20,
      "name": 'config',
      "title": '系统设置',
      "status": 1,
      "icon": 'setting-fill',
      "uri": "config",
      "path": 'pages/views/constant/config/index',
      // ... 其他页面属性 ...
    },
    // ... 其他页面 ...
  ],
  // 其他数据集合
  "transactionEntry":[
    // 交易记录
  ]
}

2.2 数据库API

lib/db/api.js 提供了操作数据的接口：

class Database {
  // 数据查询方法
  async addCollection(collectionName) {
    if (dataSource[collectionName]) {
      return `Collection "${collectionName}" already exists.`;
    }
    dataSource[collectionName] = [];
    return `Collection "${collectionName}" has been added successfully.`;
  }
  // ... 其他数据操作方法 ...
}

module.exports = {
  db(){
    return new Database()
  }
};

数据库模块实现了类似MongoDB的集合操作模式，支持数据的增删改查，为应用提供了统一的数据访问层。

3. 路由系统 - router

路由系统负责页面间的导航和状态管理，是框架的核心功能之一。

3.1 路由存储 - routeStore

lib/router/routeStore.js 管理路由状态和页面配置：

export const routeStore = observable({
  pages: [],
  currentPage: {},
  stacks: [],
  locker: false,
  tabbar: {
    tabItems: []
  },
  // ... 其他状态 ...
  
  // 初始化第一个页面
  _initFirstPage() {
    let curPage = {}
    const startPage = wx.getStorageSync('startPage') || application.page.startPage
    // ... 页面初始化逻辑 ...
  }
  // ... 其他方法 ...
})

3.2 路由控制器 - router.js

lib/router/router.js 实现了页面导航的核心逻辑：

class Router {
  // 页面导航
  to(target, success) {
    this._navigate(target);
    // ... 导航逻辑 ...
  }
  
  // 页面回退
  back(delta = 1) {
    // ... 回退逻辑 ...
  }
  
  // 切换Tab页
  switchTab(target) {
    // ... Tab切换逻辑 ...
  }
  
  // ... 其他方法 ...
}

// 创建单例实例
const router = new Router();
module.exports = router;

路由系统实现了以下核心功能：

• 页面导航：支持普通页面和Tab页面的跳转
• 页面栈管理：维护页面历史记录，支持回退操作
• 路由锁机制：防止快速连续导航造成的问题
• 参数传递：支持页面间数据传递

4. 状态管理 - store

框架采用MobX进行状态管理，实现了响应式的数据流。

4.1 全局状态 - globalStore

export const globalStore = observable({
  ledger: {},
  sysInfo: {},
  userInfo: {},
  theme: 'light',
  
  setLedger: action(function (ledger) {
    // ... 设置账本逻辑 ...
  }),
  // ... 其他方法 ...
})

4.2 功能模块状态

框架为不同功能模块提供了专门的状态管理：

• 账户管理：accountsStore.js
• 交易记录：transactionStore.js
• 通知管理：noticeStore.js
• 记账功能：postingStore.js

这些状态存储通过 store/store.js 统一导出：

import { configure } from 'mobx-miniprogram'
export { globalStore } from './globalStore'
// ... 其他状态导出 ...
export { routeStore as routerStore} from '@/lib/router/routeStore'

configure({ enforceActions: "observed" });

5. 主应用页面 - main

pages/main/index.js 是应用的主入口页面，负责初始化框架和管理全局UI状态：

Page({
  data: {
    loading: true,
    // ... 其他数据 ...
  },
  
  onLoad() {
    // 创建状态绑定
    this.storeBindings = createStoreBindings(this, {
      store: globalStore,
      fields: [ 'userInfo', 'theme'],
    });
    // ... 初始化逻辑 ...
  },
  
  // 获取用户信息
  async getUserInfo() {
    // ... 获取用户数据和账本信息 ...
  },
  
  // 路由初始化
  routeInit(userInfo) {
    routerStore.init(userInfo)
      .then(res => {
        log.info("路由初始化成功:", res)
      }).catch(e => {
        log.error("路由加载失败:", e)
      })
  },
  
  // ... 其他方法 ...
})

主页面的WXML模板使用条件渲染，根据当前路由状态显示不同的页面组件：

<page data-theme="{{theme}}" data-weui-theme="{{theme}}">
  <view class="page">
    <!-- 加载状态 -->
    <view class="page bg-page" wx:if="{{loading}}">
      <!-- ... 加载UI ... -->
    </view>
    
    <!-- 主内容区 -->
    <view class="page bg-page" wx:else>
      <!-- 根据当前页面名称条件渲染不同组件 -->
      <gen-index-page
        wx:if="{{currentPage.name ==='index'}}"
        page="{{currentPage}}"
      ></gen-index-page>
      
      <!-- ... 其他页面组件 ... -->
    </view>
    
    <!-- 全局UI组件 -->
    <gen-notice-bar
      <!-- ... 属性 ... -->
    ></gen-notice-bar>
    
    <!-- 底部标签栏 -->
    <tabbar
      wx:if="{{(currentPage && (currentPage.tab)) && !loading}}"
      items="{{tabItems}}"
      border
      active-index="{{tabActive||0}}"
      bind:switchTab="switchTab"
    />
  </view>
</page>

6. 框架工作流程

元初框架的工作流程如下：

1. 应用启动：加载 application.js 配置
2. 初始化主页面：pages/main/index.js 的 onLoad 方法执行
3. 状态绑定：通过 MobX 将全局状态绑定到页面
4. 用户认证：检查登录状态，获取用户信息
5. 数据加载：获取账本信息和其他必要数据
6. 路由初始化：初始化路由系统，加载起始页面
7. UI渲染：根据当前路由状态渲染对应的页面组件
8. 用户交互：通过路由系统处理页面导航和状态变更

7. 框架特点

1. 模块化设计：各功能模块高度解耦，便于维护和扩展
2. 响应式状态管理：使用 MobX 实现数据与UI的自动同步
3. 单页应用模式：主页面作为容器，动态加载不同功能组件
4. 集中式路由：统一的路由管理，简化页面导航
5. 主题支持：内置多主题切换功能，提升用户体验
6. 权限控制：基于用户角色的权限管理系统
7. 丝滑切换页面：有效解决了微信原生路由跳转白屏现象，并可实现多样化自定义跳转与切换动画

元初框架通过这些核心概念和组件，为小程序开发提供了一套完整的解决方案，使开发者能够更高效地构建复杂的应用。

效果预览

略

上一篇，突破限制：微信小程序SPA架构的创新之路，帮助开发者更好地理解和应用这一创新架构。

---

作者：万能复式记账小程序开发者