h5调起原生分享面板，展示更多功能方案-阿里云开发者社区

h5调起原生分享面板，展示更多功能方案

2023-05-19 186

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： h5调起原生分享面板，展示更多功能方案

WebView右上角三个点按钮，点击之后会弹出分享面板，最底部展示的是h5自定义的功能，目前有两种方案展示自定义功能。方案如下：

方案1:

h5调用原生API

使用框架：WebViewJavascriptBridge

方法名：more

传入参数为数组对象：

{
 dataArray:(
{icon:"图标",title:"名称",url:"链接"},
{icon:"图标",title:"名称",url:"链接"},
{icon:"图标",title:"名称",url:"链接"}
)
} 
//数组元素个数不超过三个

h5使用WebViewJavascriptBridge调用原生API的方法可以参考这篇文章：https://www.jianshu.com/p/bfd062af37c9

方案2:

h5通过在url后面加参数的方式给app传递数据

请按照如下步骤操作：

1.把下面json字符串里面的title、icon和url的数据改为需要传递功能的名称、图标和链接

[
    {
        "title": "服务评价",
        "icon": "https://portal-minio.nwpu.edu.cn/evaluation-center/625d0f63e4b0960b62f48fe9.png",
        "url": "https://www.baidu.com"
    },
    {
        "title": "咨询反馈",
        "icon": "https://portal-minio.nwpu.edu.cn/evaluation-center/625d0f67e4b0960b62f48feb.png",
        "url": "https://www.baidu.com"
    },
    {
        "title": "小希问答",
        "icon": "https://portal-minio.nwpu.edu.cn/evaluation-center/625d0f5ee4b0960b62f48fe7.png",
        "url": "https://www.baidu.com"
    }
]