快速知悉

1. skyline 共享元素动画新特性 详情
2. skyline 支持网格容器组件 详情
3. skyline 支持吸顶容器组件 详情
4. 视频号直播组件 详情
5. 新增 查询是否被添加到「我的小程序」状态接口 详情
6. live-pusher 支持自定义滤镜 详情

1、skyline 共享元素动画新特性 详情

使用介绍：在连续的两个 Skyline 页面跳转时，可以将上一个页面的元素“共享”到下一个页面，并伴随着过渡动画。

示例代码：

<!-- Page A -->
<!-- key 相同的节点会在页面跳转/返回时产生动画 -->
<share-element key="portrait" transitionOnGesture>
  <view class="small-head-image"></view>
</share-element>
<!-- Page B -->
<share-element key="portrait" transitionOnGesture>
  <view class="big-head-image"></view>
</share-element>

示例：

查看 skyline 共享元素动画新特性 官方文档

2、skyline 支持网格容器组件 详情

使用介绍：网格布局容器，仅支持作为 scroll-view 自定义模式下的直接子节点或 sticky-section 组件直接子节点。

2.1 网格布局

示例代码：

<scroll-view type="custom"> //自定义模式
  <grid-view type="aligned" cross-axis-count="3"> //aligned为每行高度由同一行中最大高度子节点决定
    <view wx:for="{{list}}">
      <image src="{{item.image_url}}" mode="aspectFit"></image>
      <view>...</view>
    </view>
  </grid-view>
</scroll-view>

示例：

2.2 瀑布流布局

示例代码：

<scroll-view type="custom">
  <grid-view type="masonry" cross-axis-count="2"> //masonry为瀑布流，根据子元素高度自动布局
    <view wx:for="{{list}}">
      <image src="{{item.image_url}}" mode="widthFix"></image>
      <view>...</view>
    </view>
  </grid-view>
</scroll-view>

示例：

查看 skyline 支持网格容器组件 官方文档

3、skyline 支持吸顶容器组件 详情

使用介绍：吸顶布局容器，仅支持作为 scroll-view 自定义模式下的直接子节点或 sticky-section 组件直接子节点。

示例代码：

<scroll-view type="custom">
  <sticky-section wx:for="{{list}}" push-pinned-header="true"> //吸顶元素重叠时是否继续上推
    <sticky-header>
      <view>{{item.name}}</view>
    </sticky-header>
    <list-view>
      <view>...</view>
    </list-view>
  </sticky-section>
</scroll-view>

示例：

 查看 skyline 支持吸顶容器组件 官方文档

4、视频号直播组件 详情

使用介绍：小程序内嵌视频号直播组件，展示视频号直播状态和封面，并无弹窗跳转至视频号。注意：使用该组件打开的视频号视频需要与小程序的主体一致。

示例代码：

<channel-live  feed-id="视频 feedId"  finder-user-name ="视频号 id，以“sph”开头的id，可在视频号助手获取。视频号必须与当前小程序相同主体。"> 	</channel-live>

查看 视频号直播组件 官方文档

5、新增查询是否被添加到「我的小程序」状态接口 详情

使用介绍：检查小程序是否被添加至 「我的小程序]。

示例代码：

  wx.checkIsAddedToMyMiniProgram({
        success(res){
            console.log(res.added)//类型为 boolean ,是否被添加至 「我的小程序」
								
        }
    })

查看 wx.checkIsAddedToMyMiniProgram 官方文档、

6、live-pusher 支持自定义滤镜 详情

1. 新增 LivePusherContext.applyFilter 添加滤镜效果
2. 新增 LivePusherContext.clearFilters 清除所有滤镜效果
3. 新增 LivePusherContext.applySticker 添加贴纸特效
4. 新增 LivePusherContext.clearStickers 清除所有贴纸特效
5. 新增 LivePusherContext.applyLipStickMakeup 添加口红美妆特效
6. 新增 LivePusherContext.applyEyeShadowMakeup 添加眼影美妆特效
7. 新增 LivePusherContext.applyBlusherStickMakeup 添加腮红美妆特效
8. 新增 LivePusherContext.applyFaceContourMakeup 添加修容美妆特效
9. 新增 LivePusherContext.applyEyeBrowMakeup 添加眉毛美妆特效
10. 新增 LivePusherContext.clearMakeups 清除所有美妆特效

查看  live-pusher 支持自定义滤镜 官方文档