钉钉H5微应用创建(项目部署到钉钉)

#创作背景#

因为最近公司涉及到钉钉H5微应用的开发，也是翻遍了资料。

正文开始：

配置：

官网有创建项目H5微应用的文章，这里我就不啰嗦了，然后还有一些配置，配置我简单说一下，拿我自己的配置来说：

将项目部署到服务器上：

这里你要把本地的项目在Hbuilder上打包后，放到自己的服务器或者是公司的服务器，这里我创建的是个测试的项目，所以我是自己搞得服务器，可以花99去买一个阿里的服务器，然后自己配置一下，我是做了一个宝塔的面板：

可以看到，图一上面的地址和我服务器上放置的位置是一样的。

打包配置：

然后就是打包，打包的时候，你可能遇到一个问题，就是打包扔到服务器，访问地址的时候，一片空白，什么都没有，这里在打包之前，你要点击manifest.json文件，找到web配置-运行的基础路劲，给添加一个“./”，然后再重新打包部署

钉钉应用查看：

接着部署完成后，打开自己手机上的钉钉，点中间一栏的“工作台”，然后去搜索你的H5微应用，就像我的叫“H5微应用测试”：

然后点击进去就是你本地的项目了。

钉钉jsapi：

我们还需要引入一下钉钉dingtalk-jsapi，因为后续的免密登录的一些api都是出自这里的：

首先在终端下载dingtalk-jsapi

npm i dingtalk-jsapi

然后在项目的main.js中引入:

import App from './App'
import * as dd from 'dingtalk-jsapi'; // 导入dingtalk-jsapi

// #ifndef VUE3
console.log(1);
import Vue from 'vue'
import './uni.promisify.adaptor'
Vue.config.productionTip = false
App.mpType = 'app'
const app = new Vue({
  ...App
})
app.$mount()
// #endif

// #ifdef VUE3
console.log(2);
import { createSSRApp } from 'vue'
export function createApp() {
  const app = createSSRApp(App)
  app.config.globalProperties.$dd = dd; // 全局绑定
  return {
    app
  }
}
// #endif

总结：

其实这就是正常的H5项目，没有大家想的那么高级，就是把自己本地项目打包部署到服务器，只不过是在钉钉应用内使用观看而已。

写在后面:

不过我还有一个疑惑，就是调试的时候,我是在浏览器上，但是没有钉钉环境,我调了那个免密登录的接口，浏览器上是提示不成功，说没有钉钉环境,就是这个"notInDingTalk"，但是用钉钉app的话，就可以，这里我用的是“vconsole”，没了解的小伙伴可以去看一下怎么用，我想要的是在钉钉的环境下去调试我本地的代码，官网给的几个调试模式我试了，都是正式版本的，难道说只能那样嘛？

这个DingTalk-Design-CLI我也用了，也是不支持。

ding dev web --targetH5Url http://127.0.0.1:3000