uniapp WeChat applet global sharing and custom page sharing

uniapp  realizes the function of global forwarding to friends/sharing to Moments of WeChat applets. Mainly uses   the concept of global mixin of Vue.js.

1. Create a mixins folder in the project root directory, and then create a globally shared js file. mixins/share.js 

export default {
	data() {
		return {
			share: {
				title: '页面分享的标题',
				path: '/pages/index/index',
				imageUrl: '/static/imgs/share_img.png' // 全局分享的图片(可本地可网络)
			}
		}
	},
	onLoad() {

	},
	onShareAppMessage(res) { //发送给朋友
		return this.share
	},
	onShareTimeline(res) { //分享到朋友圈
		return this.share
	}

}

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

// 导入并挂载全局的分享方法
import share from '@/mixins/share.js'
Vue.mixin(share)

3. Custom page sharing,

(1) Method 1: Use the onShareAppMessage()  and  onShareTimeline()  methods to customize the shared content, and the global shared content will be overwritten by the shared content defined on the page . Suitable for binding to the share button.

export default {
    onLoad() {

	},

    onShow() {

	},
 
    // 自定义此页面的转发给好友(已经有全局的分享方法，此处会覆盖全局)
	onShareAppMessage(res) {
	    return {
	      title: '页面分享的标题',
	      path: '/pages/home/home',
		  imageUrl: '/static/imgs/share.png'
	    }
	},


	// 自定义页面的分享到朋友圈
	onShareTimeline(res) {
		return {
			title: '页面分享的标题',
			path: '/pages/home/home',
			imageUrl: '/static/imgs/share.png'
		}
	}
}

(2) Method 2: Directly modify the share data of the page data to cover the global share

export default {
    data() {
		return {
            share: {
				title: '自定义分享标题',
				path: '/activity/index/index',
				imageUrl: '/static/imgs/share_img.png'
			},
         }
    
    }    
}