First, the function of sharing moments

Setting the Share Status

The mini program page cannot be shared to moments by default. The developer needs to take the initiative to set “Share to Moments”. Pages are allowed to be shared in moments if two conditions are met:

  1. First, the page should be set to “send to friends”. Refer to the Page. OnShareAppMessage interface documentation for details
  2. If condition 1 is met, you can set the page to share to Moments and customize the title and image. Refer to the Page.onShareTimeline interface documentation

Pages that meet the above two conditions can be shared in moments.

Single page mode

When users open the page of the shared mini program in moments, they will not actually open the mini program, but enter a page of “single page mode of mini program”, which has the following features:

  1. In Single-page mode, the navigation bar is fixed at the top of the page, and the title is displayed as the title of the current JSON configuration. An operation bar is fixed at the bottom. Click “Go to small program” in the operation bar to open the current page of the small program. The top navigation bar and the bottom action bar do not support custom styles.
  2. Single-page mode runs the content of the miniprogram page by default, but the layout of the miniprogram page may be affected because the top navigation bar and the bottom action bar are fixed on the page. Therefore, developers are encouraged to pay special attention to adapting page interactions to “one-page mode” to achieve a smooth and complete interaction experience.
  3. In single-page mode, some components or interfaces have restrictions. For details, see Restrictions in single-page mode below

The page adapter

Page adaptation can be performed by determining that the scene value is 1154. In addition, in single-page mode, you can set the intersection state of the top navigation bar and the page. For details, see navigationBarFit configuration.

Also note that in single-page mode, the wx.getSystemInfo interface returns safeArea as the entire screen space.

Restrictions in single-page mode

Small program “single page mode” is suitable for pure content presentation scenarios, and the interaction and interface capabilities are limited. Therefore, there are the following limitations:

  1. The page has no login state, and the interface related to login is as followswx.loginAre unavailable
  2. It is not allowed to jump to other pages, including any jump page, jump other small programs, jump wechat native page
  3. Landscape is not allowed
  4. If the page contains tabbars, tabbars will not render, including custom tabbars
  5. Local storage is not shared with applets normal mode

For some interactive components or interfaces, when clicked and called, the toast prompt “Please go to the applet to use the complete service” will be played. To achieve good user experience, pay attention to the interface capability for single-page mode. Do not use disabled interfaces or components in large numbers. List of disabled capabilities:

classification The function point
component button open-type 、 camera 、 editor 、 form 、 functional-page-navigator 、 live-pusher 、 navigator 、 navigation-bar 、 official-account 、 open-data 、 web-view
routing wx.redirectTo 、 wx.reLaunch 、 wx.navigateTo 、 wx.switchTab 、 wx.navigateBack
interface The navigation bar 、 Tab Bar
network mDNS 、 UDP communication
Data cache Periodic renewal
The media VoIP 、 wx.chooseMedia 、 wx.chooseImage 、 wx.saveImageToPhotosAlbum 、 wx.chooseVideo 、 wx.saveVideoToPhotosAlbum 、 wx.getVideoInfo 、 wx.compressVideo
location wx.openLocation 、 wx.chooseLocation 、 wx.startLocationUpdateBackground 、 wx.startLocationUpdate
forwarding wx.getShareInfo 、 wx.showShareMenu 、 wx.hideShareMenu 、 wx.updateShareMenu
file wx.openDocument
Open interface The login 、 Applet jump 、 The user information 、 pay 、 authorization 、 Set up the 、 Shipping address 、 Card voucher 、 invoice 、 Biometric authentication 、 WeChat movement 、 WeChat Lucky Money
equipment bluetooth 、 iBeacon 、 Wi-Fi 、 NFC 、 The contact 、 The clipboard 、 The phone 、 scan the code
advertising ad 、 wx.createRewardedVideoAd 、 wx.createInterstitialAd

Matters needing attention

  1. When the wechat client of the earlier version is opened, an upgrade prompt page will be displayed
  2. Sharing initiated directly within the applet page is not supported
  3. You cannot customize the page path when you customize shared content
  4. Pages with web-view components cannot be shared
  5. You can open the development version and experience version. If you have no permission, the page will prompt you that you have no permission

onShareAppMessage(Object object)

Monitor the behavior of users clicking the forward button in the page (button component open-type=”share”) or the “forward” button in the menu in the upper right corner, and customize the forwarding content.

Note: Only if this event handler is defined will the forward button appear in the upper-right menu

