飞书小程序开发 H5应用嵌入飞书

因为公司的业务需求。需要把H5页面嵌入到飞书里面。而且还要进行页面跳转。可直接在PC飞书小程序直接侧边栏查看详情页。

飞书的文档真的太扯淡了。什么都是一句话概括。还好自己有小程序开发的基础。经过自己不断的测试终于实现处理了。做到差点崩溃了。

生成一个飞书小程序，这步在飞书里面描述的很详细了。不做过多的赘述。https://open.feishu.cn/document/uQjL04CN/ukjL54SO

飞书嵌入H5页面   

1.前期准备：了解使用飞书的web-view这个组件嵌入页面

web-view 组件是一个可以用来承载 页的容器，会自动铺满整个页面。使用也很简单。使用src属性即可

代码示例：

2.页面用使用web-view

在我们项目的pages/index/index  index.ttml的页面

使用这段代码

3. 在 pages下面的index的index.js 里面开始我们的编码

4.重头戏来了：怎么直接在通过链接直接打开我们H5页面的任意页面呢h3>

链接的结构如下：所有的参数必须要进行encodeURIComponent的转码。否则飞书小程序不识别。（谨记）

了解一下AppLink https://open.feishu.cn/document/uYjL24iN/ucjN1UjL3YTN14yN2UTN

链接 解析

解析前的链接：
https://applink.feishu.cn/client/mini_program/openpId=你的appId&mode=sidebar-semi&path=pages/index/indexdirect=/report/detail&id=23743

需要编码的从 都是需要传的参数。所以都是需要编码的。否则飞书不识别你的传参。
pages/index/index  // 代表飞书小程序的页面地址
https://applink.feishu.cn/client/mini_program/openpId=你的appId&mode=sidebar-semi&path=pages/index/indexbsp; //  这一段是固定的不需要加密
redirect // 代表页面中你需要跳转的H5 页的页面 id 为页面的传参
mode=sidebar-semi  // 代码页面在pc端的时候从侧边栏打开。我们查看审批详情的时候就可以这样子直接看

附加上：在线解析地址： https://www.sojson.com/encodeurl.html

加密后的链接：
https://applink.feishu.cn/client/mini_program/openpId=你的appId&mode=sidebar-semi&path=pages/index/indexdirect%3D%2Freport%2Fdetail%26id%3D23743%0A

这样子就可以在侧边栏打开我们的详情页面了

5. 写好我们的小程序代码后  需要在我的应用里面发布版本（注意：PC端和移动端都需要重新发布代码才可以生效）

具体不做赘述了

文章知识点与官方知识档案匹配，可进一步学习相关知识小程序技能树首页概览3867 人正在系统学习中