We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
接着自定义页面系统设计(二)讲,这个章节主要会讲解如何解决下面几个点:
注:本章节暂先以命令行的方式来演示如何搭建一个页面,下一节再以可视化界面的形式来演示
前面两节我们介绍,功能模块是需要被重复使用的,同一个模块module-a可能会被嵌入到page-a、page-b、page-c等等页面中使用。 因此我们的功能模块需要支持可配置化,在不同的页面中具有不同的表现,这样才能最大程度的支持模块重用。
module-a
page-a
page-b
page-c
我们在「摩羯」(我们正在实现的系统)管理后台创建页面的操作步骤如下:
我们可以看到在生成页面之前,我们需要为每一个功能模块准备一份配置信息,然后功能模块通过这个配置信息在不同的页面展现不同的效果。
生成的配置文件如下:
{ "moduleName": "module-single-banner", "bannerUrl": { "name": "图片地址", "type": "string", "value": "https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1962406471,854069461&fm=27&gp=0.jpg", "key": "bannerUrl" }, "url": { "name": "跳转链接", "type": "string", "value": "http://mor.monajs.cn/", "key": "url" } }
这份配置文件会被注入到页面中,并挂载在window上:
window
window.Capricorn.modules = { "module-text": [{ "name": "module-text_0", "config": { "moduleName": "module-text", "bannerUrl": { "name": "图片地址", "type": "string", "value": "https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1962406471,854069461&fm=27&gp=0.jpg", "key": "bannerUrl" }, "url": { "name": "跳转链接", "type": "string", "value": "http://mor.monajs.cn/", "key": "url" } } }] }
当在「摩羯」管理后台点击页面生成的时候,我们会收集到以下信息:
点击
title
description
icon
当这些信息都收集到之后,我们就可以进行页面生成了,分以下几步完成:
npm
js
css
The text was updated successfully, but these errors were encountered:
No branches or pull requests
接着自定义页面系统设计(二)讲,这个章节主要会讲解如何解决下面几个点:
模块信息配置
前面两节我们介绍,功能模块是需要被重复使用的,同一个模块
module-a
可能会被嵌入到page-a
、page-b
、page-c
等等页面中使用。因此我们的功能模块需要支持可配置化,在不同的页面中具有不同的表现,这样才能最大程度的支持模块重用。
我们在「摩羯」(我们正在实现的系统)管理后台创建页面的操作步骤如下:
我们可以看到在生成页面之前,我们需要为每一个功能模块准备一份配置信息,然后功能模块通过这个配置信息在不同的页面展现不同的效果。
生成的配置文件如下:
这份配置文件会被注入到页面中,并挂载在
window
上:最终页面的拼装
当在「摩羯」管理后台
点击
页面生成的时候,我们会收集到以下信息:title
、description
、icon
等当这些信息都收集到之后,我们就可以进行页面生成了,分以下几步完成:
npm
来管理我们的功能模块)js
和css
脚本引入到页面模板中The text was updated successfully, but these errors were encountered: