background

Recently small program support to share the news to the circle of friends can be said to be a small program development circle of a bombshell, around the small program team also received the wechat invitation for the first time after the survey, and around the small program quickly carried out the ability to support, this article will be a comprehensive interpretation of the wechat ability.

An overview of the

This capability is actually divided into two modules:

1, small program to share the ability to circle of friends

2. Ability to open small programs in moments of friends

Share to moments style

Open styles in moments

The development of

We also divide it into two modules:

1, small program to share the ability to circle of friends

The ability to display the Share to Moments button in the miniprogram interface currently requires the following:

1. Android platform:

It requires wechat version 7.0.16 or above and basic library 2.11.13 or above. In the test, the author found that this ability is also related to the model. Currently, it is found that none of OPPO models has the ability to share the “moments” button, while all Xiaomi models have this ability.

2. The IOS platform:

This ability is not currently supported, but the advanced version of wechat supports the ability to open small programs in moments (described below).

The share to Moments button is disabled by default on the applet page unless it is actively set in the code:

1. The page needs to be set to allow “send to friends”, code example:

onShareAppMessage() {
    return {
      title: 'Buy and sell second-hand, save money and make money! Turn around, a website to help you make money! ',
      path: '/pages/index/index',
      imageUrl:'https://pic5.zhuanstatic.com/zhuanzh/n_v2be00a9c4aa4941bf8567f5fd999e2709.png',}}Copy the code

2. The page needs to be set to allow “sharing to moments”, code example:

onShareTimeline() {
  return {
    title: '[small program] buying and selling second-hand, save money and make money! Turn around, a website to help you make money! ',
    query: 'zzfrom=pyq'}}Copy the code

3. Open the “Share to Moments” button in the Share menu:

wx.showShareMenu({
      withShareTicket: true,
      menus: ['shareAppMessage'.'shareTimeline']})Copy the code

Wechat does not mention this requirement in the document, but it is found in actual measurement that this method must be invoked to appear the share to Moments button

Where: 1. The latest version of wechat developer tools to support this ability of simulation debugging 2. Pages with web-view components cannot be shared. 3. OnShareTimeline is a page life cycle added from base library 2.11.3, and its behavior is similar to that of onShareAppMessage. 4. The life cycle must return Object to customize the shared content, where:

  • Title: Share the title, default to the applet name
  • Query: Parameters carried on shared pages, used to identify the source of channels, etc
  • ImageUrl: Share images using the applet logo by default

5. Special emphasis: Sharing to moments does not support the path parameter, that is, the user on the page to initiate sharing, sharing out the page is the same.

Finally, developers are required to adapt the shared page, because when users open the page shared to moments, they will enter a “single page mode”, and many SDKS cannot be used in this mode.

2. Ability to open small programs in moments of friends

Users share little program page opens in the circle of friends, doesn’t really open the small program, but to a originally page page “single model” page, mentioned above, users share the original page and circle of friends to open the page “single model” page, actually for developers is the same page, in order to distinguish, WeChat presented two new scene value:

1154: Friends open miniprogram, i.e. in “single page mode”, developers can adapt according to this scene value, in theory, other than the scene value, are normal mode.

1155: Enter normal mode from “single-page mode”. Since this behavior is a unified behavior of wechat, the developer cannot mark it. If you want to make statistics of this behavior, you can use this scene value.

What does “one-page mode” need to fit?

Wechat official has the following explanation for “single-page mode” :

1. In Single-page mode, a navigation bar is fixed at the top of the page, and the title is displayed as the share title. 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.

Refer to the following figure for style

The styles are not customizable.

The user can only enter the normal mode through the “Go to small program” button below.

If a small program uses a custom navigation head, it needs to be adapted to some extent. For example, our small program uses a custom background at the top. Before adaptation, it looks like this:

Because the top title bar wechat has a fixed style, we added a gray background in the head to block it.

2. “Single-page mode” runs the content of the mini-program page by default, but the top navigation bar and the bottom operation bar are fixed on the page, which may affect the layout of the mini-program 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.

Added configuration items for single page mode in app.json:

