微信小程序 分享的两种方式:菜单级和按钮级

按钮级

在使用微信小程序的时候,我们可能会设计到一些视频的一些分享等,那么视频分享也分为两种方式,例如下图,当我们点击的时候,进行一个转发分享的一个操作

那么在原先代码的基础上,我们需要在原先代码的基础上button按钮上设置open-type="share"

复制代码
<button open-type="share" class="item btn">
    <text class="iconfont icon-gengduo"></text>
</button>

添加完open-type="share"后会触发一个onShareAppMessage事件,我们可以根据这个事件来对视频转发进行一个操作。

但是如果没有写这个事件的话,虽然可以弹出分享的框,但是并不会对此进行任何的一个操作。

写这个事件,当我点击发送的时候

复制代码
onShareAppMessage(e){
    console.log(e)
}

打印出来的就是

菜单级

并且当我们点击微信小程序上方的三个按钮的时候,如果没有写onShareAppMessage事件的话,那么分享按钮是点击不了的,当我们写这个事件的时候,那么分享按钮就可以使用了。

那么当我点击菜单级按钮的时候,打印出来的就是

这时我们就可以时候这个事件来判断当前按钮是否是菜单级还是按钮级

复制代码
onShareAppMessage(e){
    if(e.from === "button") {
        return {
            title:"我是按钮转发的", //弹出框提示标题
            page:"/pages/video/video",  //弹出框转发的页面
            imageUrl:"/static/images/nvsheng.jpg",   //设置弹出框显示页面图片(可自定义)
        };    
    } else {
        return {
            title:"我是右上角转发的",
            page:"/pages/video/video",
        };
    }
},
相关推荐
流***陌2 小时前
扭蛋机 Roll 福利房小程序前端功能设计:融合趣味互动与福利适配
前端·小程序
亮子AI6 小时前
【小程序】微信小程序点击效果(view、button、navigator)
微信小程序·小程序
Q_Q5110082856 小时前
python+uniapp基于微信小程序团购系统
spring boot·python·微信小程序·django·uni-app·node.js·php
future_studio6 小时前
聊聊 Unity(小白专享、C# 小程序 之 加密存储)
开发语言·小程序·c#
炒毛豆6 小时前
uniapp微信小程序+vue3基础内容介绍~(含标签、组件生命周期、页面生命周期、条件编译(一码多用)、分包))
vue.js·微信小程序·uni-app
從南走到北7 小时前
洗车小程序系统
微信小程序·小程序
namehu8 小时前
前端性能优化之:图片缩放 🚀
前端·性能优化·微信小程序
dazhong20128 小时前
微信小程序开发实战指南(三)-- Webview访问总结
微信小程序·小程序
计算机毕业设计小帅9 小时前
【2026计算机毕业设计】基于Springboot的校园失物招领小程序
spring boot·小程序·课程设计
盛夏绽放11 小时前
关于 uni-app 与原生微信小程序中的生命周期 —— 一次“生命旅程”的解读
微信小程序·小程序·uni-app