飞书小程序开发经验

这篇具有很好参考价值的文章主要介绍了飞书小程序开发经验。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

飞书小程序开发经验总结

前序

最近一段时间,由于工作需要,我先在微信小程序开发平台上开发了一套程序,但是由于微信小程序不能保证整体的数据流都封闭在内网里,因而决定转战飞书小程序,将整体的功能都迁移至飞书小程序里。但是飞书小程序的开源博客比较少,所以在最开始上手的过程中还是比较痛苦的,现在小程序整体开发已经接近尾声,特此总结一下最近开发飞书小程序积累下的经验与流程。

开放文档与平台

飞书小程序提供了很多原生的API与服务端支持功能,都可以极大的丰富小程序的能力,因此多参考文档,对于程序的设计与开发都会有很大的帮助(主要还是因为飞书小程序的开源社区不太丰富,很多功能没有什么博客介绍用法)

飞书小程序开发文档:
https://open.feishu.cn/document/uYjL24iN/uUDNzUjL1QzM14SN0MTN
飞书开发者工具:

  • windows-64-bit
  • MacOS

微信小程序 vs 飞书小程序

微信小程序在很多的场景下与飞书小程序的语法格式都是一致的,如果遇到不确定的语法,可以直接参考微信小程序的语法,如果实在不行再去看飞书开发者文档。

一键迁移微信小程序

飞书小程序开发经验
打开飞书开发者工具,可见右上角部分存在按钮 搬家工具 ,点击搬家工具即可将微信小程序直接迁移至飞书小程序中,该工具可以自动将大部分的微信小程序语法替换为飞书小程序语法,但是不能保证转换结果 绝对正确 ,还是有可能会存在一些语法不正确的情况存在,此时还是需要我们自行调试程序,保证程序的可用性。
更多详细的搬家工具使用方式还请参考:
搬家工具介绍文档

搬家工具使用后遗症

使用完搬家工具后不意味着可以立即进入开发调试阶段,此时我们还需要面对另外一个问题——微信小程序与飞书小程序技术支持的差异。
首先, 我们需要注意修改project.config.json文件中的appid,我们迁移程序后,appid并不会直接帮我们改好。
// 开发者后台中创建应用后即可看到appid : 开发者后台链接
之后,如果我们曾经在微信小程序中使用了云函数与云数据库的话,那么我们可能就会遇到麻烦了,因为飞书小程序更加的轻量化,其并不支持云函数与云数据库。此时对于数据的存储我们可以寻求另一个解决方案——多维表格。关于多维表格的使用,我会在下面介绍。

页面展示与page的坑

一个一个的页面(page)组成了小程序的基本结构,如果要配置小程序打开的默认界面,可以有两个选择:

  1. 在app.json中增加entryPagePath字段,该字段的值对应的页面将会被配置为入口页面。
    “entryPagePath”: “pages/index/index”
  2. app.json 中不配置entryPagePath字段,则默认为 pages 列表的第一项。
{
  "pages":[
    "pages/index/index"
  ]
}

一般来说,配置完pages里的内容就可以满足小程序的基本配置需要了
更多app.json全局配置选项参考文档

在pages文件夹内,一般我们会存放每个页面的文件夹
结构一般如下
├── pages
│ │── home
│ │ ├── home.ttml
│ │ ├── home.js
│ │ ├── home.json
│ │ └── home.ttss
│ └── user
│ ├── user.ttml
│ └── user.js
值得一提的是,所有的js文件中,不管会不会用到data对象,我们都需要对data对象进行声明,否则会一直打印报错

Page({
	data:{
	},
});

另外,所有的json文件也都需要进行初始化,即便没有任何数据,也需要写入一对正反大括号。

获取用户信息 getUserInfo

与微信小程序不同,飞书小程序在获取用户信息时,在调用getUserInfo之前,还需要先调用login方法。

getUserProfile() {
	// 用户登录
    tt.login({
    // 成功回调
      success(res) {
        console.log(JSON.stringify(res));
        // 获取用户信息
        tt.getUserInfo({
          // 要求敏感信息
          withCredentials: true,
          success: function(res) {
            console.log(JSON.stringify(res));
            tt.setStorageSync('user', res);
            app.globalData.userName = res.userInfo.nickName;
          },
          fail: function(res) {
            console.log(`getUserInfo fail: ${JSON.stringify(res)}`);
          }
        });
      },
      fail(res) {
         console.log(`login fail: ${JSON.stringify(res)}`);
      }
    })
  },

