工作中的一些知识总结-阿里云开发者社区

判断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';
}

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');
})

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 +'"}';  
    }
}

感悟：闲谈莫论他人非，每个人都有自己的思维，只有合不合适，没有对不对，不要把自己的观点强加给别人

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

工作中的一些知识总结