飞书开发学习笔记(八)-开发飞书小程序Demo

飞书开发学习笔记(八)-开发飞书小程序Demo

一.小程序开发概述

1.1 小程序开发概述

飞书开发文档中查看:小程序开发概述

飞书小程序是指可以运行在飞书客户端中的小程序,小程序的一套代码可以适配 Android、iOS、PC 多平台,且用户体验与飞书原生应用一样流畅。

与微信小程序类似,飞书小程序可以运行在飞书环境中,开发小程序为自己的企业服务或者开发飞书商用小程序都是很有意义的,相比其他开发更容易创造价值。

1.2 增加应用能力小程序开发

在自建应用开发后台,选择添加应用能力,增加小程序。

出现提示,要求上传移动端和桌面端小程序包。并且开发需要在"飞书开发者工具"中进行。所以要先下载开发工具。

这就是安装好的"飞书开发者工具"

1.3 下载飞书小程序Demo示例

飞书小程序Demo下载: 示例

1.4 飞书小程序代码构成

  • .json 后缀的 JSON 配置文件
  • .ttml 后缀的 TTML 模板文件
  • .ttss 后缀的 TTSS 样式文件
  • .js 后缀的JS 脚本逻辑文件
  1. JSON 配置
    在项目的根目录有一个 app.json 和一个 project.config.json 文件,两者的用途如下。

小程序配置 app.json

app.json 包含了当前小程序的全局配置,包括小程序的所有页面路径、页面样式配置、头部 title、底部 tab 等。用开发工具生成的项目里面包含一个默认的 app.json 文件,通过该文件可以配置小程序一些全局的属性,声明小程序所有的页面,同时,如果小程序可以在 PC 端运行,还能在该文件里配置默认启动的页面等。

项目配置 project.config.json

项目配置文件里主要包含了针对小程序项目配置的一些信息,例如,项目名称、App ID、项目语法、编译配置等内容。这些内容可以在开始创建项目的过程中通过开发者工具生成,开发者也可以根据需要进行修改和配置。

  1. TTML 模版

    TTML 用来描述当前页面的结构。

  2. TTSS 样式

    TTSS 具有 CSS 大部分的特性,小程序的 TTSS 也在基础能力之上做了一些扩充和修改

  3. JS 交互逻辑

    如:在点击button按钮时,如果你希望显示用户当前手机的型号,则可以在button上声明一个属性bindtap,然后在 JS 文件里边声明showModel方法来响应这次点击操作。

二.配置和上传小程序Demo

2.1 配置小程序AppID

直接上传会显示AppID错误

将自建应用的AppID复制过来,在详情中 项目信息 替换APPID

保存。

2.2 上传发布飞书小程序

再上传小程序就不报错了,选择平台和版本号,顺利上传。

上传后系统自动跳转到小程序配置,可以预览效果。目前初始版只编译一个移动端,桌面端选择使用移动端。版本号初始版本就选1.0.0.0。

上传成功以后就算发布好了,在工作台就可以打开小程序Demo,可以看到各种小程序组件的功能和应用。当然这只是测试企业,所以非常简单,实际企业环境中涉及各种权限还是复杂很多的,初始版本Demo发布先就到这里,后面再仔细学习。

相关推荐
HRBorderInsight3 小时前
马来西亚人均收入一个月多少钱,个人薪资和家庭收入要分开看
经验分享·笔记
又見山5 小时前
本地 Markdown 与数据主权:你的笔记到底属于谁
笔记·obsidian
撩得Android一次心动6 小时前
Jetpack Compose 知识点整理2【个人用】
android·笔记·学习·kotlin·compose
光依旧6 小时前
飞书卡片消息构建实战:从文本到可交互富卡片
飞书·mcp·退避重试·卡片消息·按钮回调·频控
cao23336 小时前
关于 x1 y1 等变量名冲突的指正(校对版)
笔记
dadaobusi7 小时前
学习:灵犀指令集
学习
Demons_kirit7 小时前
CTFHub 信息泄露通关笔记:Git泄露 Log - 教程
笔记·git·网络安全
xhyu618 小时前
【学习笔记】图像质量评估方法 (5.生成图像是否符合用户要求)
笔记·学习·计算机视觉
2601_961146209 小时前
实验室用等离子表面处理设备处理新能源汽车塑料件的一点记录
笔记·汽车·设备
知产xiao_xin9 小时前
专利主体及权利归属
经验分享·笔记·知识产权