毫末uni-app框架

官网：https://haomo-tech.com

作者：胡小根

邮箱：[email protected]

安装

node版本：建议 12.13.1

npm install -g cnpm
npm install -g cross-env
cnpm install

# 配置HBuilderX的sass
mkdir -p /Applications/HBuilderX.app/Contents/HBuilderX/plugins/compile-node-sass/node_modules/node-sass-china/vendor/darwin-x64-72
cd /Applications/HBuilderX.app/Contents/HBuilderX/plugins/compile-node-sass/node_modules/node-sass-china/vendor/darwin-x64-72
wget https://github.com/sass/node-sass/releases/download/v4.13.1/darwin-x64-72_binding.node -O binding.node

开发

请使用HBuilderX进行开发。编写代码，可以考虑同时使用Visual Studio Code

组件开发

• 1.在components/hm-components编写组件。只有有接口数据交互的复杂组件才需要在这里面写组件。

• 2.在templates/下面编写组件模板。模板的语法见：http://handlebarsjs.com/

• 3.在configs/uni-ui.js中注册组件

• 4.在xmind中引用组件。请按照以下步骤安装xmindparser。xmindparser可以将xmind转换为json文件。json文件需保存为 configs/xmind.json。

# 请将以下所有命令，一起拷贝到terminal下执行。
pip3 install xmindparser
sudo cat > /usr/local/bin/xmindparser <<EOF
#!/usr/local/bin/python3

# -*- coding: utf-8 -*-
import re
import sys

from xmindparser.main import main

if __name__ == '__main__':
    sys.argv[0] = re.sub(r'(-script\.pyw?|\.exe)?$', '', sys.argv[0])
    sys.exit(main())
EOF
sudo chmod a+x /usr/local/bin/xmindparser
export PATH=$PATH:/usr/local/bin

使用xmind2code生成代码

特别注意：以下 <module> 指的是模块名称，要替换成对应的模块名称！

• 1.创建xmind文件。在configs/目录中创建xmind文件，文件命名规则为：<module>.xmind。特别注意：xmind文件中的主题，必须为模块名称（如下图中红色箭头指示的module）

• 2.创建xmind2code/.xmind2code.<module>.json文件

{
  "xmind": "./configs/<module>.xmind",
  "uiConfig": "./configs/uni-ui.js",
  "templateDir": "./templates",
  "routeFile": "./pages.json",
  "output": "./pages"
}

• 3.生成代码

# 以下命令中的 <module> 请替换为自己的xmind文件的模块名称。
# 特别注意：xmind文件命名，尽量
npm run gen <module> # 生成所有代码（包括vue/js/css）

# 删除生成vue代码
npm run clean <module>

布局

采用Flex布局：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

组件间通信

采用：https://uniapp.dcloud.io/collocation/frame/communication

eventName命名规范：.。这里的id为组件的id，eventName为组件支持的事件响应。

例如：

f6ff37c70518d2565de4d0c09a683aaf.on-refresh

参考

• http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html