【补档】【未完成】钉钉小程序开发(一)Taro + React + TypeScript + Taro UI 搭建钉钉小程序 Demo 并发布到企业内部
本文最后更新于 267 天前,其中的信息可能已经有所发展或是发生改变。

外出跑业务的员工有在移动端操作管理系统内客户、商机的需求,考虑到目前企业内部使用的是钉钉作为 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

配置项如下:

配置项

之后项目会自动执行 yarn install 命令,稍等片刻即可。
安装完成

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

taro build --type weapp --watch

打包微信小程序的输出

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

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

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

导入 Taro UI 较为简单:

yarn add taro-ui

导入 Taro UI

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

暂无评论

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