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

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

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


1684481247584.png


方案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编码


1684481261458.png


3.复制编码结果


1684481271434.png


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


目录
相关文章
|
8月前
|
小程序 IDE 搜索推荐
【社区每周】小程序新增自定义tabBar功能;支持指定默认启动首页(2022年6月第三期)
【社区每周】小程序新增自定义tabBar功能;支持指定默认启动首页(2022年6月第三期)
73 0
|
小程序 JavaScript
微信小程序默认获取聚焦事件
微信小程序默认获取聚焦事件
154 0
|
SQL 移动开发 运维
5分钟自建可视化平台,在线拖拽组件也太方便了!
5分钟自建可视化平台,在线拖拽组件也太方便了!
215 0
5分钟自建可视化平台,在线拖拽组件也太方便了!
|
2月前
|
存储 数据安全/隐私保护
鸿蒙开发:自定义一个动态输入框
在鸿蒙开发中,如何实现这一效果呢,最重要的解决两个问题,第一个问题是,如何在上一个输入框输入完之后,焦点切换至下一个输入框中,第二个问题是,如何禁止已经输入的输入框的焦点,两个问题解决完之后,其他的就很是简单了。
56 13
鸿蒙开发:自定义一个动态输入框
|
5月前
|
开发框架 API 开发者
Flutter表单控件深度解析:从基本构建到高级自定义,全方位打造既美观又实用的移动端数据输入体验,让应用交互更上一层楼
【8月更文挑战第31天】在构建美观且功能强大的移动应用时,表单是不可或缺的部分。Flutter 作为热门的跨平台开发框架,提供了丰富的表单控件和 API,使开发者能轻松创建高质量表单。本文通过问题解答形式,深入解读 Flutter 表单控件,并通过具体示例代码展示如何构建优秀的移动应用表单。涵盖创建基本表单、处理表单提交、自定义控件样式、焦点管理和异步验证等内容,适合各水平开发者学习和参考。
121 0
|
6月前
|
小程序 开发工具 开发者
【微信小程序-原生开发】实用教程02-添加全局页面配置、页面、底部导航
【微信小程序-原生开发】实用教程02-添加全局页面配置、页面、底部导航
72 0
|
6月前
|
小程序 前端开发
【微信小程序-原生开发】添加自定义图标(以使用阿里图标库为例)
【微信小程序-原生开发】添加自定义图标(以使用阿里图标库为例)
267 0
|
8月前
|
移动开发 小程序 前端开发
【5月开发者日回顾】自定义TabBar、自定义组件支持 observers两大功能即将上线
【5月开发者日回顾】自定义TabBar、自定义组件支持 observers两大功能即将上线
58 11
|
JSON 小程序 前端开发
微信小程序(十四)小程序自定义弹窗组件
上一篇中说的是小程序自带的弹窗组件,今天,我们来试试小程序的自定义组件,我们自定义一个带确定取消的弹窗组件。 首先,放一下,最终的效果图:
369 0
|
数据采集 数据可视化 前端开发
漏刻有时数据可视化大屏核心完整版框架PHP后台数据管理 API数据接口 Echarts图表库 自带电脑端和手机端两套模版且支持自定义前端模版开发
漏刻有时数据可视化大屏核心完整版框架PHP后台数据管理 API数据接口 Echarts图表库 自带电脑端和手机端两套模版且支持自定义前端模版开发
224 0