In practical use, small procedures are often needed to share with friends or circle of friends, generally speaking, a page to set.

Website sharing is introduced: uniapp. Dcloud. IO/API/plugins…

Project address: gitee.com/jielov/uni-…

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

Export default {// Send onShareAppMessage(res) {if (res.from === 'button') {// From the page share button console.log(res.target)} Return {title: 'Custom share title ', path: '/pages/test/test? Id =123'}}, // Share to friends onShareTimeline(res) {return {title: Path: '/pages/test/test? Id =123'}Copy the code

Do not repeat the code, but also particularly easy to confuse, accidentally forget to modify parameters.

Share parameter configuration:

Global share

Reduce code duplication per page and share code globally.

Create wxshare.js in utils folder

Import the wxshare.js file in mian

Import share from './utils/ wxshare.js' vue.mixin (share)Copy the code

A brief introduction wxShare. Js

Create a page based js, including data, onShareAppMessage, onShareTimeline three

**data:** Share parameter Settings: refer to the initial configuration diagram

**onShareAppMessage: ** Share to wechat friends configuration

**onShareTimeline: ** Share to moments configuration

Export default {data() {return {share: {// Forwarding title (default title) title: 'default title -- share title ', // Default is the current page, must start with a'/' full path path: ", // custom image path, can be a local file path, code package file path or network image path, // support PNG and JPG, if not passed in imageUrl use the default screenshot. ImageUrl: ''}}}, // Send to friend onShareAppMessage(res) {return {title: 'send to friend ', path: OnShareTimeline (res) {return {title: 'share to friends ', path: '/pages/test/test'}}}Copy the code

By the time the most basic global sharing has been completed, careful friends may find that the parameters in data are not used, and each shared parameter is fixed, can not be configured dynamically, and the ideal global sharing is very different

GetCurrentPages () function

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

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

Website: uniapp. Dcloud. IO/collocation…

Optimize onShareAppMessage for sharing with friends

OnShareAppMessage (res) {let pages = getCurrentPages(), view = pages[pages.length-1];  This.share. path = '/${view.route}'; // return this.share; },Copy the code

Dynamically get the page path and share it out.

One obvious problem is that there is no way to get the title of the applet directly.

Set the page sharing title

Find a curvy way to save the country and dynamically set the title on every page that needs to be shared

Export default {onLoad() {/* Design the current page to share title this.share to get the share data defined in wxshare.js */ this.share.title = "Current page share title"},}Copy the code
Results show

Button shared with friends

The code is the same as above, except that there is a separate area for configuration parameters.

OnShareAppMessage (res) {if (res.from == 'button') {console.log(" button forwarding -- config "); } let pages = getCurrentPages(), view = pages[pages.length-1]; This.share. path = '/${view.route}'; // return this.share; }Copy the code

Optimize onShareTimeline for sharing to moments

The configuration is basically the same as sharing with friends

Let pages = getCurrentPages(), view = pages[pages.length-1]; // console.log(" Get loaded pages ", pages); //console.log(" current page object ", view); this.share.path = `/${view.route}`; // return this.share; }Copy the code

The basic configuration of global sharing is described above.

Sharing dynamic changes to the page path is no problem, there is still a problem with the configuration of dynamic sharing path and parameters.

WxShare. Js code

Copyexport default {data() {return {share: {// Forwarding title (default title) title: 'default title -- share title ', // default is the current page, must start with a'/' full path: ", // custom image path, can be a local file path, code package file path or network image path, // support PNG and JPG, if not passed in imageUrl use the default screenshot. Display image length ratio is 5:4 imageUrl: OnLoad () {this.share.title = "current page share title"}, If (res.from == 'button') {console.log(" button forwarding -- config "); } let pages = getCurrentPages(), view = pages[pages.length-1]; this.share.path = `/${view.route}`; // return this.share; }, // Share to friends onSharePages (res) {// Get loaded page let pages = getCurrentPages(), View = pages[pages.length-1]; // console.log(" Get loaded pages ", pages); Console. log(" Current page object ", view); this.share.path = `/${view.route}`; // return this.share; }}Copy the code