# Column model

in PC Such as the ability to large scale display Mini Program environment, Mini Program support in column mode. The column mode can divide the WeChat window into two halves, each showing a page.

Currently, Windows Weixin 3.3 The above versions support column mode. For other versions of WeChat, the column mode will not work.

# Enable Column Split Mode

in app.json Added at the same time. "resizable": true and "frameset": true Two configuration items can enable columnar mode.

Code example:

{
  "resizable": true,
  "frameset": true
}

When column mode is enabled, you can preview column effects using the Developer Tools automatic preview feature.

# Column placeholder image

When no pages are displayed in a column, an image is displayed in the center of the column.

If the code package frameset/placeholder.png File exists, this picture will serve as the picture displayed at this time.

# Key points for column adaptation

Some of the existing code logic may have problems with columnar mode enabled. You may need to change the code to make it work correctly in column mode.

# Avoid using interfaces that change page presentation

The interface that changes the display effect of the current page, always for the most recently opened page.

For example, after opening a new page in the right column, change the interface of the page title wx.setNavigationBarTitle Even if called from a page in the left column, it will change the title of the page in the right column!

Therefore, you should try to avoid using such interfaces and instead use page-meta and navigation-bar Component instead.

# Change Route Interface Call

If relative paths are used in the routing interface, they are always relative to the most recently opened page path.

For example, after opening a new page in the right column, the routing interface [wx.navigateTo ]((wx.navigateTo )) Even if called from a page in the left column, the jump path will be relative to the path of the page in the right column!

Therefore, such a routing interface should be changed to Router Interface calls, such as this.pageRouter.navigateTo 。

# Page size is not a fixed value

With column mode enabled, the page size can also change dynamically. Please use Response Display Area Changes To handle the way the page size changes.