您现在的位置是:网站首页> 编程资料编程资料
html5调用app分享功能示例(WebViewJavascriptBridge)微信端html5页面调用分享接口示例HTML5实现分享到微信好友朋友圈QQ好友QQ空间微博二维码功能Html5页面二次分享的实现
2021-08-31
1150人已围观
简介 这篇文章主要介绍了html5调用app分享功能示例(WebViewJavascriptBridge)的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
小编接到领导任务,写h5移动端活动页面,点击页面内容调取ios和Android开发自己写的分享功能(包括微信、微信朋友圈、QQ、QQ空间等),包括用户未登录,让其登录后才能分享,分享成功后发起请求给予优惠券功能,下面是所得到的经验,仅供参考。
建议不要使用ShareSDK
直接上干货:不用引用其他库
var u = navigator.userAgent;//判断手机类型 //---------------------------------------安卓手机-------------------------------------------------------// if (u.indexOf('Android') > -1 || u.indexOf('Linux') > -1) { //安卓机 var callbackButton = document.getElementById('btnImg'); //获取节点 callbackButton.onclick = function (e) { e.preventDefault(); //阻止原本作用 if (userId == null) { //看是否登录,如果没登录 WebViewJavascriptBridge.callHandler('loginAction', function (response) {})//这里是h5页面调取安卓的登录方法 } else {//已经登陆了 WebViewJavascriptBridge.callHandler('shareAction', { //h5页面调取安卓的方法,进行分享传给android的参数, "content": "你请客,我买单,呼朋唤友一起去(趣)约车", // 分享的文字 "pictureLinking": "http://yueche-1254224848.cossh.myqcloud.com/che/%E5%B0%8F%E5%9B%BE.jpg", // 分享的图片Url "title": "趣约车-星海广场站等你", //分享的标题 "pictureUrl": "http://agent.qyueche.com/sup/ShareSdk/xing.html", //分享的网址链接 "platform": ["2", "3"] //1新浪微博2微信好友3微信朋友圈4QQ好友5QQ空间6短信 }, function (response) {}) } } function connectWebViewJavascriptBridge(callback) {//这里是分享成功后 if (window.WebViewJavascriptBridge) { callback(WebViewJavascriptBridge) } else { document.addEventListener( 'WebViewJavascriptBridgeReady' , function() { callback(WebViewJavascriptBridge) }, false ); } } connectWebViewJavascriptBridge(function(bridge) { bridge.init(function(message, responseCallback) { }); bridge.registerHandler('shareComplete', function (data, responseCallback) { //ios回调的方法, // alert(data) if (data == 1) { //若果分享成功 $.ajax({ //请求接口去领券 type: "get", contentType: "application/x-www-form-urlencoded", // url: "http://main.qyueche.com/api/coupon/receiveCoupon?userId=" + userId + // "&takeCouponType=2&couponId=176", url: "http://dev.qyueche.cn/api/coupon/receiveCoupon?userId=" + userId + "&takeCouponType=2&couponId=187", data: {}, dataType: "json", success: function (data) { //领取成功 swal(data.message); }, error: function (XMLHttpRequest, textStatus, errorThrown) { //领取失败 swal('领取失败!'); } }) } else { //分享失败 swal('分享失败!'); } }) bridge.registerHandler('loginComplete', function (data, responseCallback) { //ios登录的方法, userId = data; }) }) } else if (u.indexOf('iPhone') > -1) { //---------------------------------------苹果手机-------------------------------------------------------// // swal("苹果手机"); function setupWebViewJavascriptBridge(callback) { if (window.WebViewJavascriptBridge) { return callback(WebViewJavascriptBridge); } if (window.WVJBCallbacks) { return window.WVJBCallbacks.push(callback); } window.WVJBCallbacks = [callback]; var WVJBIframe = document.createElement('iframe'); WVJBIframe.style.display = 'none'; WVJBIframe.src = 'https://__bridge_loaded__'; document.documentElement.appendChild(WVJBIframe); setTimeout(function () { document.documentElement.removeChild(WVJBIframe) }, 0) } setupWebViewJavascriptBridge(function (bridge) { bridge.registerHandler('shareComplete', function (data, responseCallback) { //ios回调的方法, if (data.code == 1) { //若果分享成功 $.ajax({ //请求接口去领券 type: "get", contentType: "application/x-www-form-urlencoded", // url: "http://main.qyueche.com/api/coupon/receiveCoupon?userId=" + userId + // "&takeCouponType=2&couponId=176", url: "http://dev.qyueche.cn/api/coupon/receiveCoupon?userId=" + userId + "&takeCouponType=2&couponId=187", data: {}, dataType: "json", success: function (data) { //领取成功 swal(data.message); }, error: function (XMLHttpRequest, textStatus, errorThrown) { //领取失败 swal('领取失败!'); } }) } else { //分享失败 swal('分享失败!'); } }) bridge.registerHandler('loginComplete', function (data, responseCallback) { //ios登录的方法, userId = data.userId; }) var callbackButton = document.getElementById('btnImg'); //获取节点 callbackButton.onclick = function (e) { //点击事件 e.preventDefault(); //阻止原本作用 if (userId == null) { //看是否登录 bridge.callHandler('loginAction', function (response) {}) } else { bridge.callHandler('shareAction', { //传给ios的参数 "content": "你请客,我买单,呼朋唤友一起去(趣)约车", // 分享的文字 "pictureLinking": "http://yueche-1254224848.cossh.myqcloud.com/che/%E5%B0%8F%E5%9B%BE.jpg", // 分享的图片Url "title": "趣约车-星海广场站等你", //分享的标题 "pictureUrl": "http://agent.qyueche.com/sup/ShareSdk/xing.html", //分享的网址链接 "platform": ["2", "3"] //1新浪微博2微信好友3微信朋友圈4QQ好友5QQ空间6短信 }, function (response) {}) } } }) } 总的来说,安卓和ios的代码相似度很高,但是代码码放的位置不一样,这点要注意,callHandler是页面调取ios或安卓的方法,registerHandler是ios和安卓调取页面的方法

