android h5 选择联系人,ding_H5

nowa-dingtalk-salt-template ver 0.7.0

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

准备工作

基础应用

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文档自动打开预览

Chrome:

git (win) :

提示: mac: 包含在xcode. 启动xocde一次,安装辅助工具( 包含git )

xcode (mac): iphone模拟器,appStore商店安装

辅助应用

navicat: 管理mysql数据库

xhsell/xfp (win): 管理服务器

moon (mac): 窗口管理工具

jsonmodeler (mac): json编写测试

开发软硬环境基础配置

1. 创建钉钉微应用

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

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

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

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

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

2. 部署鉴权服务器

请把存档资料给后台开发同学,按钉钉官方demo开发鉴权服务,

如没有,请先跳过进行页面开发体验(不要影响进度) ,或者等待配套的node版本鉴权服务…

3. iphone模拟器

启动模拟器： xcrun instruments -w ‘iPhone 6 Plus’

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

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

4. Android真机

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

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

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

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

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

体验进行时

启动项目: npm start

打开浏览器,地址输入: http://192.168.10.11:3000 , 并打开浏览器调试控制台.

进行体验

方式1: 浏览器打开 http://192.168.10.11/3000 预览,并打开浏览器的调试控制台

方式2:

mac: 模拟器打开钉钉进入自建微应用,并启用浏览器调试

win: 真机usb联机电脑进入自建微应用,并启用浏览器调试

了解脚手架

依赖包

环境构建

UI组件

路由层工具

数据层解决工具

目录结构

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

开发应用 (Nowa常用命令行)

创建项目: nowa init ding

创建页面: nowa init page | nowa init page-note (带注释)

创建组件: nowa init mod (函数组件) | nowa init rmod(react组件)

其他待需要配套的项目

jsonSever: 模拟数据服务

dingAuth: 钉钉鉴权服务

待完善…

welcome 样式表需要修正

noflux的logicRender使用方法的demo

ding的类库优化

ding sdk: 支持isv

相关资源：键盘之友(多媒体键盘打字练习软件)v6.9.8中文安装版-其它代码类…