前端如何利用H5调用公司app的微信分享功能

作者:admin 发布时间:2019-12-08 22:48:39 浏览:856次
微信分享功能,在各种活动页中是最常见的,可以说是前端攻城狮必会的技能! 接到领导任务,写h5移动端活动页面,点击页面内容调取ios和Android开发自己写的分享功能(包括微信、微信朋友圈、QQ、QQ空间等),包括用户未登录,让其登录后才能分享,分享成功后发起请求给予优惠券功能,下面是所得到的经验,仅供参考。 [cc lang="JavaScript"] 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": "https://www.zhe94.com/ceshi.jpg", // 分享的图片Url "title": "小超越工作室诚挚为您服务", //分享的标题 "pictureUrl": "https://www.zhe94.com/", //分享的网址链接 "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.zhe94.com/api/coupon/receiveCoupon?userId=" + userId + // "&takeCouponType=2&couponId=176", url: "http://dev.zhe94.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.zhe94.com/api/coupon/receiveCoupon?userId=" + userId + // "&takeCouponType=2&couponId=176", url: "http://dev.zhe94.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": "https://www.zhe94.com/ceshi.jpg", // 分享的图片Url "title": "小超越工作室诚挚为您服务", //分享的标题 "pictureUrl": "https://www.zhe94.com/", //分享的网址链接 "platform": ["2", "3"] //1新浪微博2微信好友3微信朋友圈4QQ好友5QQ空间6短信 }, function (response) {}) } } }) }[/cc] 总的来说,安卓和ios的代码相似度很高,但是代码码放的位置不一样,这点要注意, callHandler是页面调取ios或安卓的方法, registerHandler是ios和安卓调取页面的方法 特别要注意的是里面的 loginAction 和 shareAction 调用方法名由h5页面开发者与ios和安卓人员商量定制的。 以上就是“前端如何利用H5调用公司app的微信分享功能”

微信端使用H5页面调用分享接口

如果你希望在微信端使用H5页面调用分享接口该怎么办呢?也就是平时说的二次分享 1、首先需要在index页面引入微信接口文件; [cc lang="html"][/cc] 2、在myApp.run文件中写微信分享函数,注意该函数需要将当前页面的url获取并解析,然后发给后端来生成对应签名,直接上代码; [cc lang="JavaScript"] // 微信分享函数 function wxShare() { var url = $location.absUrl().split('#')[0]; wxServices.postWxShare(url).then(function (res) { if (res.data.code == 0) { var respanse = res.data.data; wx.config({ debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。 appId: respanse.appId, timestamp: respanse.timestamp, // 必填,生成签名的时间戳 nonceStr: respanse.nonceStr, // 必填,生成签名的随机串 signature: respanse.signature,// 必填,签名 jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage', 'onMenuShareQQ', 'onMenuShareWeibo', 'onMenuShareQZone']// 必填,需要使用的JS接口列表 }); } }) }[/cc] 将当前url解析后,发给后端接口,后端需要将appId,时间戳,随机字符串和签名返回,然后接口列表(jsApiList)根据需要自己手动添加,注意是一个数组的形式,我这里只需要调用分享接口; 调试的时候,可以将debug更改为true,这样在就每次调用微信接口的时候就会有接口信息alert出来,方便查看接口调用是否正常了; 3、在该函数后,自定义分享内容,代码如下; [cc lang="JavaScript"] wx.ready(function () { var obj = { title: 'SPBCN团体赛开始投票啦!', // 分享标题 desc: 'SPBCN团体赛开始投票了,快来为我们加油吧!', // 分享描述 link: 'http://dev.spbcn.org/wechat-vote-phone/redirect.html', // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致 // 该链接是重定向链接,因为需要获取用户code,但是该链接又无法直接写微信获取code的链接, // 所以需要点击后重新加载新的页面,来实现重定向,重新打开获取code的微信链接,实现获取用户信息的功能; imgUrl: 'http://cdn.spbcn.org/img/logo-image.png', // 分享图标 fail: function (res) { alert(JSON.stringify(res)); } }; // 2.1 监听“分享给朋友”,按钮点击、自定义分享内容及分享结果接口 wx.onMenuShareAppMessage(obj); // 2.2 监听“分享到朋友圈”按钮点击、自定义分享内容及分享结果接口 wx.onMenuShareTimeline(obj); // 2.3 监听“分享到QQ”按钮点击、自定义分享内容及分享结果接口 wx.onMenuShareQQ(obj); // 2.4 监听“分享到微博”按钮点击、自定义分享内容及分享结果接口 wx.onMenuShareWeibo(obj); // 2.5 监听“分享到QZone”按钮点击、自定义分享内容及分享接口 wx.onMenuShareQZone(obj); })[/cc] wx.ready是在wx.config之后自动运行的,我是定义了一个分享内容的通用对象,然后直接调用即可,也可以根据需要来分别定义分享朋友、朋友圈、微博等的不同内容,具体查看微信接口文档即可; 主要强调一下分享链接,该链接必须是你的公众号设置的JS安全域名下的,不然无法分享成功; 分享失败的表现是,分享链接图片无法加载你自定义的图片,分享标题也不对;

如需转载请保留本文出处: https://zhe94.com/570.html

上一篇:快速建站之前言:如何建立一个自己的网站
下一篇:PHP怎么基于Redis实现轻量级延迟队列功能