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

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

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

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

飞书嵌入H5页面

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

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

代码示例：

<web-view src="http://some-domain/some/path"></web-view>

2.页面用使用web-view

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

使用这段代码

 <web-view  src="{
   
   {src}}"></web-view>

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

const app = getApp();

Page({
  data: {
    src: "" // 页面跳转链接
  },
  onLoad(options) {
    // options 为页面的传参
    const { redirect } = options
    let url = redirect ? `${redirect}?` : '/repo
   // 可以根据H5页面接收redirect这个参数来跳转相对应的页面' 
    let query = ''
    if (options.id) {
      for (let i in options) {
        query += `${i}=` + options[i] + '&' // 拼接页面的传参
      }
    }
    let src = `https:/自己H5应用的链接/${url}${query}`
    this.setData({
      src:encodeURI(src) // 有传参的时候需要进行url的加密
    })
  },
});

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

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

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

链接解析

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

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

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

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

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

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

具体不做赘述了