在飞书上开发第一个小程序-HelloWorld

原创首发于飞书文档由此访问

2020年最后一天的几个小时,点上一根香,泡好茶,带上降噪耳机在音乐的陪伴下写写代码。
2020年第一天,没搞完的继续搞,加油~

老山檀香

伴随我飞过很多城市的旅行茶杯

开发环境的搭建

1、系统是MacOS,安装Node.js,安装的同时也会安装好npm 下载地址 常用命令如下:

# 查看Node.js版本
node -v
# 查看npm版本
npm -v
# 查看node安装目录
which node
# 更新已安装的npm库
npm update -g
# 全局安装n命令,用n命令升级Node.js
npm install -g n
# 升级到最新稳定版
n stable
# 升级到最新版
n latest
# 升级到指定版
n v14.15.3
# 切换使用版本
n 14.15.3 (ENTER) 

2、安装命令行工具

curl -L https://sf1-scmcdn-tos.pstatp.com/obj/larkdeveloper/opdev/scripts/install_1.7.0.sh | sh 

3、安装完成后,执行以下命令校验是否安装成功

# 是否安装成功
opdev help
# 检查安装的版本
opdev --version
# 查看单个命令帮助信息,如上传命令
opdev upload --help 

4、上传、预等操作需要先登录飞书账号,输入以下命令会打开默认浏览器进行登录。

这个地方比较坑,不知道是工具兼容的问题还是什么,尝试多次失败后关闭终端重新打开才ok。

# 登录
opdev login
# 选择要登录的环境,在这里我们选择“Feishu”

5、登陆成功,返回终端,显示以下信息,说明登录成功。


登陆成功
登陆成功

创建第一个小程序

1、进入飞书开发者后台,创建一个企业自建应用

飞书开发者后台-创建应用

2、在企业自建应用列表中点击刚才创建的HelloWorld应用进入应用详情页


企业自建应用列表

3、在应用详情页中,点击左侧“凭证与基础信息”标签,查看右侧“应用凭证”下的App ID(App ID 是应用的唯一标识)并复制。


复制应用凭证

4、从内置模板中生成一个“HelloWord”的小程序Demo

# 查看内置模版列表
opdev template
# 返回结果,自带5个Demo
# Available templates:
# - hello-world  Gadget base template
# - gadget-demo  Gadget api/component demo
# - widget-demo-approve  Widget demo for Approve app
# - widget-demo-report  Widget Demo for Report app
# - block-demo  Block base template
# 用内置模版创建小程序Demo, [project-path]为Demo目录
opdev new [project-path] -t hello-world 
小程序的文件清单

5、编辑“project.config.json”中的第9行,将刚才复制的App ID填入,保存退出。

{
    "setting": {
    "urlCheck": true,
    "es6": true,
    "postcss": true,
    "minified": true,
    "newFeature": true
    },
    "appid": "XXXXXXXXXXXXXX",
    "projectname": "Hello World"
} 

6、回到命令行,执行“opdev devtools Demo1 ”命令,会打开左右两个 Chrome 浏览器窗口。


左边是模拟器,右边是调试器

7、回到代码编辑器,打开 /pages/index/index.ttml,修改其中的内容并保存。


代码编辑器,这里用的是Visual Studio Code

8、再次预览,如果看到下面的结果,那就证明本地预览和调试的方法你已经掌握了。


一个小成功,当你第一次看到会很开心

9、因为本地是基于Chrome的模拟预览,还可以通过真机预览来查看小程序的真实效果

opdev preview Demo1 -p Mobile 

正常应该返回一个二维码,通过飞书客户端扫码即可实现预览


正常返回的结果
飞书客户端看到的正常结果

注意:这个地方容易出现问题,报错信息如下

可能出现的报错

原因是当前登录用户没有node_modules目录的权限,因为当时安装node是用的root账户。

解决方法:

# 其中XXXX替换成你当前的用户
sudo chown -R XXXX /usr/local/lib/node_modules 

上传和发布小程序

1、进入命令行,执行以下命令,-p Mobile 标识上传移动端小程序版本,输入版本号和描述
复制下图红色框出现的网址在浏览器中打开


复制红框中的网址在浏览器中打开

2、打开 启用小程序 开关、选择最新小程序的版本、点击保存按钮,确认保存成功。

在开发者后台的应用中启用小程序

3、发布应用,在此之前,需要确保小程序的图标已经设置好。点击左侧 版本管理与发布 进入版本管理与发布页面,点击 创建版本 按钮,进入创建版本详情页。

创建新的应用版本

4、填写完信息后,选择“申请发布”


申请发布应用

5、在飞书客户端会给企业管理员发信息审核,发送信息的是“开发者小助手(原开放平台助手)”


飞书客户端会收到审核通知

6、点击“去审核”后进入“飞书管理后台”-“应用审核”-在右侧点击“审核”按钮


飞书管理后台去审核应用

7、点击“通过”按钮完成应用审核


通过审核

8、完成审核后,可以在“版本管理与发布”中看到版本状态为“已上架”


完成审核

9、打开飞书客户端,进入工作台,可以看到刚才发布的“HelloWorld”小程序,点击可以打开应用。


工作台上已经可以看到我们创建的小程序HelloWorld

点击应用图标可正常访问小程序

10、好了,搞定,第一个飞书小程序,过程中还是遇到一些问题的,但结果还是好的。

2021新年第一天,祝大家新年快乐。
欢迎联系作者一起交流飞书开发经验。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
禁止转载,如需转载请通过简信或评论联系作者。
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 214,444评论 6 496
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,421评论 3 389
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 160,036评论 0 349
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,363评论 1 288
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,460评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,502评论 1 292
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,511评论 3 412
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,280评论 0 270
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,736评论 1 307
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,014评论 2 328
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,190评论 1 342
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,848评论 5 338
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,531评论 3 322
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,159评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,411评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,067评论 2 365
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,078评论 2 352

推荐阅读更多精彩内容