评论

微信小程序渲染框架Skyline初体验--比比轻壁纸实例

skyline框架渲染

微信小程序的Skyline是微信小程序团队近期推出的接近原生渲染的渲染引擎,我尝试了用skyline输出了一款Uniapp+wordpress的壁纸小程序。

今天在项目提交后我也记录下skyline开发中的各种新特性和难点。文尾附上代码。

先来看下项目上线的效果。


可以微信扫码跳转小程序体验。

比比轻壁纸整个项目均是skyline打造,因此需要在app.json中定义如下两个参数

"renderer": "skyline",
"lazyCodeLoading": "requiredComponents",


此项目中,我也仅仅用到了skyline特性的冰山一角,因此更多的特性大家移步去官方文档中查看。

1.共享元素

最吸引我的地方的是共享元素特性,他能实现不同页面的元素无缝衔接。

官方的介绍是:

在连续的 Skyline 页跳转时,页面间 key 相同的 share-element 节点将产生飞跃特效,开发者可自定义插值方式和动画曲线。通常作用于图片,为保证动画效果,前后页面的 share-element 子节点结构应该尽量保持一致。


比比轻壁纸项目中大量使用了共享元素动画,让图片以丝滑般的交互进行呈现:

实现的方法也非常简单,仅需在不同页面把图片用<share-element></share-element>包裹起来,定义相同的id即可。

默认的动画就已经很丝滑了,官方对动画交互还给出了许多自定义的属性,方便自定义更多的动画。

共享元素文档:https://developers.weixin.qq.com/miniprogram/dev/framework/runtime/skyline/share-element.html

2.自定义路由

自定义路由真的绝了,仅仅几行css3样式属性,就能让两个页面的切换交互实现各种高难度动作。

项目中,全部的弹层交互、页面过度特效均由自定义路由轻松搞定,不同的路由交互仅需在官方提供的路由代码上修改两三行代码即可实现。

尤其是页面中有弹层内容显示或者半屏显示时,自定义路由非常实用。

自定义路由文档:https://developers.weixin.qq.com/miniprogram/dev/framework/runtime/skyline/custom-route.html

3.手势系统+worklet

目前项目中仅仅在图片返回时用到了手势,手势拖拽图片下滑,即可实现图片缩放回到上页

手势系统文档:https://developers.weixin.qq.com/miniprogram/dev/framework/runtime/skyline/gesture.html

4.吸顶布局

在小程序里,我们实现吸顶布局用到的是position:sticky。此次skyline直接给出了<sticky-header></sticky-header>实现吸顶,同时结合<sticky-section></sticky-section>能实现多重吸顶

吸顶文档:

https://developers.weixin.qq.com/miniprogram/dev/component/sticky-header.html

https://developers.weixin.qq.com/miniprogram/dev/component/sticky-section.html

以上四个新特性是项目中特别值得推荐的,下面说一下开发难点

1.兼容问题

如果你是从webview项目中切换过来,你会发现页面会变的凌乱不堪,完全不堪入目。这个时候,需要一点耐心。因为新的skyline使用的类似nvue模式,即默认全部使用弹性盒模型display:flex属性,暂不支持display:block,而这个属性会导致宽度和高度变得弹性,你不定义某个子标签的宽高可能就看不到这个内容显示或者挤成一团。

经过使用后,总结了几点:

  • a.使用display:flex最好带上flex-direction: column/row
  • b.形变的时候用flex-shrink: 0试试
  • c.当横向滚动使用scroll-view并用了display:flex属性,不定义高度的话,scroll-view内容就看不到了

2.常用的css属性支持度

目前正式版还未发布,常用的伪类、var等还未支持,需要这些特性的需要再等等。

导致的问题包括图标字体的使用等,可以看看官方给出的解决方案或者使用svg图标

特性兼容进度:https://developers.weixin.qq.com/miniprogram/dev/framework/runtime/skyline/status.html

3.第三方组件问题

如果你的项目之前用到了第三方组件,可能在skyline模式下大量兼容报错,目前考虑换微信小程序官方的组件或者自己写自定义组件

4.项目发布后还是webview框架?

项目提交发布后还需要做全量skyline测试

https://developers.weixin.qq.com/miniprogram/dev/framework/runtime/skyline/migration/#%E9%85%8D%E7%BD%AE-We-%E5%88%86%E6%9E%90-AB-%E5%AE%9E%E9%AA%8C


附上项目的小程序demo代码(非uniapp源码)仅供大家学习

https://github.com/shiheme/smartgallery

最后一次编辑于  2023-04-27  
点赞 11
收藏
评论

9 个评论

  • 社区运营专员-一旺
    社区运营专员-一旺
    置顶评论2023-05-17

    用户你好,感谢你参与「小程序渲染框架」征文活动!你的文章内容充实、结构完整,同时示例非常具有实用性与吸引力,因此获得微信团队的精选并且获得微信周边礼品一套。2023 年 5 月 18 日前,我们将通过社区私信联系你确定邮寄地址,如一周内未收到回复(即 2023 / 05 / 25 0点前),视为放弃奖品。期待你的更多好文 👍 !

    2023-05-17
    赞同
    回复 1
    • 小鱼哥
      小鱼哥
      2023-06-14
      谢谢,已经领过了
      2023-06-14
      2
      回复
  • 微信小店技术专员-binnie
    微信小店技术专员-binnie
    2023-04-27

    不错👍

    2023-04-27
    赞同 3
    回复
  • 原来是Lisa酱呀
    原来是Lisa酱呀
    09-03

    扫码打不开

    09-03
    赞同
    回复
  • 成
    2023-08-03

    为啥我扫码体验的过渡效果很硬没有像视频里演示的那样柔顺的~

    2023-08-03
    赞同
    回复 1
    • 随风
      随风
      2023-10-28
      ios端才可以,安卓没动画
      2023-10-28
      回复
  • HSR
    HSR
    2023-07-20

    界面好看。操作起来手感生硬,好像也不流畅,网络问题?

    2023-07-20
    赞同
    回复
  • 哄哄
    哄哄
    2023-07-17

    skyline在开发工具上能触发,但预览模式下不能生效,要怎么解决呢?

    2023-07-17
    赞同
    回复
  • 🇪 🇱 🇸 🇪
    🇪 🇱 🇸 🇪
    2023-06-14

    纵享丝滑

    https://developers.weixin.qq.com/community/develop/article/doc/00026cdbfd0d2829eadf6b60c51013

    2023-06-14
    赞同
    回复
  • 赵乂乂te
    赵乂乂te
    2023-05-24

    我看了一下你的项目,uniapp中该怎么使用小程序的手势系统组件呢,我看你的项目似乎也没有实现,如果自定义路由不配合手势系统似乎没有什么意义

    2023-05-24
    赞同
    回复 1
    • 小鱼哥
      小鱼哥
      2023-06-14
      我手势系统仅在壁纸返回时用到了,下滑壁纸就返回。可以看uniapp官方问答社区对手势的实现方式的帖子《无法识别微信小程序skyline框架下的wx.router.getRouteContext(this)》https://ask.dcloud.net.cn/question/165383
      2023-06-14
      回复
  • 夏味
    夏味
    2023-05-10

    补充:1. flex-shrink: 0 可能会导致文本过长的省略失效 2. display:block 也支持了,需要自行配置

    2023-05-10
    赞同
    回复 2
登录 后发表内容