WeChat Mini Programs are shared globally via uni-app

In actual use, it is often necessary to share the mini program with friends or friends circle, which is generally set up one page at a time.

Official website sharing introduction: https://uniapp.dcloud.io/api/plugins/share?id=onshareappmessage

Each page that needs to be shared needs to be written separately

copyexport default {
//Send to friends onShareAppMessage(res) {
    if (res.from === 'button') {// From the share button in the page console.log(res.target)
    }
    return {
      title: 'Customize sharing title',
      path: '/pages/test/test?id=123'
    }
  },
  //Share to Moments onShareTimeline(res) {
     return {
      title: 'Customize sharing title',
      path: '/pages/test/test?id=123'
    }
  }
}

Not only is the code repeated, it is also very easy to get confused and accidentally miss a parameter and forget to modify it.

Sharing parameter configuration introduction:

Global sharing

Reduce the duplication of code on each page and set up shared code globally.

First create a utils folder in the new directory and create wxShare.js

After successful creation, import the wxShare.js in main.js

//Share settings
import share from './utils/wxShare.js'
Vue.mixin(share)

Introduction to wxShare.js

Create a basic js page, including data , onShareAppMessage , onShareTimeline .

data : Sharing parameter settings: Please refer to the initial configuration diagram

onShareAppMessage : Share to WeChat friends configuration

onShareTimeline : Sharing to Moments configuration

copyexport default {
    data() {
        return {
            share:
                // Forwarded title (default title)
                title: 'Default title - Share title',
                // The default is the current page, which must be a full path starting with '/' path: '',
                //Custom image path, which can be a local file path, code package file path or network image path,
                //Supports PNG and JPG. If imageUrl is not passed in, the default screenshot will be used. The aspect ratio of the displayed image is 5:4
                imageUrl: ''
            }
        }
    },
    // Send to friends onShareAppMessage(res) {
         return {
          title: 'Send to a friend',
          path: '/pages/test/test'
        }
    },
    //Share to Moments onShareTimeline(res) {
         return {
          title: 'Share to Moments',
          path: '/pages/test/test'
        }
    }
}

Now the most basic global sharing has been completed. Careful friends may find that the parameters in the data are not used, and each shared parameter is fixed and cannot be dynamically configured, which is very different from the ideal global sharing.

getCurrentPages() Function

getCurrentPages() function is used to get an instance of the current page stack, which is given in the form of an array in the order of the stack. The first element is the home page and the last element is the current page.

Note: getCurrentPages() is only used to display the page stack. Do not modify the page stack to avoid page status errors.

Official website introduction: https://uniapp.dcloud.io/collocation/frame/window?id=getcurrentpages

Optimize onShareAppMessage to share with friends

copy//Send to friends onShareAppMessage(res) {
    // Get the loaded page let pages = getCurrentPages(),
        // Get the object of the current page view = pages[pages.length - 1];
    //Shared page path this.share.path = `/${view.route}`;
    //Forwarding parameters return this.share;
},

Dynamically obtain the page path and share it.

There is an obvious problem at present. There is currently no way to directly obtain the title of the mini program.

Set page sharing title

Find a way to save the country by dynamically setting the title of each page that needs to be shared

copyexport default {
    onLoad() {
        /*
            Design the current page sharing title in the life cycle of the page to be shared. this.share is used to obtain the share data defined in wxShare.js*/
       this.share.title = "Current page sharing title"
    },
}

Effect display

buttonShare to friends

A share <button open-type="share"> )

The code is no different than above, except that there is a separate area for configuration parameters.

copy//Send to friends onShareAppMessage(res) {
    // Forwarding from a button within the page if (res.from == 'button') {
        console.log("Button forwarding--configuration");
    } 
    // Get the loaded page let pages = getCurrentPages(),
        // Get the object of the current page view = pages[pages.length - 1];
    //Shared page path this.share.path = `/${view.route}`;
    //Forwarding parameters return this.share;
}

Optimize onShareTimeline to share to Moments

The configuration is basically the same as sharing with friends.

copy//Share to Moments onShareTimeline(res) {
    // Get the loaded page let pages = getCurrentPages(),
        // Get the object of the current page view = pages[pages.length - 1];
    // console.log("Get the loaded page", pages);
    //console.log("object of the current page", view);
    this.share.path = `/${view.route}`;
    //Forwarding parameters return this.share;
}

The basic configuration of global sharing is as described above.

There is no problem with sharing the dynamic modification page path, but there is still a problem with the configuration of dynamic sharing path plus parameters.

wxShare.js code

copyexport default {
    data() {
        return {
            share:
                // Forwarded title (default title)
                title: 'Default title - Share title',
                // The default is the current page, which must be a full path starting with '/' path: '',
                //Custom image path, which can be a local file path, code package file path or network image path,
                //Supports PNG and JPG. If imageUrl is not passed in, the default screenshot will be used. The aspect ratio of the displayed image is 5:4
                imageUrl: ''
            }
        }
    },
    /*
     Design the current page sharing title in the life cycle of the page to be shared onLoad() {
         this.share.title = "Current page sharing title"
     },
     */
    // Send to friends onShareAppMessage(res) {
        // Forwarding from a button within the page if (res.from == 'button') {
            console.log("Button forwarding--configuration");
        }
        // Get the loaded page let pages = getCurrentPages(),
            // Get the object of the current page view = pages[pages.length - 1];
        this.share.path = `/${view.route}`;
        
        //Forwarding parameters return this.share;
    },
    //Share to Moments onShareTimeline(res) {
        // Get the loaded page let pages = getCurrentPages(),
            // Get the object of the current page view = pages[pages.length - 1];
        // console.log("Get the loaded page", pages);
        console.log("object of the current page", view);
        this.share.path = `/${view.route}`;
        //Forwarding parameters return this.share;
    }
}
wxShare.js

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in: