首页 > 其他分享> 文章详细

Vue集成飞书前端JSSDK

2021-05-24 19:29:20 阅读：743 来源： 互联网

标签：集成 Vue JSSDK 前端 vue ready APP 飞书

文章目录

前言
<1>飞书前端JSSDK
<2>使用步骤
- 1.将JSSDK引入到VUE
- 2.测试JSSDK
总结：

前言

公司需要使用飞书软件，所以转战飞书开发，也是对新知识的探索与研究，飞书SDK也一直都在更新，路虽远，行必达。

<1>飞书前端JSSDK

1、官网地址：https://open.feishu.cn/document/uYjL24iN/uITO4IjLykDOy4iM5gjM
2、当前使用的飞书前端JSSDk的版本：1.5.4

<!-- 在html文档中 -->
<script type="text/javascript" src="https://sf1-scmcdn-tos.pstatp.com/goofy/ee/lark/h5jssdk/lark/js_sdk/h5-js-sdk-1.5.4.js"></script>

3、vue版本2.x

<2>使用步骤

1.将JSSDK引入到VUE

在vue项目根目录的index.html文件中，将上面的SDK复制到<head>与<body>标签之间，如下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>feishu-vue</title>
  </head>

  <!-- 飞书JSSDK -->
  <script type="text/javascript" src="https://sf1-scmcdn-tos.pstatp.com/goofy/ee/lark/h5jssdk/lark/js_sdk/h5-js-sdk-1.5.2.js"></script>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

2.测试JSSDK

1、注册飞书APP应用，入口可以直接写个域名，然后指向127.0.0.1，vue项目入口也配置成这个域名
2、打开注册的APP，例如（神羡慕）：
在这里插入图片描述
3、vue项目测试代码如下：

        hiOk() {
          window.h5sdk.ready(() =>  {
            //  lark.ready参数为回调函数，在环境准备就绪时触发
            alert('ok');
          });
        },

4、测试结果：
在这里插入图片描述

总结：

1、前端JSSDK引入简单
2、这样操作不能调试
3、用户体验不是很好
4、接下来得研究飞书前端JSSDK调试工具

tip：如有缺陷，望大神不吝赐教，一起学习

标签：集成,Vue,JSSDK,前端,vue,ready,APP,飞书
来源： https://blog.csdn.net/weixin_40514790/article/details/117227937

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9