Implementation of global parameter sharing for Alipay applet

Posted by rob323 on Sat, 04 Apr 2020 10:51:53 +0200

Foreword:

For the matters of wechat applet global sharing control, please refer to: Wechat applet global sharing and forwarding control implementation - no need to configure the page separately from now on.

About the official sharing of Alipay applet's official sharing, see official documents. Page event handler onShareAppMessage(options: Object).

In Alipay applet, forwarding and sharing have the following characteristics:

  • By default, the page does not need to be configured with the event function of sharing and forwarding like the wechat applet;
  • Page sharing forwarding has no default parameters. This has been confirmed with Alipay applet technical support. If you need to bring parameters, you must configure the page.

As a result, the global sharing of Alipay applets can not bring parameters, so in accordance with the usual practice, even if the global sharing can be configured, but the page has parameters, it still needs to be individually configured by the page.

How to solve the problem of global sharing without parameters?

Encoding in front of app.js implements the global sharing of WeChat applets, but this method is not feasible in Alipay applet, and there is no object or function in implicit path in Alipay applet.

After some exploration and verification, it was found that page parameters could not be obtained in app.js. What we can do now is to use cache.

Solution:

Encapsulates a public function that gets the path and parameters of the current page and then calls it in the onLoad of the page that needs to be parameterized.

Example code:

//Save the current page path and parameters to the cache (after login failure and automatic login relaunch())
my.getCurrentPageUrlWithArgs = function (options) {
  const pages = getCurrentPages()//Small program API,Can be called directly
  const currentPage = pages[pages.length - 1]
  const url = currentPage.route
  let urlWithArgs = `/${url}?`
  for (let key in options) {
    const value = options[key]
    urlWithArgs += `${key}=${value}&`
  }
  urlWithArgs = urlWithArgs.substring(0, urlWithArgs.length - 1)
  my.setStorage0("currentPageUrl", urlWithArgs)
}

As mentioned above, you can directly put it in app.js, or write a JS file to save, and then import app.js.

Call in page:

1   onLoad(e) {
2     my.getCurrentPageUrlWithArgs(e)
3   },

As mentioned above, if a page with parameters (including those with parameters) needs to be shared and can be opened with parameters, this function will be called to save the page path and parameters to the cache when the page is loaded.

Global sharing transformation in app.js:

 1   onShareAppMessage(a, b) {
 2     //Get current page route
 3     let pages = getCurrentPages(),
 4       page = pages[pages.length - 1],
 5       //Current page routing
 6       route = page.__proto__.route,
 7       //Page links with parameters saved in cache
 8       currentPageUrl = my.getStorageSync0("currentPageUrl"),
 9       //Forwarding paths, such as page routes, include pages saved in the cache url In the cache, the url Is the sharing path, otherwise it is empty (the current page is shared by default path,Without parameters)
10       shareUrl = (currentPageUrl && currentPageUrl.indexOf(route) > 0) ? currentPageUrl : '';
11     return {
12       title: 'Global custom sharing',
13       desc: 'app.js Middle configuration',
14       bgImgUrl: my.getStorageSync0("shareUrl"),
15       path: shareUrl
16     }
17   }

As mentioned above, the global sharing control is realized. This is a relatively simple global configuration. If necessary, different pages can be configured according to the route.

Global customized sharing configuration and control with parameters:

For example, two pages A and B with parameters need to be respectively configured with corresponding sharing display content. Two pages C and D need to go to page default sharing, and other pages to go to global sharing configuration. The relevant codes are as follows:

 1   onShareAppMessage(a, b) {
 2     //Get current page route
 3     let pages = getCurrentPages(),
 4       route = pages[pages.length - 1].__proto__.route;
 5 
 6     //Get the page link with parameters saved in the cache. If not, it is empty
 7     let currentPageUrl = my.getStorageSync0("currentPageUrl"),
 8       //Forwarding paths, such as page routes, include pages saved in the cache url In the cache, the url Is the sharing path, otherwise it is empty (the current page is shared by default path,Without parameters)
 9       shareUrl = (currentPageUrl && currentPageUrl.indexOf(route) > 0) ? currentPageUrl : '';
10 
11     //Share configuration content initialization
12     let shareInfo = {
13       title: "",
14       desc: "",
15       bgImgUrl: "",
16       path: shareUrl
17     }
18 
19     //Example of sharing configuration for different pages: A/B Make a custom sharing configuration, C/D Share by default on each page, and share globally on other pages
20     let specialShare = ["pageC/index", "pageD/index"]
21     if (route == "pageA/index") {
22       shareInfo.title = "A Page custom sharing"
23       //A Other configurations of page sharing......
24     } else if (route == "pageB/index") {
25       shareInfo.title = "B Page custom sharing"
26       //B Other configurations of page sharing......
27     } else if (specialShare.includes(route)) {
28       //Pages that need to be shared by default      
29     } else {
30       //Other use global custom sharing
31       shareInfo.title = "Global custom configuration"
32       shareInfo.desc = 'app.js Middle configuration'
33       shareInfo.bgImgUrl = my.getStorageSync0("shareUrl");
34     }
35 
36     return shareInfo
37   }

Although there is a lot of code, but considering the situation of all pages, you can adjust it according to your actual needs.

matters needing attention:

getStorageSync0(key) in the above code is the encapsulation of the native API of the applet (it is too difficult to use what is provided by the official website);

Using the above global sharing configuration scheme, the function of sharing events can no longer be configured in the page, or the global sharing will be overwritten.

Topics: encoding