npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

dingyou-dingtalk-mobile

v1.0.0

Published

This is a development template for dingtalk

Downloads

15

Readme

nowa-dingtalk-salt-template ver 0.8.0

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

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


体验篇

经验提醒

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

安装软件

  1. Node 必装 : 建议安装LTS版本

  2. Chrome 必装 : 谷歌浏览器,安卓web调试必备

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

  4. Nowa (命令行版): 集成的前端开发环境, 安装方式,在终端窗口执行:

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 选装: 微软出品轻便的代码编辑器,通吃系统,常用插件

  2. Git 建议 : 如用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. 环境构建
  1. UI组件
  1. 路由层工具
  1. 数据层解决工具

目录结构

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