外出跑业务的员工有在移动端操作管理系统内客户、商机的需求，考虑到目前企业内部使用的是钉钉作为 IM，做钉钉小程序很合适因此直接开干。

1. 关于使用的技术栈做个简单介绍
   Taro：开放式跨端跨框架解决方案，一套代码可以打包成微信、钉钉、百度、京东等多端的小程序
   React：前端框架
   TypeScript：扩展了语法的 JavaScript
   Taro UI：Taro 官方提供的基于 Taro 的多端 UI 组件库

   如果您之前从未使用过 React 和 TypeScript，我强烈建议您跟着任意教程先熟悉一遍 React + TS 的项目搭建、NPM 包和插件的导入使用、项目基本结构和实际开发感受，之后再进行小程序开发，这并不会花费您太多时间，一个周末足矣。

2. 你在开发之前绝对应该看一遍的文档
   钉钉官方：如何在企业内部发布一个钉钉小程序
   知乎用户经验分享：React + TypeScript + Taro前端开发小结

3. 你在实际开发中需要翻阅的文档
   组件：钉钉小程序组件文档
   组件：Taro UI 组件文档

   ---

本章教程顺序为：搭建小程序 Demo 并在钉钉小程序 IDE 中预览 → 钉钉开发者中心创建小程序 → 发布并实际在手机预览。开始吧！

一、搭建小程序 Demo

创建 Taro 项目

我使用的是 yarn 作为 npm 包管理工具，首先安装下 Taro CLI 工具：

yarn global add @tarojs/cli

Taro 官方安装文档：安装及使用

之后创建项目，名字为：demo-app

taro init demo-app

配置项如下：

完成之后你可以尝试着直接将其打成一个微信小程序的包，并通过微信开发者工具打开：

taro build --type weapp --watch

注意打出来的小程序程序包路径为：demo-app/dist

打开小程序后如下显示则说明 Taro + React + TS 的 Demo 小程序搭建成功了！

导入 Taro UI 组件库和钉钉小程序打包插件（可选）

导入 Taro UI 较为简单：

yarn add taro-ui

验证方法为在 demo-app/src/pages/index.tsx 中添加几个组件：