本文最后更新于 267 天前,其中的信息可能已经有所发展或是发生改变。
外出跑业务的员工有在移动端操作管理系统内客户、商机的需求,考虑到目前企业内部使用的是钉钉作为 IM,做钉钉小程序很合适因此直接开干。
-
关于使用的技术栈做个简单介绍
Taro:开放式跨端跨框架解决方案,一套代码可以打包成微信、钉钉、百度、京东等多端的小程序
React:前端框架
TypeScript:扩展了语法的 JavaScript
Taro UI:Taro 官方提供的基于 Taro 的多端 UI 组件库如果您之前从未使用过 React 和 TypeScript,我强烈建议您跟着任意教程先熟悉一遍 React + TS 的项目搭建、NPM 包和插件的导入使用、项目基本结构和实际开发感受,之后再进行小程序开发,这并不会花费您太多时间,一个周末足矣。
-
你在开发之前绝对应该看一遍的文档
钉钉官方:如何在企业内部发布一个钉钉小程序
知乎用户经验分享:React + TypeScript + Taro前端开发小结 -
你在实际开发中需要翻阅的文档
组件:钉钉小程序组件文档
组件:Taro UI 组件文档
本章教程顺序为:搭建小程序 Demo 并在钉钉小程序 IDE 中预览 → 钉钉开发者中心创建小程序 → 发布并实际在手机预览。开始吧!
一、搭建小程序 Demo
创建 Taro 项目
我使用的是 yarn
作为 npm 包管理工具,首先安装下 Taro CLI 工具:
yarn global add @tarojs/cli
Taro 官方安装文档:安装及使用
之后创建项目,名字为:demo-app
taro init demo-app
配置项如下:

之后项目会自动执行
yarn install
命令,稍等片刻即可。
完成之后你可以尝试着直接将其打成一个微信小程序的包,并通过微信开发者工具打开:
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
中添加几个组件: