飞书⼩程序开发H5应⽤嵌⼊飞书
因为公司的业务需求。需要把H5页⾯嵌⼊到飞书⾥⾯。⽽且还要进⾏页⾯跳转。可直接在PC飞书⼩程序直接侧边栏查看详情页。
飞书的⽂档真的太扯淡了。什么都是⼀句话概括。还好⾃⼰有⼩程序开发的基础。经过⾃⼰不断的测试终于实现处理了。做到差点崩溃了。飞书嵌⼊H5页⾯
1.前期准备：了解使⽤飞书的web-view这个组件嵌⼊页⾯
web-view 组件是⼀个可以⽤来承载⽹页的容器，会⾃动铺满整个页⾯。使⽤也很简单。使⽤src属性即可
代码⽰例：
<web-view src="some-domain/some/path"></web-view>
2.页⾯⽤使⽤web-view
在我们项⽬的pages/index/index  l的页⾯
使⽤这段代码
<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的转码。否则飞书⼩程序不识别。（谨记）
链接 解析
这样⼦就可以在侧边栏打开我们的详情页⾯了
5. 写好我们的⼩程序代码后需要在我的应⽤⾥⾯发布版本（注意：PC端和移动端都需要重新发布代码才可以⽣效）
具体不做赘述了