uniapp Sample code for implementing global sharing of WeChat mini-programs

uniapp implements the WeChat applet’s global forwarding to friends/sharing to Moments function. Mainly uses the global mixin concept of Vue.js.

Below are the implementation steps and codes:

Create a global shared content file

1. Create a globally shared js file. The sample file path is: @/common/share.js , in which the global shared content is defined:

export default {
	data() {
		return {
			//Default global sharing content share: {
				title: 'Globally shared title',
				path: '/pages/home/home', // global sharing path imageUrl: '../../static/imgs/fenxiang-img.png', // global sharing image (can be local or network)
			}
		}
	},
	// Define global sharing // 1. Send to friends onShareAppMessage(res) {
        return {
			title: this.share.title,
			path: this.share.path,
			imageUrl: this.share.imageUrl,
		}
    },
	//2. Share to Moments onShareTimeline(res) {
        return {
			title: this.share.title,
			path: this.share.path,
			imageUrl: this.share.imageUrl,
		}
    },
}

Import and globally register the file

2. Import the share.js file into the main.js file of the project and use the Vue.mixin() method to mix it in globally :

// Import and mount the global sharing method import share from '@/common/share.js'
Vue.mixin(share)

Let’s take a look at the global sharing effect:

Customize page sharing content

3. If you need to customize the shared content on a specific page , you can still use the onShareAppMessage() and onShareTimeline() methods of the page to customize the shared content. The global sharing will be overwritten by the shared content defined on the page . Here is an example:

    onLoad() {},
 
    // Customize forwarding this page to friends (there is already a global sharing method, which will be overwritten here)
	onShareAppMessage(res) {
	    return {
	      title: 'Title of the page shared',
	      path: '/pages/my/my',
		  imageUrl: '../../static/imgs/mylogo.png'
	    }
	  },
	  // Share a custom page to Moments onShareTimeline(res) {
		return {
			title: 'Title of the page shared',
			path: '/pages/my/my',
			imageUrl: '../../static/imgs/mylogo.png'
		}
	},

Note: onShareAppMessage() and onShareTimeline() methods are at the same level as onLoad , methods , etc.

This concludes this article about the sample code for uniapp’s global sharing of WeChat mini-programs. For more relevant uniapp mini-program global sharing content, please search 123WORDPRESS.COM’s previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!