项目概述1。背景

6月中旬，他加入了杭州的一个政府 - 企业合作部门，并开发了一个从零的H5会议室座椅系统。在8月初完成基本功能后，需要开发一个移动终端才能进行管理。该项目的开发方法采用了企业的内部发展。本文主要解释前端部分的内容。

2。技术堆栈

vue全家桶+

准备

确保指甲开发商的注册和激活已经完成，并拥有权限和开发商的许可。如果未完成，请参考。

H5微型应用类似于小程序

首先，无论是小程序还是H5微型应用程序。我上网查找信息以查找下面的图片。如果条件足够，则建议更小型的过程开发，体验更好，有一个特殊的IDE，并且调试也很方便。我之所以选择H5微型应用开发的原因是，开发周期很短，小计划的开发经验不足。

项目构建

由于我个人建造，因此我不怕在死亡中选择VUE3。我不得不说Vite热门更新真的很快。此外，我强烈建议您观看“从0开始，并带您构建标准的Vue3.x项目工程环境”，本文对我有很大帮助。构建项目后，您可以将其包装在服务器上，然后对其进行测试。

创建微型应用程序并发布

开放平台的内容的这一部分足够详细，主要取决于创建应用程序和H5 -的发布。

此外，如果您想在PC上使用它，则还必须填写 > PC的主页地址。

踏上坑

尽管我找到了信息，但我发现内核被用来使用指甲，但总有奇怪的表现。

无法显示SVG图片。请勿将REM用作单位。浏览器到H5微型应用程序中的正常页面将是混乱的（这可能是由于我使用自适应REM布局之间的关系）。始终存在顶部导航栏，并且仅在执行旋转屏幕时才隐藏。在正常情况下，您只能设置标题和左右按钮。您必须在UI设计的早期进行通信。请勿使用外部字体资源，加载速度非常慢。关于调试

H5 -调试真的很累，因此强调一次选择小计划开发的状况。有关详细信息，可以看出可见微型应用调试工具。

简而言之，有两个调试工具RC版本和Web版本，测试包的RC版本如下：

// Mac

运动微型应用调试

调试软件包：// di ...

暂时没有

PC-侧微型 - 应用调试

调试软件包：/ - de ...

暂时没有

这里有一个问题。我无法安装调试软件包。我不知道这是因为或 11。可以使用类似功能的调试软件包，但是移动终端无法调试，并且由于缺乏环境而无法调试API。

Web版本可以解决移动调试的问题。官方人员似乎只推荐这种调试方法。使用后，我会更新它。

丁

在开发之前，您可以体验前端功能。

对于某些电话和与安全有关的呼叫，您需要在拨打电话之前确定权利。如果您仅使用调用手机的基本能力，则无需配置权威。建议在需要时配置验证。

以下将说明如何在VUE中配置和使用它，并以导航栏右侧的正确按钮为例。

1。使用NPM安装

npm install dingtalk-jsapi --save

2.媒介

// Vue3写法，Vue2 直接挂载到原型链我想应该也是可以的 import dd from 'dingtalk-jsapi'; app.config.globalProperties.$dd = dd;

3。在页面上打电话

const THIS = this    if (this.$dd.env.platform !== "notInDingTalk") {      this.$dd.biz.navigation.setRight({        show: true,        control: true,        text: "测试",        onSuccess: function () {          // 调用成功时回调          THIS.xxx       },     });   }

由于设置导航栏只能在指甲移动环境中使用，因此可以使用。 $ dd.env。！ ==“判断预防错误。vue3中（）的调用如下：

import { getCurrentInstance } from 'vue' setup(){    const { proxy } = getCurrentInstance()    if (proxy.$dd.env.platform !== "notInDingTalk") {      proxy.$dd.biz.navigation.setRight({        show: true,        control: true,        text: "测试",        onSuccess: function (res) {          // 调用成功时回调       }     })   } }

请勿在此处使用CTX，否则生产环境中的方向将是错误的。

总结

H5微型应用适用于跨平台，短开发周期，而开发人员缺乏迷你过程开发经验的经验。