更多login信息,请参考tt.login
更多getUserInfo信息,请参考tt.getUserInfo

关于跳转页面栈的问题

在我们的小程序在不同的page之间进行跳转时,我们可能会更习惯使用navigateTo这个方法,但是每一次使用navigateTo方法时,都会将当前页面压入栈中,随后再执行跳转操作,每次左划屏幕边缘回退页面时,都会从页面栈中弹出页面。
例如说,我们存在两个page:pageA,pageB,我们在pageA.js文件中调用

tt.navigateTo({url: '../pageB/pageB'});

此时程序会先将pageA压入栈(stack)中,随后再从页面A跳转至页面B;注意,如果这里讲的是,必须要先将页面压入栈成功后,才会执行跳转操作,如果页面压入失败了,那么是不会执行后边的跳转操作的。如果此时用户在页面B左划屏幕,则会将栈顶的pageA弹出,并跳转至页面A上。
但是值得注意的时,页面栈的最大值为10,当页面栈的大小达到10之后,再次调用navigateTo操作将会不再起作用,页面栈不会更改,页面也不会跳转。
因而我们可以配合redirectTo来进行使用:

tt.navigateTo({
    "url": "../shotPhoto/shotPhoto",
    success(res) {
      console.log(JSON.stringify(res));
    },
    // 失败回调
    fail(res) {
      console.log(`navigateTo fail: ${JSON.stringify(res)}`);
      tt.redirectTo({
        "url": "../shotPhoto/shotPhoto",
        success(res) {
          console.log(JSON.stringify(res));
        },
        fail(res) {
          console.log(`rediractTo fail: ${JSON.stringify(res)}`);
        }
      })
    }
  });

但,依然要注意的一点是,redirectTo只能跳转到非tabBar界面,如果要跳转至tabBar界面,还请使用switchTab方法。

更多关于navigateTo, 请参考 navigateTo
更多关于redirectTo,请参考 redirectTo
更多关于switchTab,请参考 switchTab

鉴权的获取

在飞书小程序的开发中,有时我们在尝试使用其服务端的一些功能时,可能需要我们的鉴权即tenant_access_token,此时我们可以通过小程序调用post请求来获取相关的数据。
值得关注的是,鉴权信息2小时过期,过期后重新申请即可。

tt.request({
        url: 'https://open.feishu.cn/open-apis/auth/v3/tenant_access_token/internal',
        method: "post",
        data: {
          app_id: "appid",
          app_secret: "secret"
        },
        header: {
          'Content-Type': "application/json; charset=utf-8"
        },
        success: function(res) {
          console.log("try to get accessToken success:" + res);
          accessToken = res;
          tt.setStorageSync("accessToken", res);
          tt.setStorageSync("accessTime", new Date().getTime());
        },
        fail: function(res) {
          console.log("try to get accessToken failed:" + res);
        }
      })

多维表格?简配数据库!

多维表格文档 多维表格

多维表格可以被视为一个简配的关系型数据库,在飞书小程序不支持数据库的前提下,可以作为数据库的一个替代选项。

在对多维表格进行增加操作时,我们需要先自行创建一个多维表格,并获取到其app_token以及table_id,
如我们多维表格的url为
https://abc.feishu.cn/base/abcedfg?table=higklm&view=vewAVZdmul
此时,abcdefg即为app_token,table_id即为higklm。
同时,我们还需要获取鉴权。获取鉴权的方式如上介绍。
此处我们仅展示新增数据:

tt.request({
      url:'https://open.feishu.cn/open-apis/bitable/v1/apps/apptokenapptoken/tables/tableidtableid/records',
      method: "post",
      header: {
        'Content-Type': 'application/json',
        'Authorization': 'Bearer ' + accessTokenString
      },
      data: {
        'fields': {
        	"人力耗时": 64,
       		"人力评估": "8",
        }
      },
      success: function(res) {
        console.log("上传数据成功"+ res);
      },
      fail: function(res) {
        console.log("上传数据失败" + res);
      }
    })

持续更新。。。

