The sharing function in the mini program requires adding open-type: "share" to the button component. When the button is clicked, the onShareAppMessage function will be called.
1. Customize buttons to achieve sharing and use buttons on the page to implement sharing functions.
//必须是按钮中添加 open-type="share"
<button open-type="share" class="pic_r3">
<text class="tit">人员自助入场</text>
</button>
2. How to share in js files
//分享---this.shareId就是要传的参数
onShareAppMessage(e) {
let shareobj = {
title: '人员自助入场', //分享的标题
path: '/pages/admission/admission?shareId=' + this.shareId, //好友点击分享之后跳转的页面
//imageUrl: "https://****.com/banner.jpg", //分享的图片 支持PNG及JPG。显示图片长宽比是 5:4。
imageUrl: this.shareImg, //内容图片
}
return shareobj //一定要返回对象
},
ps: The imageUrl used in sharing is a static address, as above, the method is as follows
<script>
export default {
data() {
return {
shareImg: require("@/static/img/pic-ry9.jpg"),
}
}
}
</script>
3. Get shared parameters
Enter the sharing page and view the passed parameters through e in onLoad(e):
onLoad(e) {
this.shareId = e.shareId //这就是我们从分享按钮传过来的参数
},
4. The share button is hidden in the native menu of the mini program
Add the following code to the onLoad method in the js file to turn off the share button in the three dots in the upper left corner
uni.hideShareMenu()
5. Mini Program Sharing Card prohibits secondary forwarding of personal and group chats
In the onShareAppMessage method, add the two methods uni.showShareMenu and wx.updateShareMenu
//分享---this.shareId就是要传的参数
onShareAppMessage(e) {
//禁止二次转发--
uni.showShareMenu({
withShareTicket: true
});
wx.updateShareMenu({
isPrivateMessage: true,
withShareTicket: true,
success(res) {
console.log('updateShareMenu: ', res);
},
fail() {
}
}); //禁止二次转发--end
let shareobj = {
title: '人员自助入场', //分享的标题
path: '/pages/admission/admission?shareId=' + this.shareId, //好友点击分享之后跳转的页面
//imageUrl: "https://****.com/banner.jpg", //分享的图片 支持PNG及JPG。显示图片长宽比是 5:4。
imageUrl: this.shareImg, //内容图片
}
return shareobj //一定要返回对象
},