首页 > 其他分享 >UNIAPP 钉钉微应用调试 PC端移动端调试钉钉微应用H5

UNIAPP 钉钉微应用调试 PC端移动端调试钉钉微应用H5

时间:2023-11-20 10:44:20浏览次数:39  
标签:UNIAPP dingtalk H5 PC 点击 调试 supports CSS

https://open.dingtalk.com/document/resourcedownload/micro-application-four-terminal-debugging-tool-web-edition 流程可以参考钉钉文档

https://open-dev.dingtalk.com 钉钉开放平台登录

 

 

 

 

 

 

在项目的template.h5.html中的<head>里塞入<script src="https://g.alicdn.com/code/npm/@ali/dingtalk-h5-remote-debug/0.1.3/index.js"></script>

 例:

<!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/0.1.3/index.js"></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>

 

开发管理拖到最下面 点击去调试

 

 调试页面

钉钉内

 

 

也可以点击钉钉端内调试后面的复制按钮,将地址发到手机钉钉中,再点击地址在手机端调试。(注意:最大连接数为1,手机端和PC端只能打开一个)

 

 

 

回到调试页面 发现多了调试地址 点击调试即可打开控制台

 

标签:UNIAPP,dingtalk,H5,PC,点击,调试,supports,CSS
From: https://www.cnblogs.com/czq091449/p/17843423.html

相关文章

  • uniapp使用uni-grid时出现BUG第二次进入少一列
    在使用uniapp的uni-grid组件时,出现了一个bug,第一次进入页面是是显示正常的,第二次进入就会发送少一列的情况第一次进入时显示第二次进入时显示在网上找了半天没啥解决办法,最后是在dcloud社区中找到解决方法:1.把最外层的view固定宽度2.去掉边框因为我这边是需要进行对不同设......
  • 东方马达调试
    东方马达步进电机调试参考记录东方马达步进电机AZM66AK-HS100+AZD-KD调试经验记录......
  • 基于stm32H730的解决方案开发之SD卡的读写调试
    一概述在嵌入式小系统领域,SD卡存储是一个非常重要的功能。可从难度上,它又是非常难的。因为它涉及到两个大的功能点,一个是文件系统,这个难度非一般。另外一个是sd卡的底层驱动。涉及到的接口多,所以也是一个难度高的地方。两个混合在一起,非常容易出问题。笔者在这块花费了很多时......
  • uniapp脚手架中vue3项目配置`@`,并且在vscode中有提示
    uniapp脚手架中vue3项目配置@,并且在vscode中有提示在vite.config.js中配置一下代码import{defineConfig}from"vite";importunifrom"@dcloudio/vite-plugin-uni";import{resolve}from"path";//https://vitejs.dev/config/exportdefaultdefine......
  • Visual Studio编译调试MySQL源码
    最近想阅读下MySQL源码,虽然在linux下编译MySQL源码还是很顺利的,但是奈何不习惯在linux下阅读代码,比较喜欢用宇宙第一IDEVisualStudio来阅读调试代码,下面就记录下在windows上用visualstudio来编译MySQL5.7.44的源码。下载mysql源码浏览器打开网页:https://dev.mysql.com/dow......
  • Visual Studio中使用SourceLink调试Abp源码
    在VisualStudio中目前已经能轻松的调试Abp源码,只需要以下两步操作。【选项】中设置调试最重要的一步,Nuget安装SourceLink.Copy.PdbFiles库,启用SourceLink调试后未安装该库不会下载对应pdb文件启动调试,等待自动下载源码符号文件,然后就可以愉快的进行源码调试了。......
  • 十九——.NET 项目&DLL 反编译&未授权访问&配置调试报错
    .NET是微软推出的一种新的软件运行平台,它包括一整套应用范围广泛的技术,旨在迎接Java所带来的挑战。.NET给网站管理系统开发带来了很多新的技术,尤其是它的“混合语言”开发方式,是第一个支持多种语言混合开发的软件运行平台,下一代Windows--LongHorn的核心将会看到.NET的身影。如果读......
  • .NET|--问题集锦|--调试报错,进行了无法编译的编辑,在修复编译错误之前,将无法应用更
    前言相关版本信息#VisualStudio版本MicrosoftVisualStudioProfessional2022(64位)报错信息#生成项目的时候不会报错,但是调试的时候还会报错,ENC1002 无法应用更改-意外错误:“Readoutofbounds.”解决方案VisualStudio菜单栏|--{工具}|--{选......
  • vue+pdfh5实现将pdf渲染到页面上
    版本:[email protected]+.netCore6.0webapi方法一:通过访问后端获取二进制数据来渲染前端渲染<template><vol-boxref="box":width="width":height="height"><divid="demo"ref="render"></div></vol......
  • 216-手机h5实现关闭手机前置摄像头,代码实现
    navigator.mediaDevices.getUserMedia({video:{facingMode:'user'}}).then(function(stream){constcameraPreview=document.getElementById('cameraPreview');cameraPreview.srcObject=stream;cameraStream=stream;}......