nowa-dingtalk-salt-template ver 0.8.0

钉钉微应用 React 开发脚手架 & 开发教程

这是邢台钉友软件，在nowa脚手架基础上，集成DingTalk客户端。目的是帮助大家尽快了解和掌握钉钉开发的入门知识.少走一些坑.

体验篇

经验提醒

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

安装软件

Node 必装 : 建议安装LTS版本
Chrome 必装 : 谷歌浏览器,安卓web调试必备
cnpm 建议: NPM 阿里镜像, 安装命令: npm install -g cnpm --registry=https://registry.npm.taobao.org
Nowa (命令行版): 集成的前端开发环境, 安装方式,在终端窗口执行:

npm i nowa -g --registry=https://registry.npm.taobao.org && nowa install --registry=https://registry.npm.taobao.org

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

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

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

mac: mkdir ~/appDev & cd ~/appDev
初始化项目: (使用nowa下载项目模板-脚手架)

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

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

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

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

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

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

经验提醒

win系统: VScode安装过程,选择全部选项,可以右键打开项目; mac也可以,但配置麻烦,请自行搜索解决办法;
nowa init 初始化项目时, -a ding 参数是别名, 下次本机使用 nowa init ding,就可以创建项目.
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文档自动打开预览

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

VScode 选装: 微软出品轻便的代码编辑器,通吃系统,常用插件
Git 建议 : 如用vscode则建议使用git协作; mac版本包含在xcode配套工具里面
xcode(mac) 按需 : 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()打印信息,只有在这样调试环境才能看到.

了解脚手架

依赖包

环境构建

nowa: 是基于 webpack 的前端开发解决方案集合。

UI组件

antd-mobile: antd-mobile是阿里蚂蚁提供的一套ui组件库，希望帮助使用者更快更好地开发钉钉微应用界面。

路由层工具

React-keeper: 更适合国人和nowa的路由库

数据层解决工具

目录结构

├── 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

dingyou-dingtalk-mobile

nowa-dingtalk-salt-template ver 0.8.0

体验篇

经验提醒

安装软件

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

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

经验提醒

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

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

钉钉应用开发篇

准备工作

1. 创建钉钉微应用

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

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

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

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

了解脚手架

依赖包

目录结构

技术全栈知识库

原型 & ui

js & css

node.js

React

Centos7

tools

Readme

Keywords

Package Sidebar

Install

Repository

Homepage

Weekly Downloads

Version

License

Last publish

Collaborators

dingyou-dingtalk-mobile

nowa-dingtalk-salt-template ver 0.8.0

体验篇

经验提醒

安装软件

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

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

经验提醒

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

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

钉钉应用开发篇

准备工作

1. 创建钉钉微应用

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

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

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

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

了解脚手架

依赖包

目录结构

技术全栈知识库

原型 & ui

js & css

node.js

React

Centos7

tools

Readme

Keywords

Package Sidebar

Install

Repository

Homepage

DownloadsWeekly Downloads

Version

License

Last publish

Collaborators

Weekly Downloads