钉钉接入已有h5项目前端需开发的工作

1. 接入钉钉免登录，安装钉钉sdk，新开一个页面，在开发者后台配置为钉钉应用首页页面地址

 npm install dingtalk-jsapi --save

// 新页面开发
<template>
  <div></div>
</template>
<script>
export default {
  mounted () {
    const app = getApp().globalData
    // 开发者后台页面配置地址会有一个corpId参数占位符，获取接入应用的企业id 
    const corpId = window.location.href.split('?corpId=')[1]
    this.$dd.ready(() => {
      this.$dd.runtime.permission.requestAuthCode({
        corpId: corpId,
        onSuccess: (res) => {
          // res.code是临时授权码
          // 调用后端接口传入res.code返回用户相关数据进行相关的页面跳转
        },
        onFail: (err) => {
          console.log(err, '获取code失败')
        }
      })
    })
  }
}
</script>

// main.js全局引入钉钉
import * as dd from 'dingtalk-jsapi'
Vue.prototype.$dd = dd

2. 钉钉页面title修改

Vue.mixin({
  onShow () {
    // 钉钉环境下设置每个页面的title
    if (this.$dd.env.platform != 'notInDingTalk') {
      const dingtalkPages = getCurrentPages()
      const dingtalkPage = dingtalkPages[dingtalkPages.length - 1]
      const pageTitle = dingtalkPage.$holder.navigationBar.titleText
      this.$dd.ready(() => {
        // dd.ready参数为回调函数，在环境准备就绪时触发，jsapi的调用需要保证在该回调函数触发后调用，否则无效。
        this.$dd.biz.navigation.setTitle({
          title: pageTitle,
          onSuccess: (res) => {
            console.log(res, '页面设置title成功', pageTitle)
          },
          onFail: (err) => {
            console.log(err)
          }
        })
      })
    }
  }
})