# 飞书小程序开发历程
背景
有数的系统，现在陆续开发飞书小程序，大家之前都没有接触开发过，在这里记录一下开发过程中发现的问题和与微信小程序的不同等，帮助之后开发时大家提高熟悉效率
# 开发规范
不论是命名规范、校验规则，还是开发规范，飞书小程序的开发也是在小程序开发范畴内，在小程序规范的大前提下开发的，所以开发规范遵循 小程序开发规范 (opens new window)
# 官方开放平台
开发者工具：官方开放平台 (opens new window) - 开发文档 - 工具与资源 - 飞书开发者工具下载
大小限制：不超过10M（可用分包解决）
# 与微信小程序的常用内容差异
- 生命周期，少了一个微信小程序没有的生命周期（不常用：onUnhandledRejection (opens new window)）
// 飞书小程序的 app.js
App({
globalData: 'global data',
onLaunch: function (options) {
// 当小程序初始化完成时，会触发 onLaunch（全局只触发一次）
},
onShow: function (options) {
// 当小程序启动，或从后台进入前台显示，会触发 onShow
},
onHide: function () {
// 当小程序从前台进入后台，会触发 onHide
},
onError: function () {
// 当小程序发生脚本错误，或者 API 调用失败时，会触发 onError 并带上错误信息
// 微信小程序没有
},
onPageNotFound(res) {
// 当要打开的页面并不存在时，会回调这个监听器
// 微信小程序没有
tt.switchTab({
url: 'pages/index/index'
})
// 重定向页面；如果是 tabbar 页面，请使用 tt.switchTab
}
})
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
代码构成
- 微信小程序的文件名称：
- .json 后缀的 JSON 配置文件
- .xxml 后缀的 TTML 模板文件
- .xxss 后缀的 TTSS 样式文件
- .js 后缀的 JS 脚本逻辑文件
- 飞书小程序的文件名称：
- .json 后缀的 JSON 配置文件
- .ttml 后缀的 TTML 模板文件
- .ttss 后缀的 TTSS 样式文件
- .js 后缀的 JS 脚本逻辑文件
- 微信小程序的文件名称：
开发组件及使用
基本组件：飞书小程序微信小程序使用一致：
view text swiper scroll-view等等，两个文档的举例使用方法基本一致；有一些开放能力的组件有一些不同：- button: 微信小程序的button的open-type 开放了各种各样的能力，比如登录，获取信息等，但是飞书小程序的button只开放了分享转发功能
自定义组件：也就是我们开发中，自己封装的一些复用性比较高的组件，两个开发文档的封装使用方法也一致，但是引用，飞书小程序不可全局注册；
页面：
- 绑定事件相同（bindtap等）
- 数据更改相同（setData）
- 页面渲染不同：
wx:for wx:if=>tt:for tt:if,所有的ww都使用tt
// 微信小程序 wx:for wx:if
<view class="list-box" wx:if="{{dataList.length > 0}}">
<view class="list-item" wx:for="{{dataList}}">
<view class="shop-top flex-wrapper flex-s-b" >
<image class="" src="{{item.shop_logo || 'https://image.doulaoban.com/xpin/no-avatar.png'}}" />
<view class="shop-info flex-s-b" >
<view class="shop-name ellipsis-1" >{{item.shop_name}}</view>
<view class="shop-dsr flex-wrapper" >
<view class="shop-dsr-item" >商品(d)：<text style="color: {{levelKey[item.gap_product].color}}">{{item.product_score / 100}}</text></view>
<view class="shop-dsr-item" >商家(s)：<text style="color: {{levelKey[item.gap_shop].color}}">{{item.shop_score / 100}}</text></view>
<view class="shop-dsr-item" >物流(r)：<text style="color: {{levelKey[item.gap_logistics].color}}">{{item.logistics_score / 100}}</text></view>
</view>
</view>
</view>
</view>
</view>
// 飞书小程序 tt:for tt:if
<view class="list-box" tt:if="{{dataList.length > 0}}">
<view class="list-item" tt:for="{{dataList}}">
<view class="shop-top flex-wrapper flex-s-b" >
<image class="" src="{{item.shop_logo || 'https://image.doulaoban.com/xpin/no-avatar.png'}}" />
<view class="shop-info flex-s-b" >
<view class="shop-name ellipsis-1" >{{item.shop_name}}</view>
<view class="shop-dsr flex-wrapper" >
<view class="shop-dsr-item" >商品(d)：<text style="color: {{levelKey[item.gap_product].color}}">{{item.product_score / 100}}</text></view>
<view class="shop-dsr-item" >商家(s)：<text style="color: {{levelKey[item.gap_shop].color}}">{{item.shop_score / 100}}</text></view>
<view class="shop-dsr-item" >物流(r)：<text style="color: {{levelKey[item.gap_logistics].color}}">{{item.logistics_score / 100}}</text></view>
</view>
</view>
</view>
</view>
</view>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
API的使用：常用的API功能基本一致，有一些可能命名不同，但是功能一致，就不一一例举了，不常用的一些特殊的API，就会比较大的不同，飞书有适用于飞书关联使用的一些API，比如**飞书聊天相关的API (opens new window)**的一些API等，总体来说，飞书小程序的API功能目前没有微信小程序的全面，但是常用都有了；
界面交互：两个小程序的开发页基本一致，一些特殊API的飞书特有使用（例如监听系统主题变化等），可以再开发使用的时候在看，常用的一些界面交互，跟微信小程序一样的；
转发：微信小程序的对应的API更多一些，飞书的小程序只有，显示分享按钮（showShareMenu），隐藏分享按钮（hideShareMenu）两个API；
数据缓存：飞书的有基本的数据缓存的API，用法同微信小程序一样，但是不像小程序一样有更细节的API管理（周期性更新，缓存管理器）；
网络 (opens new window)：tt.request的最大并发限制是10个。
其他的一些更多的开发使用的内容就不详细例举了，文档介绍的更加详细，可以再开发的过程再详细查阅。
# 场景值不同
场景值对应的场景不同，场景内容不同和一些其他的细节点不同，可在具体开发中使用发现。
# npm支持
目前咱们的小程序都是用的有赞的UI框架Vant Weapp (opens new window)，小程序有一些自己封装的基础组件，但都是一些很基础的组件，所以引入一个有用的UI框架能有效提高效率，原生小程序怎么引入第三方npm包，飞书和微信的使用其实是一样的，上次商家小程序已经使用过了，但是没有跟大家同步过使用方法，其实小程序文档和有赞的UI框架文档里也都有使用方法，咱们之前是没有原生开发过，所以这里简单同步下：
版本支持：
微信小程序基础库版本 2.2.1 或以上、及开发者工具 1.02.1808300 或以上开始，小程序支持使用 npm 安装第三方包开发者工具 2.3.2 以上开始，小程序支持使用 npm 来管理第三方包 飞书小程序开发者工具 2.3.2 以上开始，小程序支持使用 npm 来管理第三方包。
飞书小程序使用步骤：
- step1：下载对应的 npm 包
npm i @vant/weapp -S
- step2：设置：开发者工具 - 详情 - 本地设置- 使用npm
- step3：在需要引入组件的页面 json文件里注册该组件
{
"usingComponents": {
"custom-button": "van-icon": "@vant/weapp/icon/index"
}
}
2
3
4
5
- step4：在对应的页面ttml文件中使用该自定义组件
<view class="intro">
<van-icon name="close" />
<van-icon name="https://b.yzcdn.cn/vant/icon-demo-1126.png" />
</view>
2
3
4
注意：
微信小程序比上述步骤多了一步构建npm,在开发者工具 工具 - 构建npm，会在项目根目录下多出一个miniprogram_npm，其他步骤相同
目前飞书小程序的vant引入组件不能全局注册，只能在每个页面的json文件里按需引入，已经跟官方确认，目前确实不能直接引入，官方已记录了使用场景看看之后是否优化
# 基于uniapp框架开发飞书小程序
uni-app 是一个开放式跨端跨框架解决方案，通过 uni-app 能够有效提升开发效率，并可以打破运行平台的限制降低维护成本。
支持常用开发框架。使用小程序的原生代码编辑非常复杂，而 uni-app 则支持使用完整的 React / Vue / Vue3 / Nerv 等框架来进行开发，不需要转换开发思维、不需要更改开发习惯。
是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到 iOS、Android、Web（响应式）、以及各种小程序平台。
# 基于Taro开发小程序
Taro 是一个开放式跨端跨框架解决方案，通过Taro能够有效提升开发效率，并可以打破运行平台的限制降低维护成本。
支持常用开发框架。使用小程序的原生代码编辑非常复杂，而 Taro 则支持使用完整的 React / Vue / Vue3 / Nerv 等框架来进行开发。
一套代码多平台运行。Taro 可以支持转换到 H5、ReactNative 以及任意小程序平台。当业务要求同时在不同的平台都可以提供服务时，针对不同的端去编写多套代码的成本显然非常高，如果使用Taro则只编写一套代码就能够适配到多端的能力就显得极为需要。
# 小程序搬家工具
什么是搬家工具：若你之前开发过微信/钉钉小程序，可以通过我们的搬家工具来快速将微信小程序/钉钉小程序的部分代码迁移到飞书小程序上，从而降低开发成本。
搬家工具可进行静态语法上的转换，将微信/钉钉小程序的常用接口转化为能够被飞书识别的方法，从而在飞书中正常运行。
需要注意的是：工具做不到运行时差异的抹平，也做不到一个 API 从无到有的过程。所以，需要大家根据转换过程中打出的日志，再对部分功能进行适配。
# 飞书小程序开发不方便之处
飞书开发者工具真机调试需要手机和开发者工具处于同一网络
飞书小程序的第三方UI组件库不能全局注册（已经npm模块部分说明）
飞书开发者工具，每次手动点开发者工具的编辑按钮，编辑特别慢，即使整个小程序还有一个空的框架，但是保存代码的自动编辑比较快，尽量用自动编译
# 踩坑记录
飞书开发者工具，可能本身存在的问题比较多，很容易出现各种问题，需要重启开发者工具才能生效或继续开发
飞书小程序的
new Date()，格式化的日期必须是 年(4位)-月(2位)-日(2位)，年月日必须是标准的4位-2位-2位，个位数前补0(padStart())，但是不补充0的代码在开发者工具是没有问题的，但是到飞书上不补充0有各位的数字的格式化后成为了NAN（一把辛酸泪，这问题可耗死我了）飞书开发者工具很多界面和功能样式呈现有些不成熟，比如，导航滑动：css样式设置了超出部门滚动，在开发者工具是不能滑动的，但是上传到飞书是没问题可滑动的，童靴们开发，遇到感觉不是问题的问题，可以先上传到飞书看看，说不定一切皆OK~
# 结语
大家在开发过程中发现问题或者不清楚的地方，欢迎来 @鸭梨@榆钱
← element拓展组件 UI框架对比 →