js css html

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

2022-11-22  本文已影响0人  anny_4243

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"
    }
]

2.打开网址http://www.esjson.com/urlEncode.html
把上面的json数据粘贴到如下位置,点击URL编码

3.复制编码结果

4.把编码结果放到url的后面(dataArray为参数名)

https://www.aaa.com?dataArray=编码结果

示例:https://www.aaa.com?dataArray=%5B%0A%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%22title%22%3A%20%22%E6%9C%8D%E5%8A%A1%E8%AF%84%E4%BB%B7%22%2C%0A%20%20%20%20%20%20%20%20%22icon%22%3A%20%22https%3A%2F%2Fportal-minio.nwpu.edu.cn%2Fevaluation-center%2F625d0f63e4b0960b62f48fe9.png%22%2C%0A%20%20%20%20%20%20%20%20%22url%22%3A%20%22https%3A%2F%2Fwww.baidu.com%22%0A%20%20%20%20%7D%2C%0A%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%22title%22%3A%20%22%E5%92%A8%E8%AF%A2%E5%8F%8D%E9%A6%88%22%2C%0A%20%20%20%20%20%20%20%20%22icon%22%3A%20%22https%3A%2F%2Fportal-minio.nwpu.edu.cn%2Fevaluation-center%2F625d0f67e4b0960b62f48feb.png%22%2C%0A%20%20%20%20%20%20%20%20%22url%22%3A%20%22https%3A%2F%2Fwww.baidu.com%22%0A%20%20%20%20%7D%2C%0A%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%22title%22%3A%20%22%E5%B0%8F%E5%B8%8C%E9%97%AE%E7%AD%94%22%2C%0A%20%20%20%20%20%20%20%20%22icon%22%3A%20%22https%3A%2F%2Fportal-minio.nwpu.edu.cn%2Fevaluation-center%2F625d0f5ee4b0960b62f48fe7.png%22%2C%0A%20%20%20%20%20%20%20%20%22url%22%3A%20%22https%3A%2F%2Fwww.baidu.com%22%0A%20%20%20%20%7D%0A%5D

上一篇 下一篇

猜你喜欢

热点阅读