Mini Program
取消
Development
中文
EN
取消
  • Guide

    • # Best practices

    # Injection on demand

    Skyline relies on on-demand injection of features.When the on-demand injection feature is turned on, some of the performance of Weixin Mini Program will change, which may cause compatibility issues (see the on-demand injection feature documentation);Therefore, it is recommended to turn on on-demand injection and properly test it before you start adapting to Skyline to rule out the impact of this feature in advance.

    # Progressive Migration

    For existing projects, a gradual migration is recommended, which opens page by page, and it is recommended to migrate pages on the key path of this Weixin Mini Program to give most users a better experience; For new pages, it is recommended to turn on Skyline by default; For new projects, we recommend opening them directly globally, which, in addition to having a better experience, also makes the memory usage of the Mini Programs lower.

    # Use local scrolling

    Under WebView, pages are scrollable globally by default, so most developers will go straight to global scrolling, which makes

    1. Elements without scrolling useposition: fixedFixed location, such as custom navigation bar, which is global scrolling to simulate local scrolling, the scroll bar will show the location of the overflow
    2. Custom functionality for scrolling can only be provided by configuration or API, such asPage.onPageScroll, etc., which makes some features impossible to implement

    As a result, Skyline no longer provides global scrolling, using scroll-view for areas where scrolling is required, and we can provide more extensions for scroll-view components.

    In general, the interface layout is mostly in the form of navigation bar + scroll area, here is a common practice (WebView compatible)

    <navigation-bar></navigation-bar>
<!-- 通过使用 flex 布局，将 scroll-view 设置 flex:1 以占据页面剩余空间 -->
<scroll-view type="list" scroll-y style="display: flex; flex-direction: column; flex: 1; width: 100%; overflow: auto;">
  <view wx:for="{{items}}" list-item></view>
</scroll-view>

    # Global Style Reset

    WXSS supported by Skyline is a subset of WebView, and may support some necessary or commonly used features in the future, but will remain a subset of WebView.

    Therefore, in order to make WebView compatible performance align Skyline as much as possible, while reducing the code of repeated settings, it is recommended to open the following configuration:

    rendererOptions: {
  "skyline": {
    "defaultDisplayBlock": true,
    "defaultContentBox": true,
    "tagNameStyleIsolation": "legacy",
    "enableScrollViewAutoSize": true,
  }
}

    Consider applying WXSSReset globally or at the page level as follows:

    page,
view,
text,
image,
button,
video,
map,
scroll-view,
swiper,
input,
textarea,
navigator {
  position: relative;
  background-origin: border-box;
  isolation: isolate;
}
page {
  height: 100%;
}

    # Optimize long list performance

    The scroll-view component under Skyline comes with optimization for on-demand rendering, which greatly improves the rendering performance of long lists, which is being rendered on a granular basis with the direct sub-nodes of the scroll-view, which are rendered when one of its sub-nodes approaches the scroll-views' viewport, and then recycled.

    <!-- 以下 scroll-view 的直接子节点有 5 个 view，此时每个 view 都能按需渲染 -->
<scroll-view type="list" scroll-y>
    <view> a </view>
    <view> b </view>
    <view> c </view>
    <view> d </view>
    <view> e </view>
</scroll-view>
<!-- 以下 scroll-view 的直接子节点只有 1 个 view，按需渲染并不能发挥作用 -->
<scroll-view type="list" scroll-y>
    <view>
        <view> a </view>
        <view> b </view>
        <view> c </view>
        <view> d </view>
        <view> e </view>
    </view>
</scroll-view>

    In addition, each item on a long list has almost the same style, and Skyline also supports style sharing for similar nodes, so that a style needs to be computed once to be shared with other similar nodes and greatly improves the performance of style computation.In general, we would use the WXML template syntaxwx: forTo expand the list, simply declarelist-itemfor the list item to start style sharing (a subsequent release will recognizewx: forand automatically enable it).

    <scroll-view type="list" scroll-y>
    <view wx:for="" list-item> {{index}} </view>
</scroll-view>

    # Preload

    Weixin Mini Program An important optimization is to preload environments, including WebView environments, AppService threads, early injection of base libraries, etc.Since most of the Mini Programs are currently rendered in WebView, in order to save resources, WeChat clients do not automatically preload the Skyline environment (and therefore continually optimize the strategy depending on the actual situation), so we provide WeChat-]] wx.preloadSkylineView Preload the interface for the Skyline environment. Developers can call the interface manually using the path where they may be jumping to the Skyline page. It is recommended to call after a delay in theonShowlifecycle so that the Skyline pages can be reloaded when they are returned

    # Use enhanced features

    To make the Weixin Mini Program experience as close to the native app, Skyline has added several new features, including worklet animation mechanism , gesture system , and custom routing , Shared element animation , etc., enable Skyline to make some interactive effects that are not possible or not easily achieved under WebView.

    Considering that it is not supported under WebView, it is recommended to be compatible in a way that experiences degradation.wx.navigateToInterfaces jump pages. Under Skyline, you can jump pages in a custom routing animation for a better experience, while WebView fallsback to a simple right-to-left page switch animation, as do the shared element animation feature without additional compatibility code.