Web Shell for nanachi

简介

该项目是一个可以让 nanachi 项目运行在浏览器中的一个 Web Shell，提供了和小程序一致的路由系统、API 系统等。

开发

执行 npm install 即可安装依赖，通过 npm start 即可在本地 (http://localhost:8080) 开启开发服务器。

调试建议

如果你用的编辑器是 VSCode，建议你安装下列插件：

Name: TODO Highlight
Id: wayou.vscode-todo-highlight
Description: highlight TODOs, FIXMEs, and any keywords, annotations...
Version: 1.0.4
Publisher: Wayou Liu
VS Marketplace Link: https://marketplace.visualstudio.com/items?itemName=wayou.vscode-todo-highlight

TODO Highlight 可以将代码注释中的一些关键信息高亮，让你可以迅速注意到重点。

Name: ESLint
Id: dbaeumer.vscode-eslint
Description: Integrates ESLint JavaScript into VS Code.
Version: 1.7.2
Publisher: Dirk Baeumer
VS Marketplace Link: https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint

ESLint 可以与项目中的 ESLint 结合，方便检查代码中的常见错误。

技术方案

该项目用到了如下几种技术/技术方案：

• React (使用 qreact 代替)
• Mobx
• Styled-jsx
• Webpack
• Babel
• ESLint
• postcss
• Ramda (以及函数式编程)

如果上述的技术或者方案你不熟悉，可以先通过以下链接了解一下：

• React 官方文档 中文文档
• Mobx 官方文档 中文文档
• Styled-jsx 官方文档
• Webpack 官方文档 中文文档
• Babel 官方文档 中文文档
• ESLint 官方文档 中文文档
• Ramda 官方文档 中文文档

技术细节

路由系统

这个项目实质上是一个由 Mobx 和 React 实现的 SPA，小程序的页面对应的是 SPA 里的组件，只不过用户的页面会被包裹一层以实现各种生命周期罢了。

_AUTO_GENERATED_DO_NOT_MODIFY_PAGES_ 数组会将开发者所写的页面及路由导出，通过 App.registerPage() 注册保存在 store 中。之后所有调用 React.navigateTo() 打开的页面都会从路径中找出对应的页面，作为 SPA 的页面渲染。

Page 组件

每一个 Page 实例都有自己的生命周期，包括 onLoad, onReady, onShow, onHide 以及 onUnload。所有开发者实现的页面组件，都存在于 ErrorBoundary 组件中，防止开发者页面报错导致应用崩溃。

页面暂时分为两种：

1. 堆栈页面。所有通过 navigateTo() 打开的页面都是堆栈页面，每个页面为一层，挂载和卸载时有入场/退场动画。
2. Tab 页面。由 switchTab() 打开的页面或者应用默认打开的 Tab 页，所有 Tab 页面为一层，挂载和卸载时无过渡动画。

路由系统由一个数组来实现页面堆栈，初始状态下没有任何页面，在初始化的时候根据是否有 Tab 页面分为两种情况：

1. 如果有合法的 Tab 页面，所有 Tab 页面作为页面堆栈的底层，所有的非 Tab 页面都堆叠在该页面上方。Tab 页面在底层进行渲染，激活 Tab 页在浏览器视口内，非激活 Tab 页通过 transform() 移动至视口外。如果有非 Tab 页面通过 navigationTo() 方法打开，将会覆盖在 Tab 页面层之上。
2. 如果没有合法的 Tab 页面，底层页面将不存在，所有堆栈页面直接按堆栈顺序显示。