钉钉H5微应用前端开发 企业内部应用

1. 钉钉的H5微应用就是H5的网页，所以我选择Vue.js脚手架vue-cli3.0来搭建单页项目，项目搭建过程省略。

2. 项目搭建好之后叫后端部署好项目，拿到项目的链接地址。

3. 我做的是企业的内部应用，进入【钉钉开放平台】，登录开发者后台，企业的管理员才有登录权限，创建一个企业内部的H5微应用，填入项目链接地址等信息。

下一步配置应用权限，将自己的钉钉都加入开发权限中，最后发布应用，打开钉钉就能直接看到项目了。

4. 配置钉钉的JSAPI，调用JSAPI有的API需要鉴权，有的不需要可直接使用。

安装

npm install dingtalk-jsapi --save

挂载到Vue实例上 

import * as dd from 'dingtalk-jsapi';
Vue.prototype.dd=dd;

设置页面的标题

this.dd.biz.navigation.setTitle({
   title : '这是首页的标题',
});

5. 鉴权配置auth.js，调用方法传入参数url，url是当前页面的链接地址，哪个页面调用需要鉴权的JSAPI就在哪个页面调用这个auth.js的方法获取鉴权（获取鉴权的接口怎么写我也不知道，这是后端写的，具体方法参照官方开发文档）

import * as dd from 'dingtalk-jsapi';
import axios from 'axios'
function getAuth(url){
let authUrl='http://baidu.com/getauth' //获取鉴权信息的接口地址
let promise=new Promise((resolve,reject)=>{
    axios.post(authUrl,{
      url:url
    })
    .then(res=>{
      const auth=res.data.mapInfo.jsAuth;
      resolve(auth)
    })
  })
  promise.then(auth=>{
    dd.config({
      agentId: auth.agentId, // 必填，微应用ID
      corpId: auth.corpId,//必填，企业ID
      timeStamp: auth.timeStamp, // 必填，生成签名的时间戳
      nonceStr: auth.nonceStr, // 必填，生成签名的随机串
      signature: auth.signature, // 必填，签名
      type:0,   //选填。0表示微应用的jsapi,1表示服务窗的jsapi；不填默认为0。该参数从dingtalk.js的0.8.3版本开始支持
      jsApiList : [
          'biz.map.search',
          'biz.map.locate'
      ] // 必填，需要使用的jsapi列表，注意：不要带dd。
    });
    dd.error(function(error){
        console.log('鉴权配置失败')
        console.log(error)
      });
  })
}
export default getAuth;

6.  调用地图接口，this.lantitude是初始纬度，this.longtitude是初始经度

let promise=new Promise((resolve,reject)=>{
    this.dd.biz.map.search({
         latitude: this.latitude, // 纬度
         longitude: this.longitude, // 经度
         scope: 2000, // 限制搜索POI的范围；设备位置为中心，scope为搜索半径
         onSuccess: function (poi) {
            resolve(poi)
         },
         onFail: function (err) {
            console.log('地图定位失败')
         }
     });
})
promise.then(data=>{
    this.position=data.province+data.city+data.adName+data.snippet
})

7. 调用百度地图来获取用户当前的经纬度

 <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=aTlsBeA7mi9OBKsQLc6pwBTDgE7d1yDd"></script>

 let promise=new Promise((resolve,reject)=>{
              let map = new BMap.Map("allmap");
              let point = new BMap.Point(116.331398,39.897445);
              map.centerAndZoom(point,12);
              let geolocation = new BMap.Geolocation();
              geolocation.getCurrentPosition(function(r){
                  if(this.getStatus() == BMAP_STATUS_SUCCESS){
                      let mk = new BMap.Marker(r.point);
                      map.addOverlay(mk);
                      map.panTo(r.point);
                      this.latitude=r.point.lat;
                      this.longitude=r.point.lng;
                      console.log('经纬度',this.latitude,this.longitude)
                      resolve(r.point)
                  }
                  else {
                      console.log('failed'+this.getStatus());
                  }        
              });
          })
          promise.then(data=>{
            this.latitude=data.lat;
            this.longitude=data.lng;
          })

8. 安装一个控制台，便于调试

npm install vconsole --save

import VConsole from 'vconsole/dist/vconsole.min.js'
let vConsole = new VConsole()