元初框架核心概念详解 元初框架是一个为微信小程序设计的应用框架，它提供了一套完整的架构模式和工具集，用于构建复杂的小程序应用。以下是对框架核心概念的详细解析： 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. 框架工作流程 元初框架的工作流程如下： 应用启动：加载 [代码]application.js[代码] 配置 初始化主页面：[代码]pages/main/index.js[代码] 的 [代码]onLoad[代码] 方法执行 状态绑定：通过 MobX 将全局状态绑定到页面 用户认证：检查登录状态，获取用户信息 数据加载：获取账本信息和其他必要数据 路由初始化：初始化路由系统，加载起始页面 UI渲染：根据当前路由状态渲染对应的页面组件 用户交互：通过路由系统处理页面导航和状态变更 7. 框架特点 模块化设计：各功能模块高度解耦，便于维护和扩展 响应式状态管理：使用 MobX 实现数据与UI的自动同步 单页应用模式：主页面作为容器，动态加载不同功能组件 集中式路由：统一的路由管理，简化页面导航 主题支持：内置多主题切换功能，提升用户体验 权限控制：基于用户角色的权限管理系统 丝滑切换页面：有效解决了微信原生路由跳转白屏现象，并可实现多样化自定义跳转与切换动画 元初框架通过这些核心概念和组件，为小程序开发提供了一套完整的解决方案，使开发者能够更高效地构建复杂的应用。 效果预览 略 上一篇，突破限制：微信小程序SPA架构的创新之路，帮助开发者更好地理解和应用这一创新架构。 作者：万能复式记账小程序开发者

4 节课，教你快速入门小程序前端。本系列视频，由腾讯课堂NEXT学院、微信学堂联合出品。

Donut 多端框架是小程序团队推出的移动应用开发框架。开发者可以使用小程序技术与工具，高效率开发移动应用，实现一次开发多端运行。现在已有不同领域的开发者选择多端框架，实现更高的开发经营效率。