平台兼容性

需求背景和适用范围

app开发经常需要底部pop菜单,但往往遇到2类问题:

  1. 前端的pop菜单无法覆盖原生对象,比如video、map,以及web-view等组件
  2. 原生的actionsheet虽然可以覆盖其他原生组件,但样式不太灵活,无法放图标

而app开发经常用的底部分享菜单,往往是底部一排图标按钮。 其实在app下使用plus.nativeObj.view可以做出这样的效果。

本插件意在提供基于plus.nativeObj.view的底部图标菜单解决方案,希望这个轮子可以方便app开发者。 因h5和小程序都不会显示这种分享菜单,比如小程序里分享只有一个选项,不需要菜单,所以本模板仅适用于app开发,需要在真机上运行预览。

另外nvue下除非需要遮挡pages.json里配置的原生tabbar,否则不存在层级问题。

更新:除了本示例使用的plus.nativeObj.view技术,也可以使用弹出一个subnvue页面或者全屏nvue页面但其顶部半透明的方式做分享菜单。如果有复杂的排版需求,nvue的排版灵活度高于plus.nativeObj.view。

使用说明

样例源码index.vue中以注释方式标记了开发者可自定义修改的内容,比如分享的内容。 示例以分享方条链接为例,实际业务中可能要分享为小程序等其他类型的内容,具体参考uni.share的api自行处理业务逻辑。 源码中包含一些todo,是一些进阶需求,暂未处理。有兴趣的朋友自行完善。

本插件其实同时适用于5+App和uni-app的开发者,为了通用,本模板没有封装为vue组件或es6库的方式。大家可根据自己的app类型自行封装(更新:插件市场已经有三方封装好了,可自行搜索“底部图标菜单”)。

更新日志

1.1 【强烈推荐1.0用户升级到1.1版本】

  • 修复 Android下遮罩层无半透明阴影的bug
  • 修复 Android下反复弹出菜单、按back键关闭菜单时无法有效拦截页面返回的bug

1.0

  • 提交第1个版本

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议
栉风

2023-06-28

要调用页面data怎么调用啊 this的指向不对啊,是要使用全局变量吗

121***@qq.com

2022-11-26

小答

2022-01-30

覆盖不了Nvue下的Video组件

DCloud_heavensoft 2022-02-07

iOS还是Android?

小答 2022-02-07

Ios

大图APP

2020-12-12

插件不错 怎么传值进去: 我想在不容内容触发是传当前内容进去 // 如下为分享内容定义,可根据业务需求自行定义 var strShareUrl = "https://uniapp.dcloud.io" var strShareTitle = "跨端神器uni-app,开发一次,App、小程序、H5全覆盖" var strShareSummary = "iOS、Android、H5、微信/支付宝/百度小程序,一套代码全覆盖" var strShareImageUrl = "https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/uni@2x.png"

103***@qq.com

2020-05-20

怎样弄成组件?

DCloud_heavensoft 2020-05-21

https://ext.dcloud.net.cn/search?q=%E5%BA%95%E9%83%A8%E5%9B%BE%E6%A0%87%E8%8F%9C%E5%8D%95

993***@qq.com

2020-04-29

可以设置不要遮罩层吗

叶凌风

2020-03-22

分享没什么问题出现在APP,但是里面的JS部分的分享值可以替换VUE变量吗,毕竟都是直接跳uniapp的,VUE压根没什么经验,所以希望作者给出JS怎么引用VUE下面的变量赋值给分享参数。终于搞明白了,转了我几个小时,因为对VUE不是很深入了解,原来直接在uniapp里直接赋值就可以了,JS原生的变量就是全局变量,所以在JS范围内都可以直接赋值引用。写给大家做个参考,看到我转来转去思考很久的样子其实我也不想大家像我这样走那么多弯路,写给大家知道吧

879***@qq.com

2020-03-15

good

201***@qq.com

2020-01-29

这个要如何弄成组件引用呢

568***@qq.com

2019-12-21

为啥QQ的分享用不了 fail:{"errMsg":"share:fail:type参数无法正确识别,请按规范范围填写,http://ask.dcloud.net.cn/article/282"} at pages\index\index.vue:324

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问