# Adjustments to the shopping experience in the WeChat Channels scenario Weixin Mini Program

# I. Background

In order to optimize the user experience of WeChat Channels, WeChat will carry out a half-screen framework overhaul for Weixin Mini Program in the context of WeChat Channels (including standardizing the top navigation bar on product detail pages and disabling sharing) to make the shopping experience in live streaming rooms more streamlined and immersive.

This change has been in WeChat iOS 8.0.6 version release and effective, please read the changes carefully.If the modification has an impact on the developer's Weixin Mini Program shopping experience, please complete the adaptation yourself;If there are no issues, you can still sell products through WeChat Channels after the update is released.

# II. Achieving results

# Core processes

  1. Live Room

  2. Profile page

# III. Specific adaptations for developers

# Instructions for adjustment

  1. The Weixin Mini Program for scene values 1177 (WeChat Channels live streaming room) and 1195 (WeChat Channels profile product showcase) will be affected, while the original logic will remain for other scenes.
  2. The core focus pages are the live streaming rooms in WeChat Channels and the pages opened when profiles are accessed, which are mainly used for the main process of purchasing products, including product detail pages, order detail pages, and order completion pages.

# The specific adjustment points are well known.

  1. The front page of the live broadcast is unified as a half-screen: WeChat Adjust the front page of a live broadcast (the product details page) to 3 / 4th the height of the screen. This page triggers any action and spreads out to the full screen.

  2. WeChat provides developers with two options for customizing the top section of the initial page opened in WeChat Channels: a product detail page.(Other pages can retain custom headers)

(1) Default Mode: WeChat will provide a unified top bar that covers the original Weixin Mini Program navigation bar, with a height of 44px, for the first page opened in WeChat Channels, including both full-screen and half-screen modes.When the next version is released, it does not need an audit to take effect. Dxplaination: Possible experience impacts: issues such as coverage of the top core operations, incomplete coverage due to the original Weixin Mini Program custom navigation content exceeding the default navigation, which need to be adjusted according to your own business circumstances.



(2)自定义方式(5月25日之后可使用):开发者也可自己针对视频号打开的第一个页面的全屏状态改造顶部(半屏状态仍保持默认顶部),需要去掉顶部导航栏中搜索、小程序导航、去主页等和该商品购买无关的操作。开发者改造后,在app.json文件中声明firstPageNavigationStyle为custom,则提交审核,审核通过后才能在视频号直播。

处罚说明:若开发者使用自定义方式改造头部,但是未按照要求进行,一经发现,平台将视违规程度对该小程序采取限制视频号关联功能直至封号处理。



  1. Disable button open-type = share to avoid forwarding Weixin Mini Program to friends and other logic.After the user clicks, the platform provides a unified message that "this feature is temporarily unavailable."

4. Disable navigateToMiniProgram to avoid jumping to another Mini Program in this scenario. After the user clicks, the platform provides a unified message that "this feature is temporarily unavailable."



  1. Do not draw "Add to my Weixin Mini Program"

  1. Disable openSetting to avoid opening the Weixin Mini Program settings page.After the user clicks, the platform provides a unified message that "this feature is temporarily unavailable."

  1. Disable button open-type = feedback to avoid opening the feedback page.After the user clicks, the platform provides a unified message that "this feature is temporarily unavailable."

  1. Try to avoid fixed style, prone to interface jitter.
  2. Try to avoid using inline scroll-view and use page-level scrolling.
  3. Don't jump on a page or pop up when you enter it.

# Semi-Screen Developer Debugging

Developers can use the Developer Tools (versions 1.05.2112301 | 1.06.2112301 or above), The "Weixin Mini Program mode set at compile" Select "Half-screen Native" to debug the display in half-screen mode for certain scenarios in the WeChat Channels section.

# IV. The Developer Experience Way

  1. WeChat for iOS 8.0.6Prior to the release: there is no support for development version Weixin Mini Program verification for the WeChat Channels scenario; if you need to make modifications ahead of time, you can directly make adjustments according to the instructions provided, such as not calling the restricted interfaces or removing the external link at the top of the product details page.
  2. WeChat for iOS 8.0.6After the release: The aforementioned capabilities have been released and are now supported for development version Weixin Mini Program verification in the WeChat Channels scenario; you can open "Development Debugging" and select "Open Half-Screen Mini Program" under WeChat to conduct the verification;Or watch the online effect directly after adjusting.



附录:

常见问题 问题咨询