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

vue init webpack dd

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

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

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

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

二、钉钉H5应用

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

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

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

在src-components-HelloWorld.vue中

  1 <template>
  2   <div class="hello">
  3     <h1>{{ msg }}</h1>
  4     <h2>Essential Links</h2>
  5     <ul>
  6       <li>
  7         <a
  8           href="https://vuejs.org"
  9           target="_blank"
 10         >
 11           Core Docs
 12         </a>
 13       </li>
 14       <li>
 15         <a
 16           href="https://forum.vuejs.org"
 17           target="_blank"
 18         >
 19           Forum
 20         </a>
 21       </li>
 22       <li>
 23         <a
 24           href="https://chat.vuejs.org"
 25           target="_blank"
 26         >
 27           Community Chat
 28         </a>
 29       </li>
 30       <li>
 31         <a
 32           href="https://twitter.com/vuejs"
 33           target="_blank"
 34         >
 35           Twitter
 36         </a>
 37       </li>
 38       <br>
 39       <li>
 40         <a
 41           href="http://vuejs-templates.github.io/webpack/"
 42           target="_blank"
 43         >
 44           Docs for This Template
 45         </a>
 46       </li>
 47     </ul>
 48     <h2>Ecosystem</h2>
 49     <ul>
 50       <li>
 51         <a
 52           href="http://router.vuejs.org/"
 53           target="_blank"
 54         >
 55           vue-router
 56         </a>
 57       </li>
 58       <li>
 59         <a
 60           href="http://vuex.vuejs.org/"
 61           target="_blank"
 62         >
 63           vuex
 64         </a>
 65       </li>
 66       <li>
 67         <a
 68           href="http://vue-loader.vuejs.org/"
 69           target="_blank"
 70         >
 71           vue-loader
 72         </a>
 73       </li>
 74       <li>
 75         <a
 76           href="https://github.com/vuejs/awesome-vue"
 77           target="_blank"
 78         >
 79           awesome-vue
 80         </a>
 81       </li>
 82     </ul>
 83   </div>
 84 </template>
 85 
 86 <script>
 87 import * as dd from 'dingtalk-jsapi';//引入dingtalk-jsapi
 88 export default {
 89   name: 'HelloWorld',
 90   data () {
 91     return {
 92       msg: 'Welcome to Your Vue.js App'
 93     }
 94   },
 95   mounted:function(){
 96     dd.ready(function() {
 97     // dd.ready参数为回调函数，在环境准备就绪时触发，jsapi的调用需要保证在该回调函数触发后调用，否则无效。
 98     dd.runtime.permission.requestAuthCode({
 99         corpId: "dingxxxxxxxxxxxxxxxc288",//修改为自己的corpID
100         onSuccess: function(result) {
101         /*{
102             code: 'hYLK98jkf0m' //string authCode
103         }*/
104         },
105         onFail : function(err) {}
106   
107     });
108 });
109 dd.error(function(error){
110        /**
111         {
112            errorMessage:"错误信息",// errorMessage 信息会展示出钉钉服务端生成签名使用的参数，请和您生成签名的参数作对比，找出错误的参数
113            errorCode: "错误码"
114         }
115        **/
116        alert('dd error: ' + JSON.stringify(error));
117 });
118   }
119 }
120 </script>
121 
122 <!-- Add "scoped" attribute to limit CSS to this component only -->
123 <style scoped>
124 h1, h2 {
125   font-weight: normal;
126 }
127 ul {
128   list-style-type: none;
129   padding: 0;
130 }
131 li {
132   display: inline-block;
133   margin: 0 10px;
134 }
135 a {
136   color: #42b983;
137 }
138 </style>

View Code