# nowa-dingtalk-salt-template ver 0.8.0
  钉钉微应用 React 开发脚手架 & 开发教程
  
  这是邢台钉友软件，在nowa脚手架基础上，集成DingTalk客户端。目的是帮助大家尽快了解和掌握钉钉开发的入门知识.少走一些坑.

---

# 体验篇

## 经验提醒
1. mac系统: 安装nowa,请先仔细阅读nowa文档中的安装部分,注意权限.

## 安装软件
1. [ Node 必装]( https://nodejs.org/en/ ) : 建议安装LTS版本

2. [ Chrome 必装 ]( http://rj.baidu.com/search/index/?kw=chrome ): 谷歌浏览器,安卓web调试必备

3. [ cnpm 建议]( https://npm.taobao.org/ ): NPM 阿里镜像, 安装命令: npm install -g cnpm --registry=https://registry.npm.taobao.org

4. [ Nowa (命令行版): ]( https://nowa-webpack.github.io/docs/an_zhuang.html ) 集成的前端开发环境, 安装方式,在终端窗口执行:
```
npm i nowa -g --registry=https://registry.npm.taobao.org && nowa install --registry=https://registry.npm.taobao.org
```

## 运行项目 (请在终端里面使用命令行操作)

1. 创建项目主目录: (可自由选择)

    win: md d:\appDev & cd d:\appDev 

    mac: mkdir ~/appDev & cd ~/appDev 

2. 初始化项目: (使用nowa下载项目模板-脚手架)

    2.1 nowa init https://github.com/caohaijiang/nowa-dingtalk-antdmobile-template/archive/master.zip -a ding

    2.2 按提示进行输入(可回车默认), 至 " npm | cnpm " 选项(第六步),选择cnpm(从阿里镜像下载);
    
3. 运行项目

    3.1 下载安装完成, 执行命令: npm start

    3.2 按nowa提示的url, 打开浏览器访问

    3.3 打开谷歌浏览器的开发者工具: win => F12 | mac => opton+command+i

---

# Web开发篇 (相关知识库,看文档尾部)

## 经验提醒

1. win系统: VScode安装过程,选择全部选项,可以右键打开项目; mac也可以,但配置麻烦,请自行搜索解决办法;

2. nowa init 初始化项目时, -a ding 参数是别名, 下次本机使用 nowa init ding,就可以创建项目.

3. VScode中,好用的插件: 
```
    Auto Close Tag: 自动补全结束标签
    Auto Rename Tag: 自动修改结束标签
    Class autocomplete for HTML: 自动补全HTML代码
    Debugger for Chrome: 调试工具
    Guides: 显示网格线
    HTML Snippets: 包含html标签
    vscode-icons : 文件/首选项/文件图标主题进行设置
    auto-open markdown preview : 打开MD文档自动打开预览
```

## 基础应用(在体验篇基础增装)

1. [ VScode 选装]( https://code.visualstudio.com/ ): 微软出品轻便的代码编辑器,通吃系统,常用插件

2. [ Git 建议 ]( https://git-scm.com/ ) : 如用vscode则建议使用git协作; mac版本包含在xcode配套工具里面

3. [ xcode(mac) 按需 ] ( https://developer.apple.com/xcode/ ) : iphone开发调试模拟器,可打开苹果商店安装

## Nowa开发环境命令 (不使用钉钉jsApi)

* 创建项目: nowa init ding
* 创建页面: nowa init page | nowa init page-note (带注释)
* 创建组件: nowa init mod (函数组件) | nowa init rmod(react组件)

---

# 钉钉应用开发篇

## 准备工作

## 1. 创建钉钉微应用

    1.1 [ 创建团队,并且进入管理后台: ]( https://oa.dingtalk.com/?spm=a3140.7858860.2231602.8.TS6zcN#/login ) 

    2.2 进入 [ 企业应用 ], 新建应用: 

        提示1: 准备图标一枚,必用

        提示2: 首页地址填写为 ' http://192.168.10.11/ ',尾部的斜杠必须存在,否则就坑自己.

        提示3: 创建完成后,需要再次打开设置,复制 AgentID 存到文件备用 

    3. 进入微应用设置,复制 CorpID和CorpSecret 存到文件备用

## 2. 申请开发体验 ( 提供鉴权服务和自定义微应用授权测试 ) 

> 2.1 加入团队: 钉钉开发学习团, 向管理员申请授权,自行添加微应用(授权范围限制本人与相关人,禁止所有人)

> 2.2 修改配置: config/develop.js => 
```
{ 
    "DINTALK_API": true, 
    "corpId": "xxxxx",
    "AUTH_URL": "http://123.56.120.20:3001/",
    "APP_URL": { "url": "http://本机IP:3000/" },
    "API_URL": " 你的Api后台服务资源url " ,
    "MOCK_URL": "你的mockApi后台服务资源url " 
}
```

> 2.3 启动项目

> 2.4 手机钉钉切换到 "钉钉开发学习团"的工作台, 打开自定义微应用

## 3. 开发调试 (涉及使用钉钉jsApi的页面/组件) 

### iphone 调试(只能安装xcode, 使用模拟器)

    1. [ 下载IOS开发版,存放'~App/Dingtalk.app'目录或自定义 ]( https://open-doc.dingtalk.com/docs/doc.htm?spm=a219a.7629140.0.0.CIcf6a&treeId=171&articleId=104908&docType=1) 

    2. 启动模拟器： xcrun instruments -w 'iPhone 6 Plus'

    3. 安装应用到模拟器；xcrun simctl install booted ~/App/Dingtalk.app 

    > 为什么要用iphone调试? 因为安卓和苹果在手机上渲染内核不同,偶有兼容问题,缺乏调试环境就郁闷了.

## Android真机(只能使用安装真机+谷歌浏览器DevTools进行调试)

    1. Android测试版,可作为开发版使用;

    2. 真机开启usb调试,用usb数据线连接开发电脑

    3. 打开Chrome,地址栏输入: chrome://inspect/#devices

    4. 手机/钉钉/工作台: 打开自行创建的微应用应用, Chrome浏览器会检测到要被调试的页面.

    > 为什么要用真机调试? 因为dingtak jsapi的console.log()打印信息,只有在这样调试环境才能看到.

# 了解脚手架

## 依赖包

1. 环境构建
* nowa: [是基于 webpack 的前端开发解决方案集合。](http://nowa-webpack.github.io/docs/)

2. UI组件
* antd-mobile: [antd-mobile是阿里蚂蚁提供的一套ui组件库，希望帮助使用者更快更好地开发钉钉微应用界面。](https://mobile.ant.design/)

3. 路由层工具
* React-keeper: [更适合国人和nowa的路由库](https://github.com/Jias/natty-fetch)

4. 数据层解决工具

* natty-storage: [一个优秀的项目api资源管理库](https://github.com/Jias/natty-fetch)
* no-flux:  [一个简洁新兴的React数据状态处理库](https://github.com/fengsx/no-flux)
* unity-api: [一个方便的React数据和view交互管理库](https://github.com/fengsx/no-flux)
* json-server: [一个强大的模拟数据库](http://g.alicdn.com/platform/tingle-ui/1.1.18/docs/docs.html#tingle-dialog)    
* mock.js: [一个方便的模拟数据生成器](https://github.com/fengsx/no-flux)

## 目录结构
```
├── html  ---------------------------------- 
|   └── index.html  ------------------------
├── src  ----------------------------------- 
|   ├── apis  ------------------------------ api资源配置
|   ├── assets  ---------------------------- 静态资源
|   |   ├── icon  -------------------------- Svg图标
|   |   └── img  --------------------------- 图片
|   ├── components  ------------------------ 公共组件库
|   ├── config  ---------------------------- 多环境配置文件
|   ├── dings  ----------------------------- 封装钉钉的sdk,可不用封装api的类库,仅用其配置功能
|   ├── pages  -----------------------------
|   |   └── home  --------------------------
|   |       ├── components  ---------------- Page的私有组件
|   |       ├── pages  --------------------- 子页面(路由)
|   |       ├── index.js  ------------------ 路由配置
|   |       ├── PageHome.js  --------------- 连接view 和 state的进行业务处理的Page组件
|   |       ├── PageHome.less  -------------  
|   |       ├── PageLogic.js  -------------- 状态逻辑处理
|   |       └──PageHome.less  -------------- 默认不需要改变的状态,如固定的UI组件label 
|   ├── utils  ----------------------------- 
|   |    ├── index.js  --------------------- 小的通用函数
|   |    ├── middleware.js  ---------------- api处理中间件
|   |    └── shortcuts.js  ----------------- 待测试....
|   ├── index.js  -------------------------- 
|   ├── api.js  ---------------------------- api配置,
|   ├── ding.js  --------------------------- 钉钉的配置和初始化,
|   ├── noflux.js  ------------------------- noflux配置,可给组件对象塞全局对象呀,
|   └── routers.js  ------------------------ 前端顶层路由
├── .eslintrc  ----------------------------- 
├── .gitignore  ----------------------------
├── abc.json  ------------------------------ nowa环境配置
├── package.json  -------------------------- 
└── webpack.config.js  --------------------- 

```

---

# 技术全栈知识库

## 原型 & ui

* mockplus
* antd-mobile

## js & css

* html
* js
* ES6
* ES7
* css
* less

## node.js

* restFul Api
* lodash
* koa2
* Sequelize
* jsonServer+ mockjs


## React
* React
* React-Reouter / React-Keeper
* Reflux / Redux / No-Flux
* unity-Api
* natty-storage
* lodash

## Centos7
* nginx: http服务器
* mysql: 数据库
* gitea (githook) / Kelude : 代码托管
* systemctl.service + forever : 开启启动服务脚本
* firewall + useradd + visudo + environment + yum + ln + chmod

## tools
* VScode
* Nowa
* Git / Githook
* ssh terminal