图片中红框的位置的方法名由h5页面开发者与ios和安卓人员商量定制。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
相关内容
- 浅谈html5与APP混合开发遇到的问题总结Html5 APP中监听返回事件处理的方法示例使用html5新特性轻松监听任何App自带返回键的示例HTML5页面中尝试调起APP功能HTML5 Plus 实现手机APP拍照或相册选择图片上传功能HTML5打开本地app应用的方法html5调用app分享功能示例(WebViewJavascriptBridge)
- 在canvas上实现元素图片镜像翻转动画效果的方法HTML5 Canvas实现图片缩放、翻转、颜色渐变的代码示例
- HTML5 新表单类型示例代码html5实现点击弹出图片功能html5 录制mp3音频支持采样率和比特率设置html5表单的required属性使用html5调用摄像头实例代码HTML5页面音频自动播放的实现方式Html5大屏数据可视化开发的实现html实现弹窗的实例HTML5来实现本地文件读取和写入的实现方法HTML 罗盘式时钟的实现HTML5简单实现添加背景音乐的几种方法
- 浅谈基于Canvas的手绘风格图形库Rough.jshtml5实现点击弹出图片功能html5 录制mp3音频支持采样率和比特率设置html5表单的required属性使用html5调用摄像头实例代码HTML5页面音频自动播放的实现方式Html5大屏数据可视化开发的实现html实现弹窗的实例HTML5来实现本地文件读取和写入的实现方法HTML 罗盘式时钟的实现HTML5简单实现添加背景音乐的几种方法
- 基于HTML5 WebGL的3D机房的示例html5实现点击弹出图片功能html5 录制mp3音频支持采样率和比特率设置html5表单的required属性使用html5调用摄像头实例代码HTML5页面音频自动播放的实现方式Html5大屏数据可视化开发的实现html实现弹窗的实例HTML5来实现本地文件读取和写入的实现方法HTML 罗盘式时钟的实现HTML5简单实现添加背景音乐的几种方法
- Html5 APP中监听返回事件处理的方法示例使用html5新特性轻松监听任何App自带返回键的示例一个不错的HTML5 Canvas多层点击事件监听实例详解Html5 监听拦截Android返回键方法
- canvas简易绘图的实现(海绵宝宝篇)HTML5 canvas基本绘图之图形组合HTML5 canvas基本绘图之绘制阴影效果HTML5 canvas基本绘图之文字渲染HTML5 canvas基本绘图之绘制曲线HTML5 canvas基本绘图之图形变换HTML5 canvas基本绘图之填充样式实现HTML5 canvas基本绘图之绘制线条HTML5 canvas基本绘图之绘制五角星HTML5 canvas基本绘图之绘制矩形HTML5 canvas基本绘图之绘制线段
- 快速实现一个简单的canvas迷宫游戏的示例html5实现点击弹出图片功能html5 录制mp3音频支持采样率和比特率设置html5表单的required属性使用html5调用摄像头实例代码HTML5页面音频自动播放的实现方式Html5大屏数据可视化开发的实现html实现弹窗的实例HTML5来实现本地文件读取和写入的实现方法HTML 罗盘式时钟的实现HTML5简单实现添加背景音乐的几种方法
- HTML5中form如何关闭自动完成功能的方法html5实现点击弹出图片功能html5 录制mp3音频支持采样率和比特率设置html5表单的required属性使用html5调用摄像头实例代码HTML5页面音频自动播放的实现方式Html5大屏数据可视化开发的实现html实现弹窗的实例HTML5来实现本地文件读取和写入的实现方法HTML 罗盘式时钟的实现HTML5简单实现添加背景音乐的几种方法
- Canvas实现保存图片到本地的示例代码html2canvas把div保存图片高清图的方法示例在HTML5 Canvas中放入图片和保存为图片的方法HTML5 canvas画图并保存成图片的jcanvas插件将HTML5 Canvas的内容保存为图片借助toDataURL实现
