微信小程序skyline渲染遇到的问题

一人一程温一壶酒

已于 2025-03-20 10:56:00 修改

阅读量786

点赞数 4

分类专栏：微信小程序开发文章标签：微信小程序小程序

于 2025-03-12 17:44:59 首次发布

本文链接：https://blog.csdn.net/baidu_38942289/article/details/146203659

版权

微信小程序开发专栏收录该内容

1 篇文章

订阅专栏

1、如何在使用Webview渲染引擎的小程序中单独给页面开启 Skyline 渲染引擎

1）在 app.json 文件下增加配置：

  "lazyCodeLoading": "requiredComponents",
  "componentFramework": "glass-easel",
  "rendererOptions": {
    "skyline": {
      "disableABTest": true,
      "sdkVersionBegin": "3.0.1",
      "sdkVersionEnd": "15.255.255"
    }
  }

2）在页面的xxx.json中配置：

 "navigationStyle": "custom",
 "renderer": "skyline"

设置成功你可以看到开发者工具上有提示当前渲染模式：skyline
在这里插入图片描述

这样就可以在当前页面上使用Skyline 渲染了

2、说说使用skyline 渲染引擎开发小程序页面遇到的问题

1）页面无法滚动，这个官方文档有说明，需要滚动要使用sroll-view 标签，有点坑

然后sroll-view 标签设置overflow-x:auto; 也无效，要实现横向滚动要再嵌套一个sroll-view

2）页面需要配置"navigationStyle": “custom”

Skyline 不支持原生导航栏，需在页面配置加上 “navigationStyle”: “custom”（使之与 WebView 保持兼容），并自行实现自定义导航栏
在这里插入图片描述

官方文档链接

3）skyline默认flex 布局，横向布局必须要有 flex-direction: row;

这是写代码习惯问题，一般row 的时候，我都不会去写这个属性，这点不一致小坑了一下

4）文字做缩略的时候要使用标签text 或者span 才能成功

推荐使用span 用了text 在flex 布局下，样式会有问题，会默认一个高度，并且改不了，不清楚是不是被我其他代码影响到了，排查了挺久的，后面改成span 问题才解决，有遇到这个问题的朋友分享下解决方案

这里之前搞错了，因为之前我是单行文本给了不换行的属性，可以成功，后面多行就不行了。
这个文字缩略也是馨竹难书，后面找到了官方的解决方法
skyline 下不支持 line-clamp，可以使用 text 组件的 max-lines 结合 overflow 属性使用。
官方链接
在这里插入图片描述

5）skyline 页面有时候 flex 布局失效或gap属性失效

app.json 或者页面的.json 配置 “defaultDisplayBlock”: true
我配置完开发者工具gap属性仍然无效，真机正常，就这样吧~

  "rendererOptions": {
    "skyline": {
      "disableABTest": true,
      "sdkVersionBegin": "3.0.1",
      "sdkVersionEnd": "15.255.255",
      "defaultDisplayBlock": true
    }
  }