首先要在钉钉开放平台上创建出一个企业内部应用 , 然后配置这个应用的地址 , ip之类
写在前面 : 开发时要调试钉钉H5页面 , 我用到了两种办法
1.直接在服务器上改
2.穿透
这篇分享是在我使用了穿透的基础上写的
钉钉文档中推荐了一款穿透工具https://open.dingtalk.com/document/resourcedownload/alibaba-cloud-frp-intranet-penetration-tool
1.配置钉钉微应用
https://open.dingtalk.com/ 钉钉开放平台
钉钉开放平台->登录->右上角我的后台->顶部应用开发->企业内部开发
先创建企业内部应用 , 选择H5微应用
创建完了会进到应用信息页面 , 点开发管理
在开发管理之下的权限管理页面勾选所需权限 比如你需要后台免登录 , 就需要勾选"身份验证"里的"企业微应用后台免登接口的访问权限" 2.uniapp中 在目录中创建template.h5.html文件(与App.vue平级)
<!-- template.h5.html -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<script>
var coverSupport = 'CSS' in window && typeof CSS.supports === 'function' && (CSS.supports('top: env(a)') ||
CSS.supports('top: constant(a)'))
document.write(
'<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' +
(coverSupport ? ', viewport-fit=cover' : '') + '" />')
</script>
//生成专属调试工具的代码
<!-- <script src="https://g.alicdn.com/code/npm/@ali/dingtalk-h5-remote-debug-sdk/0.1.3/app.bundle.js"></script>
<script>
h5RemoteDebugSdk.init({
uuid: "888888-8888-88dd-8888-8888888",
observerElement: document.documentElement,
});
</script> -->
<title>
<%= htmlWebpackPlugin.options.title %>
</title>
<script>
</script>
<link rel="stylesheet" href="<%= BASE_URL %>static/index.<%= VUE_APP_INDEX_CSS_HASH %>.css" />
</head>
<body>
<noscript>
<strong>Please enable JavaScript to continue.</strong>
</noscript>
<div id="app"></div>
<script>
</script>
</body>
</html>
在manifest.json中选择Web配置 , 在模板路径中填写 关于template.h5.html:https://uniapp.dcloud.net.cn/collocation/manifest.html#h5-template
在钉钉开放平台的开发管理(页面最下方)点击生成专属调试工具
手机钉钉的工作台中打开H5应用 , 就可以在浏览器中调试 ( 别忘记穿透出来 )
3.dingtalk-jsapi
用uniapp开发钉钉H5微应用时发现一个坑——切换页面时标题不会变 , 除非刷新该页面
所以每个页面onLoad()里都调用dingtalk-jsapi的biz.navigation.setTitle方法设置导航栏标题
那就顺便讲下钉钉js , 封装和调用
npm install dingtalk-jsapi --save //安装
在common文件夹中创建dd.js ( 没有common就新建一个 , 和template.h5.html平级 ) 如下方所示 , 我封装了三个方法 , 免密登录修 、改标题和扫码
// dd.js
import * as dd from 'dingtalk-jsapi'
//免密登录
export function getCode(callback) {
let corpId = 'dinga888888888888888888888' //企业ID 见下图
if (dd.env.platform !== 'notInDingTalk') {
dd.ready(() => {
//使用SDK 获取免登授权码
dd.runtime.permission.requestAuthCode({
corpId: corpId,
onSuccess: info => {
// 根据钉钉提供的api 获得code后,再次调用这个callback方法
// 由于是钉钉获取code是异步操作,不知道什么时候执行完毕
// callback 函数会等他执行完毕后在自己调用自己
callback(info.code)
},
onFail: err => {
alert('fail')
alert(JSON.stringify(err))
}
})
})
}
}
// 修改标题
export function setTitle(e) {
dd.ready(() => {
// 所有JSAPI组件的调用，必须在dd.ready里面执行。
dd.biz.navigation.setTitle({
title: e
});
});
}
// 扫码
export function scan(callBack) {
dd.ready(() => {
dd.biz.util.scan({
type: "all",
onSuccess: info => {
// 调用成功时回调
callBack(info.text)
},
onFail: function(err) {
// 调用失败时回调
console.log(err)
}
});
});
}
corpId在钉钉开放平台右上角点击头像出现
在main.js中注册 ( 要写在import Vue from 'vue'以下 )
import * as dd from './common/dd.js' Vue.prototype.$ddFunction = dd
在页面中调用
that.$ddFunction.setTitle('页面名称');
一些链接: uniapp,dingtalk,dd,H5,https,js,open,调试,页面 From： https://www.cnblogs.com/czq091449/p/17091475.html