app ios js 调起
2017-08-17 11:21:23 zengxiansheng2 阅读数 304
window.location = isInstalled(); function isInstalled(){ var the_href="app在App Store里面的链接 ";//获得下载链接 setTimeout(function(){ window.location="app的Bundle Identifier://";//打开app },50); setTimeout(function(){ window.location=the_href;//如果超时就跳转到app下载页 },100); }
2017-12-25 11:27:00 weixin_34335458 阅读数 39

前言

上一篇《h5随意调起原生页面》中已经提到,app在运营过程当中,很多时候需要做一些推广活动,同时需要通过各种途径发布消息出去,比如通过app通知、公众号推送、群发短信。在这里,我们来说说如何通过短信里的链接(短链接)跳转到app指定的页面。

短链接是什么?

短链接,通俗来说,就是将长的URL网址,通过程序计算等方式,转换为简短的网址字符串。

在短信里加入短链接原因有很多,其中有一种是因为字数限制导致无法在一条信息里表达完整的意思,不得不针对比较长的URL经过算法压缩成短链。
网上短链生成器有很多,这里推荐一个新浪短短网址生成器短网址,地址http://www.yuekaihua.com/blog/arrangement_04.html?name=yuekaihua生成之后的样子为http://t.cn/RTdGR9Z

实际上,用户点击短链之后,系统会调起浏览器,短链经过解析之后就会变回原来的模样去访问,如果想要调起app,实际上就是浏览器(app)与你的应用(app)之间的通信了。

如何通信?

URL Scheme 与 openURL

关于这两个东西这里就不做解释了,网上太多太多。今天的重点是如果通过浏览器调起我们自己的app并且跳转到指定的页面,传入合适的参数。

在上一篇《h5随意调起原生页面》中,描述的场景是app内通过webview调起我们想要的页面,现在换成了app外调起内部想要的页面,这个方案是不是还可行?答案显然是的,请看下图:

1177116-ca6eff5d9fe79d03.png
duanlian.png

对比上一篇,只不过是信息的来源发生了变化,其余的不变。变化的地方为:

  • 使用URL Scheme后,app会通过application:openURL:options:(ios2-9.0)或者application:openURL:sourceApplication:annotation:(ios9.0以上)进行监听
  • h5上通过iframe打开约定的地址

由于是使用URL Scheme,js传送过来的数据上要发生变化:

myScheme://xxx.com?params={'type':'1','controll':'XXXViewController','params':'{'xxx':'xxx'}'}

说明:
myScheme 为自己给app定义的Scheme
xxx.com 标识是有短链或外部调用内部特定页面
params 需要解析的json数据,即上一篇中的data

实现过程

app:

- (BOOL)application:(UIApplication *)application openURL:(NSURL *)url sourceApplication:(NSString *)sourceApplication annotation:(id)annotation{
    if (url == nil) {
        return YES;
    }
    
    return [self handleOpenURL:url];
}

- (BOOL)application:(UIApplication *)app openURL:(NSURL *)url options:(NSDictionary<UIApplicationOpenURLOptionsKey,id> *)options
{
    if (url == nil) {
        return YES;
    }
    
    return [self handleOpenURL:url];
}

- (BOOL)handleOpenURL:(NSURL *)url
{
    NSString  *urlstr = url.absoluteString;
    if ([urlstr hasPrefix:@"yuekaihua"]) {
        //外部调起
        NSString *formatUrl = [urlstr stringByReplacingPercentEscapesUsingEncoding:NSUTF8StringEncoding];
        NSArray *defineArray = [formatUrl componentsSeparatedByString:@"params="];
        if (defineArray.count > 1) {
            NSString *paramJson = defineArray[1];
            paramJson = [paramJson changeJsonStringToTrueJsonString];//将单引换成双引
            NSDictionary *params = [paramJson dictionaryWithJsonString];//转化为Dictionary
            [self outsiteJump:params];
        }
    }
    
    return YES;
}

- (void)outsiteJump:(NSDictionary *)params
{
    id currVc = [self curViewController];//当前屏幕viewcontroller
    if (currVc) {
        if ([currVc isKindOfClass:[ViewController class]]) {
            ViewController *currentVc = (ViewController *)currVc;
            MYLPageJumpHepler *pageJump = [[MYLPageJumpHepler alloc] initWithParent:currentVc];
            [pageJump clientDefineAction:params];
        }else{
            //不做处理
        }
    }else{
        //当app没有运行时,先保存数据,在主页面再跳转
        [[PINCache sharedCache] setObject:params forKey:@"OutSideJumpExtData"];
    }
}

h5 关键js

<script>
    $(function(){
        new FastClick(document.body);
        //ios safari调起app页面
        $(".safariBtn").on("click",function(){
            var ua = navigator.userAgent.toLowerCase();
            var schemeIOS = getUrlParam('schemeIOS');
            var schemeAdr = getUrlParam('schemeAdr');
            var config = {
                /*scheme:必须*/
                scheme_IOS: schemeIOS === null ? "yuekaihua://yuekaihua.com?params={'type':'1','controll':'TestViewController','params':{'type':'1','entity':{'UserEntity_userInfo':{'birthday':'1988-09-09','name':'hahaha'}}}}" : schemeIOS,
                scheme_Adr: schemeAdr === null ? "yuekaihua://yuekaihua/openApp" : schemeAdr,
            };
            var scheme = ua.indexOf('os') > 0 ? config.scheme_IOS : config.scheme_Adr;
                OpenAppBySchema(scheme);
        });
    });
    
    function getUrlParam(name) {
        //构造一个含有目标参数的正则表达式对象
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
        //匹配目标参数
        var r = window.location.search.substr(1).match(reg);
        //返回参数值
        if (r != null)
            return unescape(decodeURI(r[2]));   //scheme url作为参数需要先编码,所以这里要先decodeURI解码,然后再unescape解码
        return null;
    }

    function OpenAppBySchema(scheme) {
        var ua = navigator.userAgent.toLowerCase();
        if (ua.indexOf('safari') > -1 && (ua.indexOf('os 8') == -1
            || ua.indexOf('os 7') == -1
            || ua.indexOf('os 6') == -1
            || ua.indexOf('os 5') == -1)) {
            var schemeLinkOpen = document.getElementById('schemeLinkOpen');
            if (!schemeLinkOpen) {
                schemeLinkOpen = document.createElement('a');
                schemeLinkOpen.id = 'schemeLinkOpen';
                schemeLinkOpen.style.display = 'none';
                document.body.appendChild(schemeLinkOpen);
            }
            schemeLinkOpen.href = scheme;
            // 执行click
            schemeLinkOpen.dispatchEvent(customClickEvent());
        }
        var iframeObj = document.createElement("iframe");
        
        if (iframeObj != null) {
            iframeObj.setAttribute("style", "height:0px;width:0px;display:none;")
            iframeObj.setAttribute("src", scheme);
            document.body.appendChild(iframeObj);
            document.body.removeChild(iframeObj);
        }
        
    }

    function customClickEvent() {
        var clickEvent;
        if (window.CustomEvent) {
            clickEvent = new window.CustomEvent("click", {
                canBubble: true,
                cancelable: true
            }
            );
        } else {
            clickEvent = document.createEvent('Event');
            clickEvent.initEvent('click', true, true);
        }
        return clickEvent;
    }
</script>

最后

短链跳转到APP这里就结束了,加上上一篇,在这里整理出了demo,有兴趣的可以下载看看:
DefinedOpenVC

相关回顾

2018-11-28 13:38:53 qq_35500233 阅读数 1420

js h5页面调起App(IOS 和android)的实现方法

第一次写这个:我们的app是由原声和h5组成的,当用户使用浏览器打开我们的页面时我们会引导用户使:打开App 下载App
刚开始我是使用定时器来实现的,当用户点击了打开App经过一定时间之后没有反应,则我们认为她调起App失败,跳转到下载页面,但是这个存在一个问题,起始已经调起App了但是用户没有允许打开App过了一定时间之后下载的页面还是会弹出来,这样就不合理了,已经有App了还提示要下载。同时还有个问题我的手机是r11 7.1.1系统自带浏览器一直调不起App(上面实现的方法是当浏览器加载h5页面时就会执行),因此我把调起App和下载的地址分开了,测试了一些手机兼容性还不错,都可以调起和实现下载。用按钮来实现。
具体代码如下:
//下面为用户扫描二维码时进行的跳转

 var userAgent = window.navigator.userAgent;
        if (userAgent.match(这里用来区别用户是在浏览器打开还是App内打开) == null) {//当用户在浏览器中打开时
            document.getElementById("app_button").style.display = "block";//下载打开按钮显示出来
            if (userAgent.match(/MicroMessenger/) != null) {//用微信扫描时
                document.getElementById("weixin").style.display = "block";
                //下面根据不同的手机显示不同的提示语
                if (mui.os.ios) {
                    document.getElementById("addroid_weixin").style.display = "none";
                    document.getElementById("ios_weixin").style.display = "inline";
                } else if (mui.os.android) {
                    document.getElementById("ios_weixin").style.display = "none";
                    document.getElementById("addroid_weixin").style.display = "inline";
                }
                document.getElementById("app_button").style.display = "none";
            }
        }
        var parameter = window.location.href;
        var ios_parmeter = parameter.substring(7, parameter.length);
        document.getElementById("open_app").addEventListener('tap', function () {
            if (mui.os.ios) {
                window.location.href = "打开IOS的名字://" + ios_parmeter;
            } else if (mui.os.android) {
                window.location.href = "打开App的名字://hrst.com/android?data=" + parameter;
            }
        });
        document.getElementById("download_upgrade").addEventListener('tap', function () {
            if (mui.os.ios) {
            //跳转IOS下载商城地址
                window.location.href = "https://itunes.apple.com/cn/app/";
            } else if (mui.os.android) {
                var downLoad = '@ViewBag.downLoad';
                window.location.href = "android的下载地址";
            }
        });

2018-07-04 14:58:50 hbblzjy 阅读数 881

 

URL Scheme的作用

我们都知道苹果手机中的APP都有一个沙盒,APP就是一个信息孤岛,相互是不可以进行通信的。但是iOS的APP可以注册自己的URL Scheme,URL Scheme是为方便app之间互相调用而设计的。我们可以通过系统的OpenURL来打开该app,并可以传递一些参数。

例如:你在Safari里输入www.alipay.com,就可以直接打开你的支付宝app,前提是你的手机装了支付宝。如果你没有装支付宝,应该显示的是支付宝下载界面,点击会跳到AppStore的支付宝下载界面。

URL Scheme必须能唯一标识一个APP,如果你设置的URL Scheme与别的APP的URL Scheme冲突时,你的APP不一定会被启动起来。因为当你的APP在安装的时候,系统里面已经注册了你的URL Scheme。

一般情况下,是会调用先安装的app。但是iOS的系统app的URL Scheme肯定是最高的。所以我们定义URL Scheme的时候,尽量避开系统app已经定义过的URL Scheme。

注册URL Scheme

1.在info.plist里添加URL types

每一个项目里面都会有一个info.plist配置文件。找到info.plist,右键选择Add Row,然后选择URL types。

 

2.添加URL Schemes

添加完URL types,点击展开。右键选择Add Row,添加URL Schemes:

3.设置URL Schemes

设置URL Schemes,根据自己的需求设置,一定要有自己App的特点

4.设置URL Identifier

URL Identifier是自定义的 URL scheme 的名字,一般采用反转域名的方法保证该名字的唯一性,比如 com.Demo.www

如图所示:

这些设置完成后,我们可以通过调用一个方法来检验之后的测试效果,如下:

- (BOOL)application:(UIApplication *)application handleOpenURL:(NSURL*)url
{
    // 接受传过来的参数
    NSString *text = [[url host] stringByReplacingPercentEscapesUsingEncoding:NSUTF8StringEncoding];
    UIAlertView *alertView = [[UIAlertView alloc] initWithTitle:@"打开了自己的DemoApp"
                                           message:text
                                          delegate:nil
                                 cancelButtonTitle:@"OK"
                                 otherButtonTitles:nil];
    [alertView show];
    return YES;
}

运行项目,然后关闭项目,然后在Safari中搜索刚才设置的URL Schemes,效果图如:iOSMyDemoApp://或iOSMyDemoApp://com.Demo.www

 

通过另一个APP启动注册了URL Schemes的APP

打开注册iOSDevTip的APP格式为: URL Scheme://URL identifier,直接调用URL Scheme也可打开程序, URL identifier是可选的。

 

 NSString *url = @"iOSMyDemoApp://";
//    NSString *url = @"iOSMyDemoApp://com.Demo.www
";
if ([[UIApplication sharedApplication]
     canOpenURL:[NSURL URLWithString:url]])
{
    [[UIApplication sharedApplication] openURL:[NSURL URLWithString:url]];
}
else
{
    NSLog(@"can not open URL scheme iOSDevTip");
}

 

 

 

 

2017-12-14 11:45:10 Lucheyu 阅读数 907

这里明确说明后台必须支持https  否则只是ios个web也搞不出个什么,有了协议后会比较方便

安卓需不需要https都无所谓。


没有更多推荐了,返回首页