钉钉提供了SaltUI的组件，以利于界面的开发。SaltUI是基于React实现的，所以调用方式与React是一致的。具体的安装过程可以参照官方的说明文档。SaltUI基于React实现，在安装是基于nodejs的，nodejs一定要安装4.X版的，否则nowa会无法使用。在nowa安装好后，我们用VS2015新建一个项目SaltUIDemoSrc，然后开始初始化项目，为了方便后续的使用，做成了一个bat脚本init.bat，具体如下
set ProjectRoot=%~dp0 cd /d %ProjectRoot% nowa init https://github.com/nowa-webpack/template-salt/archive/master.zip
直接将该脚本init.bat在项目的目录下执行即可，然后将相应的文件添加到项目中。为了便于添加文件及文件夹，可以打开VS的显示所有文件的功能，然后直接将文件夹包含到项目中。
这个时候已经有了初步的项目结构，我们需要将其编绎，为了将编绎后的文件保存起来，可以再建一个项目SaltUIDemo。为了方便后续的编绎，我们也做成bat脚本build.bat，代码如下
set ProjectRoot=%~dp0 cd /d %ProjectRoot% nowa build -d ../SaltUIDemo其中-d是表示编绎输出的目标，这样编绎出来的项目，app.js是压缩的，适合于发布，如果为了调试需要不压缩的app.js，为此我们又做了一个不压缩的脚本buid_unzip.bat，代码如下
set ProjectRoot=%~dp0 cd /d %ProjectRoot% nowa build --skipminify -d ../DingDingMobile脚本中增加了一个【--skipminify】的参数，表示跳过压缩。
build.bat与build_unzip.bat可以单独执行，或者在SaltUIDemoSrc项目的生成事件中添加脚本调用，对于单独执行可以是cmd命令行执行，也可以是使用插件后执行，两种方式参看下图
项目编译的方式(采用这种方式后，就像普通项目一样直接编译就可以了)
插件执行的方式(Web Estension Pack插件)
这样编绎之后，将app.js app.css index.html popwin.html添加到SaltUIDemo中，然后从VS上直接启支SaltUIDemo，已经可以直接跑起来了。
下面是跑起来的效果
在SaltUI的示例界面中有一个九宫格的home界面，我们可以将示例中的src/pages/home的文件复制到我们项目的home下，同时将src/images/tingle-icon-symbols.svg复制到我们项目的src/images下，之后在app.js的require('./app.styl')的后面添加引用svg文件的代码
require('./app.styl');
// 插入 demo svg
let TingleIconSymbolsDemo = require('./../images/tingle-icon-symbols.svg');
let symbols = document.createElement('div');
ReactDOM.render( < TingleIconSymbolsDemo / > , symbols);
symbols.className = 't-hide';
(document.body || document.documentElement).appendChild(symbols);然后重新编译，再将项目跑起来，效果如下图
该PageHome.js的核心代码是this.state中的icons配置的UI九宫格的图标、标题以及跳转的路由router。我们可以仿照的添加一个新的页面，为了方便我们将添加新页面的命令做成了一个脚本add_page.bat，代码如下
set ProjectRoot=%~dp0 cd /d %ProjectRoot% nowa init page执行脚本后，输入页面的名称system，即compent name，而且要生成store.js。
之后在src/pages目录下会生成system的文件夹，我们将该文件夹添加到项目中。在app.js中添加相应的代码，见下图
同时，在PageHome中修改路由配置，比如将列表的配置修改成system的配置，如下图
再编译，跑起项目。
点击【系统】，进入到如下界面
page system中有些单调，我们可以引入一些SaltUI的控件，比如Button，代码如下
require('./PageSystem.styl');
const reactMixin = require('react-mixin');
const Actions = require('./actions');
const Store = require('./store');
const {Button} = SaltUI;
class System extends React.Component {
constructor(props) {
super(props);
this.state = {
};
}
render() {
let t=this;
return (
<div className="system">
page system
<Button type='primary'onClick={t.handleClick.bind(t)}>测试</Button>
</div>
);
}
handleClick()
{
alert("测试点击");
}
componentWillMount() {
}
componentDidMount() {
}
componentWillReceiveProps(nextProps) {
}
shouldComponentUpdate(nextProps, nextState) {
return true;
}
componentWillUpdate(nextProps, nextState) {
}
componentDidUpdate(prevProps, prevState) {
}
componentWillUnmount() {
}
}
reactMixin.onClass(System, Reflux.connect(Store));
module.exports = System;
1.要使用SaltUI的Button，需要在前面先引入，即const {Button} = SaltUI，要引入更多的SaltUI控件，只需要Button以逗号隔开继续添加即可，如const {Group,Field,TextField,Button,Boxs} = SaltUI;
2.在render中使用Button，同时绑定onClick事件，要调用js的部分必须用{}包起来，比如{t.handleClick.bind(t)}。
重新编译后启动，效果如下图
由于我们使用了中文，VS默认是GBK编码的，而网页一般是UTF-8的编码，所以需要将该文件保存为UTF-8的编码，可以在VS中【文件】->【高级保存选项】->选择【Unicode(UTF-8带签名)-代码页 65001】->【确定】
至此，SaltUI在VS的基本开发就完成了。但仅此还是不够的，因为我们还需要相应的数据交互，具体可以参看后续的文章。
欢迎打描左侧二维码打赏。
转载请注明出处。