飞书小程序开发经验

Posted 2023-04-06 tenerSainter

飞书小程序开发经验总结

前序

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

开放文档与平台

飞书小程序提供了很多原生的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);
      
    )

持续更新。。。

初学小白，在线挨打，如果有什么纰漏之处，还请大佬们多多指正。

微信小程序开发BUG经验总结

摘要： 常见的微信小程序BUG！

小程序开发越来越热，开发中遇到各种各样的bug，在此总结了一些比较容易掉进去的坑分享给大家。

1. new Date跨平台兼容性问题

在Andriod使用new Date(“2018-05-30 00:00:00”)木有问题，但是在ios下面识别不出来。

因为IOS下面不能识别这种格式，需要用2018/05/30 00:00:00格式。可以使用正则表达式对做字符串替换，将短横替换为斜杠。var iosDate= date.replace(/-/g, ‘/‘);。

2. wx.getUserInfo()接口更改问题

微信小程序最近被吐槽最多的一个更改，就是用户使用wx.getUserInfo（开发和体验版）时不会弹出授权，正式版不受影响。现在授权方式是需要引导用户点击一个授权按钮，然后再弹出授权。

解法很长，请参考:

• 微信小程序不支持wx.getUserInfo授权的解决方法
• getUserInfo兼容解决方案

3. 只有在调试模式下，才能发送数据到自己的正式服务器

其实，只要注意配置合法域名，这个问题就解决了。有的时候，因为一上来就开发，忘记掉去配置域名。后来发现数据没法出去，可能半天没想来忘记配置了！

4. 无法获取UnionID的问题

login获取UID必须满足两个条件：

• 把小程序和公众号都绑定在开放平台
• 用户必须已经关注公众号

用wx.getUserInfo获取满足一个条件：

• 把小程序和公众号都绑定在开放平台

5. wx.getSystemInfoSync获取windowHeight不准确

主要原因在于获取是时机，wx.getSystemInfoSync是在页面初始化的时候就计算了，基本上可以理解为是屏幕高度。所以，最好的方法是使用异步接口，并且在onReady函数中调用。

onReady() {
  wx.getSystemInfo({
    success({windowHeight}) {
      // todo
    }
  });
}

6. 图片本地资源名称，尽量使用小写命名

在解决iPhone X适配时，底部多余部分使用图片时

<image class=‘iphonexImg‘ src="/imgs/iphoneBGT.png" mode="aspectFill">

路径是 src=‘imgs/iphoneBGT.png‘

发现在pc IDE上面可以显示出来，但是真机调试时，图片找不到，

然后将图片名称改为iphonex.png真机调试就可以了

<image class=‘iphonexImg‘ src="/imgs/iphonex.png" mode="aspectFill">

写在最后：代码总是有各种BUG，像上面列举的问题还是在开发中就可以发现。而代码上线以后呢，测试也不能保证100%没有问题。在这里，推荐Fundebug的微信小程序BUG监控服务给各位老铁！

关于Fundebug

Fundebug专注于JavaScript、微信小程序、微信小游戏、支付宝小程序、React Native、Node.js和Java实时BUG监控。 自从2016年双十一正式上线，Fundebug累计处理了7亿+错误事件，得到了Google、360、金山软件、百姓网等众多知名用户的认可。欢迎免费试用！

版权声明

转载时请注明作者Fundebug以及本文地址：
https://blog.fundebug.com/2018/10/19/wechat-app-bugs/