Feishu applet development H5 application embedding Feishu

Because of the company's business needs. It is necessary to embed the H5 page into Feishu. But also page jump. You can directly view the details page in the direct sidebar of the PC Feishu applet.

Feishu's documentation is really nonsense. Everything is summed up in one sentence. Fortunately, I have the foundation of small program development. After my own continuous testing, I finally realized the processing. It almost collapsed.

Generate a Feishu applet. This step is described in detail in Feishu. Do not repeat too much. https://open.feishu.cn/document/uQjL04CN/ukjL54SO

Embed Feishu into H5 page   

1. Preliminary preparation: understand how to use Feishu's web-view component to embed pages

The web-view component is a container that can be used to host web pages, and it will automatically fill the entire page. It is also very simple to use. Just use the src attribute

Code example:

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

2. The page uses web-view

In the pages/index/index index.ttml page of our project

use this code

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

3. Start our coding in index.js of index under pages

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. Here comes the highlight: how to open any page of our H5 page directly through the link?

The structure of the link is as follows: all parameters must be transcoded by encodeURIComponent. Otherwise, the Feishu applet will not recognize it. (remember)

Learn about AppLink  https://open.feishu.cn/document/uYjL24iN/ucjN1UjL3YTN14yN2UTN

link analysis

Link before parsing:
https://applink.feishu.cn/client/mini_program/open?appId=your appId&mode=sidebar-semi&path=pages/index/index?redirect=/report/detail&id=23743

The parameters that need to be encoded are all parameters that need to be passed after ?. So everything needs to be coded. Otherwise, Feishu will not recognize your passed parameters.
pages/index/index // represents the page address of the Feishu Mini Program
https://applink.feishu.cn/client/mini_program/open?appId=your appId&mode=sidebar-semi&path=pages/index/index? // this One section is fixed and does not need to be encrypted.
redirect // represents the page id of the H5 page you need to jump to in the page, and is the page parameter
mode=sidebar-semi // The code page is opened from the sidebar when it is on the PC side. When we check the approval details, we can directly look at it like this

Attached: Online parsing address: https://www.sojson.com/encodeurl.html

Encrypted link:
https://applink.feishu.cn/client/mini_program/open?appId=your appId&mode=sidebar-semi&path=pages/index/index?redirect%3D%2Freport%2Fdetail%26id%3D23743%0A

In this way, we can open our details page in the sidebar

5. After writing our small program code, we need to release the version in my app (note: both PC and mobile terminals need to re-publish the code to take effect)

I won't go into details