uni-app开发多端之钉钉小程序

ゞ浴缸里的玫瑰 2022-12-19 06:14 599阅读 0赞

经常有开发者咨询`uni-app`是否支持`钉钉小程序`？

答案当然是**支持！**

本文通过将`hello uni-app`发布到`钉钉小程序`，演示如何使用`uni-app`开发`钉钉小程序`。

## 扩展钉钉小程序平台 ##

创建`hello uni-app`项目后，在项目根目录下新增或修改`package.json`，在根节点下新增如下扩展配置：

"uni-app": {
        "scripts": {
            "mp-dingtalk": { 
                "title":"钉钉小程序", 
                "env": { 
                    "UNI_PLATFORM": "mp-alipay" 
                },
                "define": { 
                    "MP-DINGTALK": true 
                }
            }
        }
    }

## 运行到模拟器 ##

HBuilderX会根据package.json的扩展配置，在`运行`菜单下，生成`钉钉小程序`菜单，如下图：

![4e355f04bd86785c743213d7eb180ba9.png][]

点击`钉钉小程序`菜单，开始编译，编译成功后，会自动打开`支付宝开发者工具`，展开左侧`钉钉`菜单，选择`第三方个人应用`,如下图：

![39eb32124a82725cbaaab38c6a8914fb.png][]

然后点击右上角`打开项目`，选择编译目录（类似：`%Project_root%/unpackage/dist/dev/mp-alipay/`，注意：钉钉小程序复用支付宝小程序的编译目录），在接下来的界面中，注意修改项目名称，并特别注意修改项目类型为“钉钉 - 第三方个人应用”

![96fdbf652cd9b694240ffffad66baf2d.png][]

项目导入后，支付宝开发者工具会进行编译载入，并在右侧模拟器上显示，如下：

![ec4cd305d1c1dc0c7809e612a2b23b68.png][]

在右侧模拟器上可以点击各页面进行测试。

## 发行到钉钉开放平台 ##

同样，HBuilderX会根据package.json的扩展配置，在`发行` \-> `自定义发行`菜单下，生成`钉钉小程序`菜单，如下图：

![a432476b178b24d088893243665f59ac.png][]

点击`钉钉小程序`菜单，开始编译，编译成功后，会自动打开`支付宝开发者工具`，展开左侧`钉钉`菜单，选择`第三方个人应用`,如下图：

![39eb32124a82725cbaaab38c6a8914fb.png][]

然后点击右上角`打开项目`，选择编译目录（类似：`%Project_root%/unpackage/dist/build/mp-alipay/`，注意发行时是`build`目录，不是`dev`目录），在接下来的界面中，注意修改项目名称，并特别注意修改项目类型为“钉钉 - 第三方个人应用”

![96fdbf652cd9b694240ffffad66baf2d.png][]

项目导入后，支付宝开发者工具会进行编译载入，并在右侧模拟器上显示，如下：

![ec4cd305d1c1dc0c7809e612a2b23b68.png][]

上传需登录后才能操作，使用手机端的钉钉App，扫码登录，

![8cd2de0712ad41f2b41a6887dd1f2957.png][]

登录成功后，左上角选择关联的小程序（需提前在[钉钉开放平台][Link 1]创建小程序），如下图：

![877772754672c92d8ad440be4dae0481.png][]

点击支付宝开发者工具右上角的“上传”按钮，将代码上传到[钉钉开放平台][Link 1]，上传成功后，即可在[钉钉开放平台][Link 1]中进行版本发布，可设置为预览版，或直接提交审核：

![4051afa3eab6005b55a69bfc75255727.png][]

注意：钉钉小程序的审核发布，需首先完成“钉钉组织认证”和“服务商认证”，提醒开发者提早完成认证，否则无法审核通过。

## API调用 ##

钉钉大部分api都是uni通用的API，hello uni-app是可以直接在钉钉里跑的。  
如果你需要调用钉钉的专有API，和其他端开发也一样，在钉钉端可直接调用dd的API，当然要跨端的话，需要写在条件编译里。

[4e355f04bd86785c743213d7eb180ba9.png]: /images/20221120/733ebd35cd964135b87a0765d1d10e50.png
[39eb32124a82725cbaaab38c6a8914fb.png]: https://img-blog.csdnimg.cn/img_convert/39eb32124a82725cbaaab38c6a8914fb.png
[96fdbf652cd9b694240ffffad66baf2d.png]: https://img-blog.csdnimg.cn/img_convert/96fdbf652cd9b694240ffffad66baf2d.png
[ec4cd305d1c1dc0c7809e612a2b23b68.png]: https://img-blog.csdnimg.cn/img_convert/ec4cd305d1c1dc0c7809e612a2b23b68.png
[a432476b178b24d088893243665f59ac.png]: https://img-blog.csdnimg.cn/img_convert/a432476b178b24d088893243665f59ac.png
[8cd2de0712ad41f2b41a6887dd1f2957.png]: https://img-blog.csdnimg.cn/img_convert/8cd2de0712ad41f2b41a6887dd1f2957.png
[Link 1]: https://open-dev.dingtalk.com/
[877772754672c92d8ad440be4dae0481.png]: https://img-blog.csdnimg.cn/img_convert/877772754672c92d8ad440be4dae0481.png
[4051afa3eab6005b55a69bfc75255727.png]: https://img-blog.csdnimg.cn/img_convert/4051afa3eab6005b55a69bfc75255727.png