工作中的一些知识总结
判断h5页面是否App内打开 HybridMethod.isApp() 跳转 部分功能已封装至srcstatich5jsjshybridcomponent.js，可以直接调用 页面跳转 topage为跳转页面地址，若下表未给出目标页参数，topage直接为目标链接地址，否则为目标页参数 方法一 RainbowBridge.callMethod('JsInvokeAppScope', 'forward', { type: 'h5Web', //跳转类型native或h5Web或h5Native topage: 'showMallShake' }); 方法二 <div data-forwardBox> <div data-forwardNoRight-topage="<% webpath.h5 %>/help/qalist.html?q=0&a=2" data-forwardNoRight-title="产品计划" data-forwardNoRight-type="h5Web">加入的计划是如何计息和派息的？</div> </div> 弹窗 RainbowBridge.callMethod('JsInvokeAppScope','showAlert',obj,function(result){}) 显示loading loading:function(status){ RainbowBridge.callMethod('JsInvokeAppScope','loading',{status:status}); }, 弹出ActionSheet showThemeDialog:function(obj){ //参数是一个对象，只有一个属性dialog，属性值是一个数组，数组每项又是一个对象，分别有两个属性：link，title RainbowBridge.callMethod('JsInvokeAppScope','showThemeDialog',{ dialog : obj.dialog }); }, 结束刷新 RainbowBridge.callMethod('JsInvokeAppScope','endIntegralLoad',{}); 跳转登陆页 if(HybridMethod.isApp()) { RainbowBridge.callMethod('JsInvokeAppScope', 'goLogin'); } else { var _index = window.location.href.indexOf('event'); window.location.href = HybridParams.pc + '/event/login.html?backUrl=' + window.location.href.substring(_index); } 跳转注册页 if(HybridMethod.isApp()){ RainbowBridge.callMethod('JsInvokeAppScope','forward',{ type: 'native',//跳转类型native或h5Web或h5Native topage: 'register' }) }else{ window.location.href = HybridParams.pc + '/event/register/beginnerwelfare/indexh5.html'; } or RainbowBridge.callMethod('JsInvokeAppScope','goRegister',{}); 跳转到app页面的时候可以给页面添加标题和其他文字 if(HybridMethod.isApp()){ RainbowBridge.callMethod('JsInvokeAppScope','forward',{ type: 'native',//跳转类型native或h5Web或h5Native topage: 'register', UIHeader: { title: "分享领奖", //标题 right:{ //标题栏右边的显示 type:"word",//类型文字word或类型icon图片或share content:"中奖记录",//内容为文字或icon图片地址 action:{ //这个type点击后的跳转 type: 'h5Web',//跳转类型native或h5Web或h5Native topage: LOCATIONORIGIN + '/integral/prizeRecord.html', UIHeader:{ //点击后侧type内容跳转后的页面显示 title:"中奖记录"//标题 } } } } }) }else{ window.location.href = HybridParams.pc + '/event/register/beginnerwelfare/indexh5.html'; } 跳转个人中心 if(HybridMethod.isApp()){ RainbowBridge.callMethod('JsInvokeAppScope','forward',{ type: 'native',//跳转类型native或h5Web或h5Native topage: 'user' }) }else{ window.location.href = HybridParams.h5 + "/download"; } 跳转投资页 if (HybridMethod.isApp()) { RainbowBridge.callMethod('JsInvokeAppScope','forward',{ type: 'native', topage: 'invest' }); }else{ window.location.href = HybridParams.h5 + "/download"; } 已登录跳转到首页，没登录跳转到登录页 if(HybridMethod.isApp()){ if(HybridParams.token){ RainbowBridge.callMethod('JsInvokeAppScope','forward',{ type: 'native',//跳转类型native或h5Web或h5Native topage: 'home' //首页 }) }else{ RainbowBridge.callMethod('JsInvokeAppScope','goLogin'); } }else{ window.location.href= HybridParams.h5+'/download/'; } 跳转到充值 RainbowBridge.callMethod('JsInvokeAppScope','forward',{ type: 'native',//跳转类型native或h5Web或h5Native topage: 'recharge' }) 跳转到账户安全(设置页面) RainbowBridge.callMethod('JsInvokeAppScope','forward',{ type: 'native',//跳转类型native或h5Web或h5Native topage: 'showSettingActivity' }) 跳转到积分商城 RainbowBridge.callMethod('JsInvokeAppScope','forward',{ type: 'native',//跳转类型native或h5Web或h5Native topage: 'showMall' }) 关闭当前页面 if(HybridMethod.isApp()) { RainbowBridge.callMethod('JsInvokeAppScope','finish'); } 跳转到提现页面 var _li = $(this).closest('li'); if(HybridMethod.isApp()){ //这个页面已经不用了 RainbowBridge.callMethod('JsInvokeAppScope','goForwardWithParams',{ type : 'withdraw', lhhnum : '提现值' }); } 其他跳转例子 if(HybridMethod.isApp()){ var topage = params.h5 + "/user/bonus_receive.html?rcode="+rcode; RainbowBridge.callMethod('JsInvokeAppScope','forward',{ type: 'h5Web',//跳转类型native或h5Web或h5Native topage: topage, UIHeader:{ //跳转后页面的显示 title:"好友邀你领红包",//标题 } }); }else{ window.location.assign(params.h5 + "/user/bonus_receive.html?rcode="+rcode); } 设置当前页的标题 if(HybridMethod.isApp()){ RainbowBridge.callMethod('JsInvokeAppScope','setWebTitle',{ title: 'demo3-sub页面一前端设置当前页的标题', }); } 其他跳转总结： "experianceInvest"; 体验标投资"feedback"; 意见反馈"aboutUs"; 关于我们"myNotice"; 公告"message"; 消息 "myPrivilege"; 我的特权"productDetail"; 计划详情 -------------需要参数 参数key : id"getMoreByInvite";// 跳转多邀多的；页面为H5 但是因为有二级页面参数不好跳转 , 走本地页面流程"showMallShake"; //积分商城摇一摇 页面为H5 但是因为有二级页面参数不好跳转 , 走本地页面流程"moneyRecord";//资金明细 帮助中心功能 app内h5页面是否有“下拉刷新”功能 & “上拉加载更多”功能 type：1 下拉 type：2 上拉 type：3 both两个都有 RainbowBridge.callMethod('JsInvokeAppScope','setRefeshType',{ type : 1 }) 显示通用弹出框 var refreshdata = { "type": 9, "message": "线下充值可能延至48小时到账建议使用在线通道充值", "largebuttontext": "返回在线充值", "extraclicktext": "继续刷新余额", }; 复制操作 RainbowBridge.callMethod('JsInvokeAppScope','copyContent',{content:content}); 复制邮箱 $('.kefu_email').click(function(){ var txt = $(this).find('span').text(); HybridMethod.invokeEmail(txt); }) 调起邮箱 invokeEmail:function(email){ RainbowBridge.callMethod('JsInvokeAppScope','invokeEmail',{email:email}); } 粘贴到剪贴板 copyH5Content:function(content){ RainbowBridge.callMethod('JsInvokeAppScope','copyH5Content',{content:content}); } 复制微信号 $('.ylb_weixin').click(function(){ HybridMethod.copyH5Content('yonglibao'); }) 跳转在线客服界面 $('.kefu_online').click(function(){ RainbowBridge.callMethod('JsInvokeAppScope','toContactUs'); }) 拨打电话 $('.ylb_phone').click(function(){ HybridMethod.toCallUs('400-615-5566'); }) or toCallUs:function(phone){ RainbowBridge.callMethod('JsInvokeAppScope','toCallUs',{phone:phone}); }, 照相机 camera:function(callback){ RainbowBridge.callMethod('JsInvokeAppScope','camera',{},callback); } 判断android和ios isAndroid: function(){ var u = navigator.userAgent; var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端或者uc浏览器 return isAndroid; }, isIOS: function(){ var u = navigator.userAgent; var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端 return isiOS; } 获取APP版本号 getAppVersion: function(){ var that = this; if(HybridMethod.isApp()){ RainbowBridge.callMethod('JsInvokeAppScope','getAppVersion',{},that.getAppVersionCallBack); } else{ window.location.href= HybridParams.h5+'/landing/'; } }, //获取APP版本号回调 getAppVersionCallBack: function(result){ var that = this; // result = { version: '5.1.4' }; alert('版本号为'+result.version); } 下载app function weixin(){ var ua = navigator.userAgent.toLowerCase(); //navigator是HTML中的内置对象，包含浏览器的信息；userAgent是navigator的属性方法，可以返回由客户机发送服务器的头部的值，作用就是返回当前用户所使用的是什么浏览器，toLowerCase()是将转换为小写 return ua.match(/MicroMessenger/i)=="micromessenger"; }; function ios(){ return /(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent); } function downloadway(){ var self = this; if(!weixin()){ $('.download-btn').attr("href","http://a.app.qq.com/o/simple.jsp?pkgname=com.yonglibao.android"); }else if(ios()){ $('.download-btn').attr('href','https://itunes.apple.com/us/app/yong-li-bao-tou-zi-li-cai/id874240991?l=zh&ls=1&mt=8'); $('.download-btn').click(function(){ ga('send', 'event', '下载', 'iOS', { 'metric3': 1 }); }); }else{ //android $.ajax({ type:"POST", dataType:"json", url:params.url + '/option/getConfig', success:function(response){ console.log(response) if(response.code == 1000){ $("#device-browser").html("Andriod"); $('.download-btn').attr("href","https://yonglibao-app.oss-cn-hangzhou.aliyuncs.com/yonglibao_" + response.data.updateVersion.android_channel_version + ".apk"); $(".download-btn").click(function(){ ga('send', 'event', '下载', '安卓', { 'metric3': 1 }); }); }else{ alert(response.msg); } }, error:function(response){ alert(response.msg); } }) } } 分享 不需要回调的右上角分享 share: function () { var self = this; if (HybridMethod.isApp()) { //右上角分享 RainbowBridge.callMethod('JsInvokeAppScope', 'setShare', { 'needShare': 1 // 1: 需要分享按钮（默认）； 2: 不需要分享按钮 }); HybridMethod.showAndSetRightShareBtn({ title: '“辞旧辞旧迎新送金喜 新榜提名赢好礼', content: '年终盛宴，延续惊2018鸿运当投，品牌金饰天天送，上榜更有豪礼拿，苹果手机 、投资金条、2018现金大红包，就等你来！', imgUrl: "https://pc104.ylb.net//event/2017/newyear/images/share.jpg", needShare: 1, shareUrl: "http://pc104.ylb.net/event/2017/newyear/index.html", useDefault:0, //0：分享内容由前端自定义；1：分享内容由app抓取 stayWhich: 'wechat,wx,qq', //分享支持哪几种方式；朋友圈，微信，qq delayShare:1, //延迟分享，默认为0，即调用方法就分享，为1时即只传分享的参数，不立即分享，用户点击默认分享按钮时才分享 isNeedCreate: 1 }); } } 需要回调的右上角分享 share: function () { var self = this; if (HybridMethod.isApp()) { //右上角分享 RainbowBridge.callMethod('JsInvokeAppScope', 'setShare', { 'needShare': 1 // 1: 需要分享按钮（默认）； 2: 不需要分享按钮 }); HybridMethod.showAndSetRightShareBtn({ title: '“辞旧辞旧迎新送金喜 新榜提名赢好礼', content: '年终盛宴，延续惊2018鸿运当投，品牌金饰天天送，上榜更有豪礼拿，苹果手机 、投资金条、2018现金大红包，就等你来！', imgUrl: "https://pc104.ylb.net//event/2017/newyear/images/share.jpg", needShare: 1, shareUrl: "http://pc104.ylb.net/event/2017/newyear/index.html", callback: self.shareCallBack }); } }, // 分享回调 shareCallBack: function (res) { //在分享后点击返回永利宝会给res传值1，所以必须在分享后点击返回永利宝才成功 if (res == 1 && !this.isAct1End) { var zhis = this; $.ajax({ url: HybridParams.url + '/activity/ShareOpportunity', type: 'POST', headers: { 'Authorization': HybridParams.token }, dataType: 'json', success: function (res) {}, error: function (e) {}, complete: function () {} //ajax请求完成后执行 }); } } 页面中按钮分享 RainbowBridge.callMethod('JsInvokeAppScope','share',{ title: 'demo1页面中的分享按钮', content: 'demo1页面中的分享按钮', useDefault:0, stayWhich: 'wechat,qq', imgUrl:HybridParams.pc + '/event/2017/sharedemo/images/demo1.png', shareUrl:HybridParams.pc + '/event/2017/sharedemo/demo1.html?a=1&b=2\#asd', }); 微信分享 我们项目中用到的微信分享方法的调用； var weixin = require("../modules/weixin.jdk.js");//调用微信jdk weixin.config({ title: "标题", desc: "内容", imgUrl: 图片地址, link: 链接地址' },false); 积分商城 积分记录明细页面：https://h5.yonglibao.com/integral/integralRecord.html 登录状态通过url传参 参数名 描述 类型 token 用户登录token String dbnewopen 新窗口打开 Number App-H5相关 名称 链接 银行限额 https://h5.yonglibao.com/limit/limit.html 平台数据 https://h5.yonglibao.com/platformdata/dataindex.html 通过获取url参数定义相关页面跳转参数 比如：http://www.yonglibao.com/?towhichpage = produky var id = that.GetQueryString('towhichpage')||'', native = '', topage = '', id = '', number = '', title = '' if(id == 'produky'){//跳产品页 native = true; topage = productDetail; id = id; number = 2; }else if(id == 'baidu'){//跳百度页面 native = false; topage = 'http://www.baidu.com'; title = '百度一下'; }else if(id == 'recharge'){//跳充值页 native = true; topage = 'recharge'; } 安卓端 if (native == 'false') { window.location.href = 'yonglibao://JsInvokeAppScope:10025/forward?{"type":"web","topage":"'+ topage +'","UIHeader":{"title":"'+title+'"}}"'; }else{ if(str != ""){ window.location.href ='yonglibao://JsInvokeAppScope:10025/forward?{"type":"native","topage": "'+topage+'","params":{"'+id+'" : "'+number+'"}}'; }else{ window.location.href = 'yonglibao://JsInvokeAppScope:10025/forward?{"type":"native","topage":"'+ topage +'"}'; } } ios终端 if (native == 'false') { window.location.href = 'yonglibao://JsInvokeAppScope?port=10025&forward={"type":"web","topage":"'+ topage +'","UIHeader":{"title":"百度一下"}}"'; }else{ if(str != ""){ window.location.href ='yonglibao://JsInvokeAppScope?port=10025&forward={"type":"native","topage": "'+topage+'","params":{"'+id+'" : "'+number+'"}}'; }else{ window.location.href = 'yonglibao://JsInvokeAppScope?port=10025&forward={"type":"native","topage":"'+ topage +'"}'; } } 感悟：闲谈莫论他人非，每个人都有自己的思维，只有合不合适，没有对不对，不要把自己的观点强加给别人
