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

最新推荐文章于 2025-12-15 10:34:18 发布

原创最新推荐文章于 2025-12-15 10:34:18 发布 · 834 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#uni-app #钉钉

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

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

1.3配置域名

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

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

2HBuilder配置

2.1正常创建一个项目

在manifest.json文件中添加

   "mp-dingtalk": {
       "appid": "4c333333333333333333b"
   },

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

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

3模拟器下载

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

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

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

在本地写入这个代码

		    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"
           }
       },

取消自带的导航，

在页面中调用

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

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

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