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

钉钉提供了SaltUI的组件，以利于界面的开发。SaltUI是基于React实现的，所以调用方式与React是一致的。具体的安装过程可以参照官方的说明文档。SaltUI基于React实现，在安装是基于nodejs的，nodejs一定要安装4.X版的，否则nowa会无法使用。在nowa安装好后，我们用VS2015新建一个项目SaltUIDemoSrc，然后开始初始化项目，为了方便后续的使用，做成了一个bat脚本init.bat，具体如下

set ProjectRoot=%~dp0cd /d %ProjectRoot%
nowa init https://github.com/nowa-webpack/template-salt/archive/master.zip

直接将该脚本init.bat在项目的目录下执行即可，然后将相应的文件添加到项目中。为了便于添加文件及文件夹，可以打开VS的显示所有文件的功能，然后直接将文件夹包含到项目中。

这个时候已经有了初步的项目结构，我们需要将其编绎，为了将编绎后的文件保存起来，可以再建一个项目SaltUIDemo。为了方便后续的编绎，我们也做成bat脚本build.bat，代码如下

set ProjectRoot=%~dp0cd /d %ProjectRoot%
nowa build -d ../SaltUIDemo

其中-d是表示编绎输出的目标，这样编绎出来的项目，app.js是压缩的，适合于发布，如果为了调试需要不压缩的app.js，为此我们又做了一个不压缩的脚本buid_unzip.bat，代码如下

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

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

转载请注明出处。

钉钉开发系列(九)SaltUI在VS中的开发相关推荐

钉钉开发系列(十)SaltUI与WebApi交互
Asp.net中常用的数据交互是WebApi的方式,对于请求者只是向一个url发起请求.对于SaltUI,官方推荐使用salt-fetch.js来进行数据交互,当然直接使用zepto.js或者jque ...
短信开发系列(二)：GSM手机短信开发之短信解码
短信开发系列目录: 短信开发系列(一):GSM手机短信开发初探短信开发系列(二):GSM手机短信开发之短信解码短信开发系列(三):短信接收引擎昨天写了短信的发送,今天我们在来谈谈如果读取SIM卡 ...
【Linux后台开发系列】Nginx源码从模块开发开始，不再对nginx源码陌生丨源码分析
Nginx源码从模块开发开始,不再对nginx源码发怵,值得学习,认真听完. 1. nginx的conf配置,cmd解析 2. nginx模块的八股文 3. nginx开发的细枝末节 [Linu ...
BizTalk开发系列(九) MAP的连接方法
更多内容请查看:BizTalk动手实验系列目录 BizTalk 开发系列 BizTalk中的Map编辑器可以在源架构和目标架构创建连接.有三种创建连接的方式 ...
涂鸦 Wi-Fi SDK开发系列教程——5.对模组二次开发
上期精彩回顾:Wi-Fi模组二次开发课程--4.烧录授权本章节旨在通过一个简单Demo,使开发者能够了解涂鸦SDK的启动流程,带领开发者基于涂鸦提供的SDK对模组进行二次开发. Demo功能介绍:硬 ...
sau交流学习社区-songEagle开发系列：Vue + Vuex + Koa 中使用JWT(JSON Web Token)认证
一.前言 JWT(JSON Web Token),是为了在网络环境间传递声明而执行的一种基于JSON的开放标准(RFC 7519). JWT不是一个新鲜的东西,网上相关的介绍已经非常多了.不是很了解的 ...
android jni 调用java_Android JNI开发系列(九)JNI调用Java的静态方法实例方法
JNI调用Java的静态方法&实例方法 package org.professor.jni.bean; import android.util.Log; /** * Created by pe ...
EOS智能合约开发系列(九): 高级权限设置
知识星球地址:https://t.zsxq.com/NNVRZzr 欢迎访问知识星球,并留言探讨.
TFS二次开发系列：七、TFS二次开发的数据统计以PBI、Bug、Sprint等为例（一）
在TFS二次开发中,我们可能会根据某一些情况对各个项目的PBI.BUG等工作项进行统计.在本文中将大略讲解如果进行这些数据统计. 一:连接TFS服务器,并且得到之后需要使用到的类方法. /// < ...

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

钉钉开发系列(九)SaltUI在VS中的开发相关推荐

最新文章

热门文章