微信小程序的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