Uniapp实现钉钉小程序前期基础配置

一路向前的月光2025-12-05 8:41

1、开发者平台创建自己的应用

1.2、左侧应用能力--添加应用能力--选择小程序

1.3配置域名

我这里本地开发设置的都是本地域名

1.4 发布行版本方便在模拟器上绑定

2HBuilder配置

2.1正常创建一个项目

在manifest.json文件中添加

"mp-dingtalk": {

"appid": "4c333333333333333333b"

创建或者在packge.json文件中写入

javascript 复制代码

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

3模拟器下载

下载地址小程序文档 - 支付宝文档中心

注意不要下罪行版本。推荐2.9.22版本

登录后一定要选择的是钉钉图标，选择项目配置是你发布的那个项目

在本地写入这个代码

javascript 复制代码

		    dd.getAuthCode({
					 success: (res) => {
					    const { authCode } = res;
						console.log(res);
					  },
					  fail: (err) => {
						  console.log(err);
					  },
					  complete: () => {},
				})

看下能否拿到临时凭证

这样就能代表你已经打通uniapp和钉钉小程序啦

附带一个自定义导航

先设置{

"pages": [

{

"path": "pages/index/index",

"style": {

"transparentTitle": "always"

}

取消自带的导航，

在页面中调用

javascript 复制代码

	uni.getSystemInfo({
				success: (e) => {
					console.log(e);
					this.tops = e.titleBarHeight;
					this.height = e.statusBarHeight
				}
			})

html 复制代码

<view :style="{'height':tops+'px'}"></view>
<view  :style="{'height':height+'px','lineHeight':height+'px'}">
			</view>

注意的是左侧返回按键是无法取消的