Skyline渲染引擎
使用snapshot 生成图片后,调用wx.previewImage 查看正常 [图片],长按保存到相册后 就变成黑色的了[图片],只有边框。
Skyline模式 [图片] webview模式 [图片]
scroll-view在windows上无法滑动,video 在移动设备上全屏后没有返回按钮,取消全屏后变横屏,有适配计划吗
两部iphone13出现小程序用着用着划不动了,按钮点击没反应,只能上下划。测试出现后调试台点击也没反应
我的 Skyline 小程序按文档优化后总启动耗时还是很长: [图片] 性能相关配置: [图片] 无全局组件。全局开启了 Skyline 模式,并且所有页面都是 Skyline 。包体积已经优化:[图片] [图片] 另外,首页 onLoad 只有一个接口,而且为匿名用户加了缓存。 请 Skyline 官方帮看看,冷启动优化方面还有什么可以优化的地方?
https://developers.weixin.qq.com/s/qN9CZ6mS7BTf 开发者工具会展示自定义tabbar, 真机预览不展示
[图片] [图片]
目前小程序的线上版本是webview页面,计划新增一个包含skyline页面的分包。 在分包中按页面粒度开启了skyline渲染模式: [图片] 并根据官方文档中的配置关闭A/B实验: [图片] 但在体验版中,从webview页面跳转到skyline页面时,仍然默认以webview运行。其中调试工具中的 渲染模式 选择Auto(即不强制切换Skyline,而是该页面自动选择渲染模式)。 [图片] [图片] 我了解通过调试工具强制切换Skyline会在进入Skyline页面时默认以Skyline模式运行,但是强切开关只在开发板和体验版中存在,请问我应该如何测试并保证在正式版本小程序中进入Skyline页面时是默认以Skyline渲染 的情况呢?
skyline模式下,line-height:20px,实现容器尺寸会是21px。 看起来是一句话,但是这个问题会导致阅读类小程序无法实现,因为行高与容器计算关系不准确的话,在左右滑动分页这种计算模式下,会出现底部与顶部显示半行,1/3行等的现象,且无法归避 用下面一行代码即可复现: <view style="line-height: 20px;font-size: 16px;">内容1,内容2,看起来是一句话...</view> // 内容如果是1行,view容器的高度会是21px // 内容如果是2行,view容器的高度会是42px // 内容每多1行,view容器的高度是【20px * 行数 + 行数】像素 // 复现条件:1.font-size>=15px; 2.文本内容要需要多写几个字,最好用正常的一个句子,有中文有标点符号。 [图片]
skyline渲染模式下,10分钟,电脑风扇呼呼转,官方优化优化吧,没法用了?16个g的内存都应付不了了
Page({ onReady() { this.createSelectorQuery() .select("#target") .node() .exec(res => { const node = res[0].node node.takeSnapshot({ type: 'arraybuffer', format: 'png', success: (res) => {}, fail(res) {} }) }) // 此处少添加了花括号和小括号 } })
代码片段倒是其次,我现在更新了最新版的Nightly开发工具(Mac M3芯片)[图片] [图片] 然后打开Webview页面报错,按道理来说不应该触发这样的报错吧,webview还没有切换到glass-easel框架[图片] [图片] [图片]
<snapshot id="view" class="intro" > <canvas type="" canvas-id="myCanvas" style="width: 343px; height: 274px;display: block;"/> </snapshot> 简单嵌套了一下canvas,skyline引擎模式下canvas的内容显示不出来
目前发现scroll-view这个组件才有这个问题,所有的基础库都试了,依然有这样的问题!开发工具也换了没有异常之前的版本,也是有这样的问题 目前代码是正式版 小程序 正在正常运营的。此期间没有改过。这次需要优化功能,重新编译代码运行就一直报这个错! [图片]
map组件内使用自定义组件展示自定义callout时,webview能正常显示,skyline无法显示自定义组件,开发者工具不支持调试map <map markers="{{markers}}"> <cover-view slot="callout"> <block wx:for="{{callouts}}" wx:key="index"> <callout></callout> </block> </cover-view> </map> 代码片段:https://developers.weixin.qq.com/s/5R6r0SmS7zSS Ps:开发者工具里map组件能不能不要提示把cover-view替换成view了,map组件内部不支持同层渲染,换了view根本显示不出来
[图片]
skyline如果文本布局复杂的情况下,无法达到预期效果。 预期效果 [图片] 目前的解决方案就是【ANESSA】前面加了nbsp;空格来达到缩进效果 希望官网text组件支持text-indent属性 less: .product-name-skyline { padding-top: 12rpx; box-sizing: border-box; width: 100%; color: #222222; font-size: 28rpx; line-height: 38rpx; height: 88rpx; .ip-pic, .ip-label { position: absolute; } .brand-name { font-weight: bold; margin-right: 10rpx; } .ip-pic { display: inline-block; width: @ipPicWidth; height: 28rpx; transform: translateY(4rpx); } } wxml: <view wx:if="{{isSkyline}}" class="product-name-skyline"> <!-- 这里的图片标签要设置为绝对定位 --> <image wx:if="{{ipLabeStyle.pic && product.showIpLabelImage}}" class="ip-pic" src="{{ipLabeStyle.pic}}" mode="heightFix"/> <text overflow="ellipsis" max-lines="2"> <!-- 注意:空格不要删 目前通过输入多个空格来达到缩进的效果 Skyline目前text不支持缩进text-indent这个属性 --> <text wx:if="{{product.brandShowName && product.showIpLabelImage}}" decode="{{true}}" class="brand-name"> {{product.brandShowName}}</text> <text>{{product.title}}</text> </text> </view>
看了文档,text可以内嵌span组件, 可以达到预期效果
https://developers.weixin.qq.com/miniprogram/dev/component/text.html?property=skyline
新增 span 组件用于内联文本和图片,如 <span> <image> </image> <text>bar</text> </span>
修正方案后:
<text overflow="ellipsis" max-lines="2">
<span>
<image wx:if="{{ipLabeStyle.pic && product.showIpLabelImage}}" class="ip-pic" src="{{ipLabeStyle.pic}}" mode="heightFix"></image>
<text>{{product.brandShowName}}</text>
<text>{{product.title}}</text>
</span>
</text>
Skyline引擎,使用showTabBar/hideTabBar时页面会出现闪动 用的是iphone7和iphone15
组件只要配置了componentPlaceholder,不管是不是异步分包都会出bug。 按道理应该渲染111和222,但是skyline会渲染2个222。 代码片段:https://developers.weixin.qq.com/s/5C1EjLmt7PSI index.js Page({ data: { items: [ { id: 1, title: '111', }, { id: 2, title: '222', }, ], }, }); index.json { "usingComponents": { "cmp1": "/components/cmp1/index", "cmp2": "/subPackages/cmp2/index" }, "componentPlaceholder": { "cmp1": "view", "cmp2": "view" } } index.wxml <view style="margin-top:100px;"> 渲染主包中的组件cmp1, 配置了componentPlaceholder </view> <cmp1 wx:for="{{items}}" wx:key="id" title="{{item.title}}" /> <view style="margin-top:100px;"> 渲染分包中的组件cmp2, 配置了componentPlaceholder </view> <cmp2 wx:for="{{items}}" wx:key="id" title="{{item.title}}" />
安卓机型 华为p60荣耀畅玩20[图片]
小程序示例
交互动画 tab
图片背景色是透明的,给 view 设置一个白色背景看看