初学小白,在线挨打,如果有什么纰漏之处,还请大佬们多多指正。文章来源地址https://www.toymoban.com/news/detail-402089.html

到了这里,关于飞书小程序开发经验的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 微信小程序开发 | 音乐小程序项目

    2023年04月20日
    浏览(40)
  • 【小程序开发】小程序的架构和配置

    🤗这里是前端程序员小张! 🌻人海茫茫,感谢这一秒你看到这里。希望我的文章对你的有所帮助! 🌟愿你在未来的日子,保持热爱,奔赴山海! 小程序的宿主环境为微信客户端 宿主环境执行小程序的各种文件:wxml文件、wxss文件、js文件 当小程序基于 WebView 环境下时,

    2024年02月09日
    浏览(44)
  • python做微信小程序开发,python怎么开发小程序

    大家好,小编来为大家解答以下问题,python做微信小程序开发,python怎么开发小程序,今天让我们一起来看看吧! 大家好,小编为大家解答用python编写一个小程序的问题。很多人还不知道如何用python做小软件,现在让我们一起来看看吧! 大家好,小编来为大家解答以下问题

    2024年03月12日
    浏览(63)
  • 抖音小程序开发教学系列(4)- 抖音小程序组件开发

    在本章中,我们将深入探讨抖音小程序的组件开发。组件是抖音小程序中的基本构建块,它们负责展示数据和与用户交互。了解组件的开发方法和使用技巧是进行抖音小程序开发的重要一步。 抖音小程序提供了许多常用的基本组件,它们分别具有不同的功能和用途。在我们的

    2024年02月09日
    浏览(51)
  • 微信小程序开发15 项目实战 基于云开发开发一个在线商城小程序

    在学完前 4 个模块之后,我相信你会对微信小程序的开发有一个全新的认识。在前面 3 个模块中,俊鹏分别从微信小程序内在的运行原理,小程序工程化开发以及具体实践层面,深度讲解了微信小程序开发所必要的知识和能力。而第 4 个模块里,我带你认识了微信小程序的云

    2024年02月11日
    浏览(50)
  • 微信小程序开发---小程序的页面配置

    目录 一、小程序页面配置的作用 二、页面配置和全局配置的关系 三、页面配置中常用的配置项 在每个小程序中,每个页面都有自己的.json配置文件,用来对当前页面的窗口外观,页面效果进行配置。 小程序中,app.json中的windows节点,可以全局配置小程序中每个页面的窗口表

    2024年02月09日
    浏览(47)
  • 微信小程序 -- 小程序开发能力与拓展

    1. 获取用户头像 当小程序需要让用户完善个人资料时,我们可以通过微信提供的头像、昵称填写能力快速完善。如图: 想使用微信提供的头像填写能力,需要两步: 将 button 组件 open-type 的值设置为 chooseAvatar 当用户选择需要使用的头像之后,可以通过 bindchooseavatar 事件回调

    2024年04月15日
    浏览(61)
  • 微信小程序开发教程(二)--上传小程序

    接上文,我们已经有一个小例子了。 在模拟器的位置,点击头像,会登录。 此时我们可以第一次尝试将我们的小程序进行上传。 点击下图箭头所指位置: 点击确定: 填写版本号和备注信息,选择上传: 在网页管理小程序上,选择上传,以下都选择红框所在位置: 填写相关

    2023年04月25日
    浏览(39)
  • 企业小程序开发步骤【教你创建小程序】

    随着移动互联网的兴起,微信已经成为了很多企业和商家必备的平台,而其中,微信小程序是一个非常重要的工具。本文将为大家介绍小程序开发步骤,教你创建小程序。 步骤一、注册小程序账号 先准备一个小程序账号,在微信公众平台的网站上注册即可。注册时要注意,

    2024年02月11日
    浏览(38)
  • 实战经验分享:开发同城外卖跑腿小程序

    下文,小编将与大家一同探究同城外卖跑腿小程序的开发实战,包括但不限于技术选型、开发流程、用户体验等多个方面。 1.技术选型 在同城外卖跑腿小程序的开发中,技术选型是至关重要的一环。对于前端,选择了使用Vue.js框架,其灵活性和生态系统的支持使得开发过程更

    2024年02月03日
    浏览(47)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包