钉钉微应用 - - - - 如何本地开发调试?

钉钉微应用 - 本地开发调试

  • 1. 安装DingTalk-Design-CLI
  • 2. 初始化代码模版
  • 3. 启动开发、调试功能
  • 4. 遇到的问题
    • 4.1 对应企业没有xxx域名微应用??
    • 4.2 history、location的表现异常??
    • 4.3 本地已经存在了H5微应用,也想使用H5微应用本地开发工具,该如何使用??
  • 5.注意

关于钉钉方面的需求,开发H5微应用是或早或晚的事。但是钉钉的相关数据 & api 只能在钉钉环境进行获取,难道每次调试都要推到测试环境使用钉钉进行alert调试?

No!

钉钉官方给出一了些微应用调试工具
钉钉微应用 - - - - 如何本地开发调试?_第1张图片

此文章讲解的是 - 微应用本地开发工具

1. 安装DingTalk-Design-CLI

  1. 安装
    执行以下命令,安装DingTalk-Design-CLI。

    npm i [email protected] -g

  2. 检查是否安装成功

    ding -v
    在这里插入图片描述

2. 初始化代码模版

执行以下命令,初始化代码模版到本地。

ding init -o h5Test -a h5 -t h5_jsapi_component_demo_vue -l javascript

完成初始化后,会在h5Test目录创建好代码模版,目录结构如下:
钉钉微应用 - - - - 如何本地开发调试?_第2张图片

3. 启动开发、调试功能

cd h5Test
ding dev web

到这里,你就可以在Web浏览器像开发一个普通H5应用一样开发钉钉H5微应用了
需要先登录才能使用!
钉钉微应用 - - - - 如何本地开发调试?_第3张图片

4. 遇到的问题

4.1 对应企业没有xxx域名微应用??

在这里插入图片描述
解决办法:
将报错中显示的域名填入对应企业的微应用的应用首页地址中

4.2 history、location的表现异常??

解决办法:
本地开发模拟器暂时不支持history路由模式,请使用hash路由模式

4.3 本地已经存在了H5微应用,也想使用H5微应用本地开发工具,该如何使用??

  • 先按照第五点的注意配置Access-Control-Allow-Origin
  • 使用指令进行启动: ding dev web --targetH5Url 你的调试链接
    如:

    ding dev web --targetH5Url http://172.16.****

5.注意

注意,你本地调试的页面链接,需要在Response Headers中配置Access-Control-Allow-Origin: *。

假如你用的是vue-cli初始化的项目,需要在项目目录下添加vue.config.js,并补充如下配置:

module.exports = {
    configureWebpack: {        
        devServer: {
          headers: {
            'Access-Control-Allow-Origin': '*'            
          }
        }
    },
}

你可能感兴趣的:(钉钉,钉钉,javascript,前端)