使用Taro从零搭建钉钉小程序的步骤

使用Taro从零搭建钉钉小程序的步骤

1. 安装Taro CLI

注意: 必须3.x版本,首先需要全局安装Taro开发工具:

css 复制代码
npm install -g @tarojs/cli@3.x

2. 创建新项目

使用以下命令创建Taro项目,选择钉钉小程序模板:

csharp 复制代码
taro init my-dingtalk-app
  • 选择模板(如React/TypeScript)
  • 安装依赖,使用 Taro 插件能支持编译钉钉小程序,插件文档请看 Github
sql 复制代码
cd my-dingtalk-app

npm install @tarojs/plugin-platform-alipay-dd --save
或
yarn add @tarojs/plugin-platform-alipay-dd

npm install

3. 配置钉钉小程序编译环境

修改config/index.js添加编译脚本:

php 复制代码
export default defineConfig(async (merge, { command, mode }) => {
  const baseConfig = {
    // ...
    mini: {
      webpackChain(chain) {
      // 钉钉小程序特有配置
      chain.merge({
        plugin: {
          install: {
            plugin: require('terser-webpack-plugin'),
            args: [{
              terserOptions: {
                compress: true, // 默认使用terser压缩
                mangle: true
              }
            }]
          }
        }
      })
    }
    },
    dd:{
      appid: 'xxx', // 从钉钉开放平台获取
    },
   //  ...
  }
})

修改package.json添加编译脚本:

json 复制代码
"scripts": {
  "dev:dd": "taro build --type dingtalk --watch",
  "build:dd": "taro build --type dingtalk"
}

4. 获取钉钉小程序AppID

  1. 登录钉钉开放平台
  2. 创建 企业内部应用,选择「小程序」类型
  3. 在应用详情页获取MiniAppIdCorpId

5. 配置项目AppID

新增project.dd.json配置文件

perl 复制代码
{
  "miniprogramRoot": "./dist",
  "appid": "xxx,
  "projectname": "my-dingtalk-app",
  "description": "Taro钉钉小程序项目",
  "setting": {
    "urlCheck": false,
    "es6": false,
    "postcss": false,
    "minified": false
  }
}

6. 开发与调试

  • 启动开发服务器:
arduino 复制代码
npm run dev:dd
  • 打开支付宝开发者工具,选择「钉钉小程序」模式
  • 导入项目编译目录(通常在dist

7. 构建与发布

arduino 复制代码
npm run build:dd
  • 在钉钉开放平台完成版本发布流程

注意:钉钉小程序基于支付宝小程序框架,Taro通过编译为支付宝小程序类型实现兼容。开发过程中需注意钉钉特有API的调用方式。

相关推荐
醉城夜风~2 小时前
CSS盒模型(Box Model)
前端·css
雪隐2 小时前
个人电脑玩AI-15让5060 Ti给你打工——MiniMax H3 本地部署实录:一个自带录音棚的视频模型,和它的 NVFP4 瘦身奇遇
前端·人工智能·后端
GuWenyue3 小时前
不用第三方SDK!Vue3原生Fetch实现DeepSeek流式输出,90%前端都会踩的分片解析坑一次性解决
前端·人工智能·llm
独隅3 小时前
前端离线暂停更新策略:Service Worker 与 PWA 实战指南
前端
不如摸鱼去4 小时前
Wot UI 2.3.0 发布:二维码组件来了,Open Wot 与 wot-starter 同步更新
前端·ui·微信小程序·前端框架·uni-app
Cloud_bread4 小时前
从ReAct到自主闭环:Agentic Coding核心执行引擎的技术演进
前端·react.js·前端框架
cidy_984 小时前
OptMem 使用教程
前端
杉氧4 小时前
用 Compose 挑战交互与动效天花板:ComposeCraftLab 开源实验室全解析
android·前端·kotlin
Canace4 小时前
AI 生成到 90% 突然断了:你的解决方案是?
前端·人工智能
TinssonTai4 小时前
Vite 8 版 Chrome 插件全家桶,popup/options/sidepanel 一次集齐
前端·vue.js