"singlePage" : {
  "navigationBarFit" : "" //floatOr squeezed}Copy the code

This configuration sets the behavior of the default title bar at the top, where:

Default value:

  • If the page uses custom navigation mode, this item defaults to :float. This means that the navigation bar floats on the page and does not affect the original page layout (but may block some elements of the original page).
  • If not, the default value is: squeezed, which means that the page is squeezed by the navigation bar and does not intersect with the page, that is, a fixed space should be set aside at the top of the page for the navigation bar of wechat, so that the original page will move down

Of course, these two values can be set differently depending on the needs of the page.

One more thing to note:

In single-page mode, the safeArea returned by wx.getSystemInfo is the entire screen space, for example:

On the iPhone6, the screen measures 375×667

  • In single-page mode, the height of safeArea is 667
  • In normal mode, the height of safeArea is 647

If pages that depend on the safeArea layout need to be adapted.

3. In Single-page mode, some components or interfaces have limitations

This is the most troublesome aspect of single-page mode adaptation. Let’s first look at which components and interfaces are not available

(Skip to the summary below.)

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 Navigation Bar, Tab Bar
network MDNS and UDP communication
interface Navigation Bar, Tab Bar
Data cache Periodic renewal
The media VoIP, wx. ChooseMedia, wx. ChooseImage, wx. SaveImageToPhotosAlbum, wx. ChooseVideo, wx saveVideoToPhotosAlbum, Wx. PressVideo getVideoInfo, wx.com
location Wx openLocation, wx. ChooseLocation, wx. StartLocationUpdateBackground, wx. StartLocationUpdate
forwarding Wx. getShareInfo, wx.showShareMenu, wx.hideShareMenu, wx.updateShareMenu
file wx.openDocument
Open interface Login, mini-program jump, user information, payment, authorization, Settings, delivery address, card coupon, invoice, biometric authentication, wechat campaign, wechat red envelope
equipment Bluetooth, iBeacon, Wi-Fi, NFC, Contacts, Clipboard, phone, scan
advertising AD, wx.createRewardedVideoAd, wx.createInterstitialAd

There are a lot of capabilities that can be disabled in single-page mode, which can be interpreted as: only content is allowed in single-page mode, and no interaction or manipulation is allowed

Among them, the most influential ones are:

  • The login

Calling wx.login in single-page mode will not work, which means our page will need to support non-login presentation (even silent login).

In this regard, the small program in the transformation is relatively simple:

if(this.scene == 1154) {
  this.$httpWithLogin = this.$http
}
Copy the code

That is, in single-page mode, all interface request methods are rewritten to request mode without login state.

Different applet pages need to be tailored to this limitation.

  • jump

In single-page mode, there is no support for any page-hopping methods, that is, the user cannot leave the current page without clicking the “Go to applet” button to return to normal mode.

  • other

WeChat provides this ability is hoping to show more content in circle of friends, and don’t want the user to enter the small program directly, but a single page mode too many restrictions, not one by one, the author’s suggestion is that hinder the normal page display problems and obstacles of core page flow problems can, when using does not support ability, WeChat will be as follows:

  1. If the user clicks, wechat will unify the toast: ‘Please go to the small program to use the complete service’.

  2. If there is no click behavior, the method enters the call failure logic:

  • Note:
  1. In single-page mode, various interactions, such as tabs and slides, are still supported without leaving the page
  2. In single-page mode, only the “Go to Applet” button at the bottom can access the normal applet
  3. In single page mode, support can be shared to friends again, and also sent to friends (through the mini program card, open to enter the normal mini program).
  4. Cloud development resources can be used in single-page mode only after they are enabled.

By default, unauthorized access to cloud development resources is not allowed. You need to manually enable unauthorized access on the Cloud console, Settings, and Global Settings.

And in not login mode, the C terminal access control must use safety rules, namely, cloud function, database and file storage access must be through the safety rules, so the console Settings in addition to outside open allows not login access blob, must also be in the cloud function, database and file storage respectively permissions Settings, select the safety rules and configuration. When an unlogged user accesses the security rule, the auth field is empty, which indicates that the request is from an unlogged user.

  1. Landscape is not allowed
  2. If the page contains tabbars, tabbars will not render, including custom tabbars
  3. Local storage is not shared with applets normal mode, which determines that the only way to communicate between single-page mode and normal mode is the 1155 scenario value

Compatibility with lower versions

Share to Moments button: The lower version of wechat does not currently appear this button

Opening miniprogram of wechat moments: It is stated in the wechat document that an upgrade prompt page will be displayed when opening wechat moments of earlier versions. However, this is a process of gradual coverage of the basic library. According to press release, it is found that iOS wechat 7.0.14 can display the single-page mode normally.

Q&A

1, according to the document Settings, but there is no share to moments button

Possible solutions include:

  • Call the wx.showShareMenu method to open the menu
  • Replace debugging equipment

2. The single-page mode cannot be opened normally

First, it is recommended to use real machine debugging to debug the single-page mode

Second, check whether any critical processes are blocked by the limited SDK capabilities

Finally check the page error

ShareImageMessage error

Wx. shareImageMessage: wx.shareImageMessage: wx.shareImageMessage: wx.shareImageMessage

Page code or third-party frameworks/plug-ins contain operations on wX copy, such as:

Object.assign({},wx)
Copy the code

We need to find this type of code and make it compatible, as shown in the following example:

// First set the error method to non-enumerablefor (let key in wx) {
    try {
      if(wx[key]) {}
    }catch(e) {
      Object.defineProperty(wx,key,{
        enumerable:false
      });
    }
}
Object.assign({},wx)
Copy the code

The above is about the small program to share to the circle of friends this ability to develop the experience and interpretation, hope to help you readers friends.

The author views

Finally, I would like to talk about this ability.

WeChat provides this ability, can solve the small program from the problem of poor effect of reflux, circle of friends before the small program to share to friends, almost the only way is to generate a qr code and share out images, but with the authors experience, this way backflow effect is worse and worse, the great ability to limit the spread of small programs in the circle of friends, WeChat want to solve this problem, But very restrained, WeChat users from friends don’t want to go into the small program, but rather to provide single page mode, to expect to give users more the content of the show, through content to attract users to enter the small program, although there are some gap, and we look forward to but the ability to do the small program in the circle of friends will be of great role in promoting the spread of, We believe that more and more applets will support this capability.

Author’s brief introduction

What zhang yong

Around the platform operations center front head, with deep research in the area of the front end, including: the sketch a key figure, front-end data modeling, multiple aspects such as the small program foundation ability construction, 10 years working experience in engineer for 2 years and 5 years CEO, technology management, 3 years to write the article, is the nuggets 2018 outstanding authors.