Parameter Object Object:

parameter type instructions Minimum version
from String Source of forwarding events.button: Forwarding button within the page;menu: Forward menu in the upper right corner 1.
target Object iffromThe value isbutton,targetThis forwarding event was triggeredbutton, or forundefined 1.
webViewUrl String The page containsweb-viewComponent returns the currentweb-viewThe url of the 1.6.4

This event handler needs to return an Object, which is used to customize the forward content.

field instructions The default value Minimum version
title Forward the title Name of the current applets
path Forwarding path The current page path must be the full path starting with /
imageUrl Custom image path, can be a local file path, code package file path or network image path. PNG and JPG are supported. The display image has a 5:4 aspect ratio. Using default Screenshots 1.5.0
promise If this parameter exists, the result of resolve prevails. If resolve is not found within three seconds, the share uses the default parameter passed above 2.12.0

Sample code:

Page({
  onShareAppMessage() {
    const promise = new Promise(resolve= > {
      setTimeout(() = > {
        resolve({
          title: 'Custom Forwarding title'})},2000)})return {
      title: 'Custom Forwarding title'.path: '/page/user? id=123',
      promise 
    }
  }
})
Copy the code

onShareTimeline()

This interface is the Beta version and is only supported on the Android platform. For details, see “Share to Moments” (Beta) to monitor the behavior of the “Share to Moments” button in the upper right corner of the menu and customize the shared content.

Note: The “Share to Moments” button is displayed in the upper-right menu only if this event handler is defined

User-defined forwarding content

The event handler returns an Object that can be used to customize the shared content. No custom page path is supported.

field instructions The default value Minimum version
title Custom title, that is, the title displayed on the moments list page Name of the current applets
query Customize the parameters carried in the page path, such as path? A = 1 & b = 2 “?” The back part Parameters carried by the current page path
imageUrl Custom image path, can be a local file or network image. Support PNG and JPG, display picture aspect ratio is 1:1. The applet Logo is used by default

Page event handlers

onResize(Object object)

Triggered when the applet screen rotates. See response display area variation for details

onTabItemTap(Object object)

Triggered when TAB is clicked

Object Parameter Description:

parameter type instructions Minimum version
index String The sequence number of the tabItem to be clicked, starting from 0 1.9.0
pagePath String The page path of the tabItem being clicked 1.9.0
text String Button text that is clicked on tabItem 1.9.0

Sample code:

Page({
  onTabItemTap(item) {
    console.log(item.index)
    console.log(item.pagePath)
    console.log(item.text)
  }
})
Copy the code

onSaveExitState()

The page callback, onSaveExitState, is called whenever the applet is likely to be destroyed, and the exit state can be saved.

onAddToFavorites(Object object)

This interface is the Beta version, android version 7.0.15 support, only supported on Android platform

Monitor the behavior of users clicking the menu “favorites” button in the upper right corner, and customize the collection content. Parameter Object Object:

parameter type instructions
webViewUrl String The page containsweb-viewComponent returns the currentweb-viewThe url of the

This event handler needs to return an Object for customizing favorites:

field instructions The default value
title Custom title Page title or account name
imageUrl Custom picture, display picture aspect ratio is 1:1 Page screenshots
query Customize the Query field Query for the current page

The sample code

Page({
  onAddToFavorites(res) {
    // WebView page returns webViewUrl
    console.log('webViewUrl: ', res.webViewUrl)
    return {
      title: 'Custom title'.imageUrl: 'http://demo.png'.query: 'name=xxx&age=xxx',}}})Copy the code

onPageScroll(Object object)

Listen for user slide page events.

Parameter Object Object:

attribute type instructions
scrollTop Number How far the page has been scrolled vertically (px)

Note: Define this method in the page only when needed; do not define an empty method. To reduce the impact of unnecessary event dispatch on the renderer-logic layer communication. Note: Avoid frequent setData operations in onPageScroll that cause logical layer-render communication. In particular, a large amount of data is transmitted each time, which will affect the communication time

onPullDownRefresh()

Listen for user drop-down refresh events.

  • Need to be inapp.jsonthewindowIn the options orConfiguration pageIn the openenablePullDownRefresh.
  • You can use the wx.startPullDownRefresh command to trigger the pulldownRefresh animation. The effect is the same as that of manual pulldownrefresh.
  • Wx. stopPullDownRefresh stops the pull-down refresh of the current page after the data refresh is processed.

onReachBottom()

Listen for user pull-up events.