钉钉开发系列(九)SaltUI在VS中的开发

钉钉提供了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的基本开发就完成了。但仅此还是不够的，因为我们还需要相应的数据交互，具体可以参看后续的文章。

欢迎打描左侧二维码打赏。

转载请注明出处。