h5单页,微信浏览器唤醒APP

微信内的H5单页,都不能直接唤醒APP。所以需要打开外部浏览器。目前android能够通过后台的配合修改请求头,打开外部浏览器唤醒APP。ios目前没找到合适的方法,只能引导用户自己使用默认浏览器打开H5单页,进而唤醒APP

思路:

ios:判断是否是微信,是微信则显示打开默认浏览器页面。否则,直接跳转

android:后台配合,跟后台约定一个链接,修改链接的请求头为下载响应头(用于打开外部浏览器),并将前端需要访问的H5单页链接返回过来。

具体实现:

1.跟后台约定的链接

var pathName=window.document.location.pathname;
var curWwwPath=window.document.location.href;
var pos=curWwwPath.indexOf(pathName);
var prefixUrl=curWwwPath.substring(0,pos);
this.linkData = prefixUrl+'/ourHouse/system/openBrowser?aa='+'参数'

访问后台返回的链接,跳转到外部浏览器并访问返回的链接

2.进页面先判断是否是IOS并且是微信浏览器

 //判断是否是微信浏览器并且是ios系统
if(ua.indexOf('micromessenger') > -1 && ua.indexOf('os') > -1){
            //提示请选择在浏览器打开
            $("img").css({'display':'block'});
            $("body").css({'background':'black',"opacity":"0.8"});
            $(".box").css('display','none');
        }
        //点击领取
        $(document).on('click','.discount_use',function(){
            if(localStorage.getItem("token")){
                if($('.discount_use').text() == '去使用' || $('.discount_use').text() == '打开APP'){
                    //唤醒APP.second_right
                    openclient();
                }else{
                    getDiscount();
                }
            }else{
                window.location.href='./login.html'
            }
        })

3.H5页面唤醒APP的方法。

 //唤醒APP的方法,
//config.scheme_IOS,config.scheme_Adr。跟IOS和android定义好的跳转到APP的路径
//config.download_url,android的下载路径。IOS没有对应APP时,自己会跳转到appstore
    function openclient() {
        // alert(ua)
        var ifr = document.createElement('iframe')
        if(ua.indexOf('os') > 0){
            window.location.href=config.scheme_IOS;
        }else{
            ifr.src = config.scheme_Adr;
            ifr.style.display = 'none';
            document.body.appendChild(ifr);
            setTimeout(function(){
                document.body.removeChild(ifr);
                window.location.href = config.download_url
            }, 2000);
        }
    }

 

### 回答1: UniAPP 是一个基于 Vue.js 的跨平台开发框架,可以用于开发 iOS、Android、H5 等多个平台的应用程序。使用 UniAPP 开发手机 APP 需要先安装好相关的开发环境,包括 Node.js、HBuilderX 等工具。然后,可以使用 Vue.js 的语法进行开发,UniAPP 提供了一些特定的 API 和组件,可以方便地调用原生的功能和接口。最后,可以使用 HBuilderX 进行打包和发布。具体的开发流程和细节可以参考 UniAPP 的官方文档。 ### 回答2: UniAPP 是一种基于 Vue.js 框架的跨平台开发工具,它能够帮助开发者快速地构建出同时支持多个平台的手机应用程序。下面是使用 UniAPP 开发手机 APP 的一般步骤: 1. 安装UniAPP:首先,需要在开发环境中安装 UniAPP 的开发工具,比如 HBuilder X。HBuilder X 是一个集成开发环境,支持开发多平台的应用程序。 2. 创建项目:打开 HBuilder X,选择创建 UniAPP 项目。在创建项目的过程中,需要选择支持的平台,比如微信小程序、AppH5 等。根据项目的需求选择相应的平台。 3. 开发页面:UniAPP 使用 Vue.js 的语法进行开发。开发者可以使用 Vue 组件结构来构建应用页面。页面的开发过程类似于 Vue.js 单页面应用的开发。 4. 调试和预览:在 HBuilder X 中,开发者可以通过选择不同的平台进行调试和预览。比如可以在微信开发者工具中预览小程序。HBuilder X 提供了实时预览功能,可以随时查看页面的效果和布局。 5. 打包和发布:开发完成后,可以将应用程序打包为不同平台的安装包或者小程序发布。HBuilder X 提供了相应的打包工具和发布流程,可以根据项目需求选择合适的打包和发布方式。 总体来说,使用 UniAPP 开发手机 APP 的过程和传统的 Vue.js 开发类似,但是通过使用 UniAPP,开发者可以更加高效地开发出同时支持多个平台的应用程序。这对于跨平台开发和节约开发时间具有很大的优势。 ### 回答3: UniAPP是一种基于Vue.js框架的跨平台开发工具,可以用于开发手机应用程序。以下是使用UniAPP开发手机应用程序的步骤: 1. 安装UniAPP:首先,需要在电脑上安装好Node.js环境,并使用npm命令安装UniAPP的命令行工具。 2. 创建UniAPP项目:使用命令行工具,在指定目录下使用uni-create命令创建一个新的UniAPP项目,可以选择使用Vue.js或者原生模式。 3. 编写代码:进入创建的项目目录,在src目录下编写页面的代码,UniAPP使用Vue的语法,可以使用Vue组件库、Vue生命周期等等。 4. 预览效果:在命令行工具中使用uni-serve命令,可以预览项目在开发阶段的效果,可以在手机上或者模拟器上进行预览。 5. 构建发布:完成开发后,可以使用uni-build命令将项目构建为各个平台的应用程序文件。根据需要,可以选择构建成iOS、Android、H5或者其他平台的应用程序。 6. 调试和测试:使用相应的调试工具,对构建好的应用程序进行调试和测试,确保在不同平台上运行良好。 7. 发布应用程序:完成测试后,可以将应用程序发布到相应的应用商店或者进行其他形式的分发。 总之,UniAPP提供了一种简洁高效的方式来开发手机应用程序,开发者可以使用熟悉的Vue.js语法进行开发,然后通过UniAPP将应用程序编译成多个平台的应用。这样一次开发就可以在多个平台上使用,大大提高了开发效率。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值