钉钉本地开发环境配置（H5微应用）

序言由于开发工作需要，需要开发钉钉的H5应用。为了开发方便，需要实现1、前端技术框架使用vue2、本地开发vue,手机/PC端同步看到实现效果3、能够进行线上调试工具准备下载线上调试工具下载windows调试包Android调试包（开发H5微应用不用）网络准备1、开发电脑，手机需要在同一个网络环境中2、开发电脑需要使用内网穿透内网穿透以及配置安装实际需要进行下载，我这边以linux为例下载内网穿透

it-walker

6110人浏览 · 2020-10-22 10:14:01

it-walker · 2020-10-22 10:14:01 发布

序言

由于开发工作需要，需要开发钉钉的H5应用。为了开发方便，需要实现
1、前端技术框架使用vue
2、本地开发vue,手机/PC端同步看到实现效果
3、能够进行线上调试

工具准备

下载线上调试工具
下载windows调试包
Android调试包（开发H5微应用不用）

网络准备

1、开发电脑，手机需要在同一个网络环境中
2、开发电脑需要使用内网穿透

内网穿透以及配置

安装实际需要进行下载，我这边以linux为例
下载内网穿透工具
在这里插入图片描述
查看开发电脑ip(win10)

ipconfig

开启内网穿透

cd liunx
./ding -config=ding.cfg -subdomain=dev 192.168.199.196:9556

subdomain=dev 二级域名，随便写，不和其他人重复就行
192.168.199.196:9556 本地开发vue项目的地址

成功效果如下
在这里插入图片描述

钉钉开放平台H5开发配置

在这里插入图片描述
服务器出口IP 即公司公网IP，可以用百度查看

在这里插入图片描述
应用首页地址和PC端首页地址填写穿透软件开启后获得的地址

权限配置，配置成功才能使用windows开发工具进行调试
在这里插入图片描述

使用windows 开发工具

如图点击即可查看网页，此时本地环境与线上环境一致
在这里插入图片描述
调试工具可以使用F12弹出开发者工具

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^