三、vue.js 钉钉H5应用 流程记录

一、创建项目DD项目（vue.环境配置 ）

vue init webpack dd

注意点：创建项目时注意不要使用ESLint 

 

 创建完成使用vscode打开，目录结构如下图1，control+shift+y 打开控制台，终端中输入 npm run dev 启动项目，结果如下图2

     

 二、钉钉H5应用

1.根据文档,安装 dingtalk-jsapi：

 

2..根据文档,对代码做出如下改动：

在src-components-HelloWorld.vue中

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h2>Essential Links</h2>
    <ul>
      <li>
        <a
          href="https://vuejs.org"
          target="_blank"
        >
          Core Docs
        </a>
      </li>
      <li>
        <a
          href="https://forum.vuejs.org"
          target="_blank"
        >
          Forum
        </a>
      </li>
      <li>
        <a
          href="https://chat.vuejs.org"
          target="_blank"
        >
          Community Chat
        </a>
      </li>
      <li>
        <a
          href="https://twitter.com/vuejs"
          target="_blank"
        >
          Twitter
        </a>
      </li>
      <br>
      <li>
        <a
          href="http://vuejs-templates.github.io/webpack/"
          target="_blank"
        >
          Docs for This Template
        </a>
      </li>
    </ul>
    <h2>Ecosystem</h2>
    <ul>
      <li>
        <a
          href="http://router.vuejs.org/"
          target="_blank"
        >
          vue-router
        </a>
      </li>
      <li>
        <a
          href="http://vuex.vuejs.org/"
          target="_blank"
        >
          vuex
        </a>
      </li>
      <li>
        <a
          href="http://vue-loader.vuejs.org/"
          target="_blank"
        >
          vue-loader
        </a>
      </li>
      <li>
        <a
          href="https://github.com/vuejs/awesome-vue"
          target="_blank"
        >
          awesome-vue
        </a>
      </li>
    </ul>
  </div>
</template>

<script>
import * as dd from 'dingtalk-jsapi';//引入dingtalk-jsapi
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  mounted:function(){
    dd.ready(function() {
    // dd.ready参数为回调函数，在环境准备就绪时触发，jsapi的调用需要保证在该回调函数触发后调用，否则无效。
    dd.runtime.permission.requestAuthCode({
        corpId: "dingxxxxxxxxxxxxxxxc288",//修改为自己的corpID
        onSuccess: function(result) {
        /*{
            code: 'hYLK98jkf0m' //string authCode
        }*/
        },
        onFail : function(err) {}
  
    });
});
dd.error(function(error){
       /**
        {
           errorMessage:"错误信息",// errorMessage 信息会展示出钉钉服务端生成签名使用的参数，请和您生成签名的参数作对比，找出错误的参数
           errorCode: "错误码"
        }
       **/
       alert('dd error: ' + JSON.stringify(error));
});
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

3.测试页面：

 页面还是vue的页面，但是报错了，原因是当前不是钉钉环境；

 

 三、配置钉钉H5应用环境

1.创建H5应用

 2.配置开发管理

服务器出口IP可以直接写自己的IP;

应用首页地址和PC端首页地址 就是当前应用地址（当前访问地址为localhost:8080，http://joylixiuming.vaiwan.com/#/ 对localhosthost:8080做了内网穿透，下一节会讲到）

3.配置权限管理：保证你有权限开发；

4.配置监控中心：

 

5.版本管理和发布：发布版本；

6.在微应用调试工具—RC版(windows)中查看：

如果没有显示在OA工作台中，尝试清除缓存，点击自己的头像，找到系统设置，清除缓存即可；

 

7.测试应用：

点击 当前应用图标显示如下。调试 鼠标左键，然后F12 就可以调试了

  

 

四、应用首页地址和PC端首页地址的内网穿透

文档地址https://developers.dingtalk.com/document/resourcedownload/http-intranet-penetration?pnamespace=app

1.下载工具

git clone https://github.com/open-dingtalk/pierced.git

也可以直接浏览器下载：https://github.com/open-dingtalk/pierced.git比较快；

目录结构为：

 

2.windows cmd 打开 pierced

cd windows_64
ding -config=ding.cfg -subdomain=abcde 8080

这里的ding.cfg -subdomain=abcde 8080，abcde为自定义的；比如我自定义了joylixiuming

 此处http://joylixiuming.vaiwan.com 代理了localhost:8080 的意思，所以http://joylixiuming.vaiwan.com 和localhost:8080效果是一样的；

3.测试穿透结果

 如果页面显示  Invalid Host header；需要在 build-webpack.base.conf.js做额外配置；