Uniapp realizes global sharing of wechat applet and custom sharing button style

uniapp Realize the global function of wechat applet Forward to friends / Share with friends The function of . The main use of Vue.js Of The whole thing is in Concept .

Directly up below Implementation steps and code ：

Create a global shared content file

1. Create a globally shared js file . The sample file path is ：@/common/share.js , Define global shared content in this file ：

export default {
	data() {
		return {
			//  Default global shared content 
			share: {
				title: ' Title of global sharing ',
				path: '/pages/home/home',    //  Global shared path , such as   home page 
				imageUrl: '/static/imgs/fenxiang-img.png',    //  Globally shared pictures ( Can be local or network )
			}
		}
	},
	//  Define global sharing 
	// 1. Send it to a friend 
    onShareAppMessage(res) {
        return {
			title: this.share.title,
			path: this.share.path,
			imageUrl: this.share.imageUrl,
		}
    },
	//2. Share with friends 
    onShareTimeline(res) {
        return {
			title: this.share.title,
			path: this.share.path,
			imageUrl: this.share.imageUrl,
		}
    },
}

Import and register the file globally

2. stay Project main.js The document introduces the share.js File and use Vue.mixin() Method to globally mix it into ：

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

Let's take a look at the overall sharing effect ：

Custom page sharing content

3. If in a particular The page needs to customize the shared content , You can still use the... Of the page onShareAppMessage() and onShareTimeline() Method to customize the shared content , The global sharing will be overwritten by the sharing content defined on the page . Examples are as follows ：

    onLoad() {},

    //  Customize the forwarding of this page to friends ( There are already global sharing methods , The global... Will be overwritten here )
	onShareAppMessage(res) {
	    return {
	      title: ' Title of page sharing ',
	      path: '/pages/my/my',
		  imageUrl: '/static/imgs/mylogo.png'
	    }
	  },
	  //  Share the custom page to the circle of friends 
	onShareTimeline(res) {
		return {
			title: ' Title of page sharing ',
			path: '/pages/my/my',
			imageUrl: '/static/imgs/mylogo.png'
		}
	},

notes ：onShareAppMessage() and onShareTimeline() The way is and onLoad ,methods Equivalent method Of .

Realize the effect of custom sharing button style

Effect display ：

analysis ： The above two styles are common wechat applet sharing button custom styles , However, in reality, we are not right Button for such a custom style , But to make such a style On or directly a image picture , But to realize that clicking it triggers sharing , We just need to cover it with Button , Of course, this button is used to trigger our sharing function , And we just need to make it completely transparent , Such a combination , Our effect is like realizing the customization of the sharing button . The sample code is as follows ：

1.HTML The code is as follows

<!--  One click sharing  -->
<view class="share">
    <u-image src="/static/imgs/yjfx.png" width="110" height="110"></u-image>
    <u-button id="shareBtn" open-type="share" ></u-button>
</view>

2.CSS The code is as follows （ What we use here is SCSS Writing ）

    .share {
			width: 110rpx;
			height: 110rpx;
			border-radius: 50%;
			position: absolute;
			top: 50%;
			right: 29rpx;
			#shareBtn {
				width: 100%;
				height: 100%;
				position: absolute;
				top: 0;
				left: 0;
				opacity: 0;
			}
		}

So we can achieve “ Custom share button ” The effect has been achieved. , The core is to put a share button above our custom style area , Let the share button completely cover it and make the share button completely transparent .