android实现通过浏览器点击链接打开本地应用(APP)并拿到浏览器传递的数据

本文介绍如何实现从浏览器点击链接启动Android应用并传递数据。首先,需要在HTML页面设置特定URL格式,然后在AndroidManifest.xml中配置对应的intent-filter。在Activity中获取URL参数。注意,第三方浏览器可能不支持此功能,如UC浏览器会在scheme前添加http,而系统和谷歌浏览器一般可以正常工作。百度应用可能通过自定义端口和服务实现跨浏览器启动本地应用。

为了实现这个功能可折腾了我好久,先上一份代码,经楼主验证是绝对可以用的而且也比较清晰的代码!(ps:还是先剧透下吧,第三方大部分浏览器无法成功。)

点击浏览器中的URL链接,启动特定的App。

首先做成HTML的页面,页面内容格式如下:

<a href="[scheme]://[host]/[path]?[query]">启动应用程序</a> 

这一句就可以了。

 

各个项目含义如下所示:

scheme:判别启动的App。 ※详细后述

host:适当记述

path:传值时必须的key     ※没有也可以

query:获取值的Key和Value  ※没有也可以

 

作为测试好好写了一下,如下:

<a href="myapp://jp.app/openwith?name=zhangsan&age=26">启动应用程序</a>  

 

接下来是Android端。
首先在AndroidManifest.xml的MAIN Activity下追加以下内容。(启动Activity时给予)

※必须添加项

<intent-filter>  
    <action android:name="android.intent.action.VIEW"/>  
    <category android:name="android.intent.category.DEFAULT" />  
    <category android:name="android.intent.category.BROWSABLE" />  
    <data android:scheme="myapp" android:host="jp.app" android:pathPrefix="/openwith"/>  
</intent-filter>

HTML记述的内容加入<data …/>。
其中必须的内容仅scheme,没有其他内容app也能启动。

 

※注意事项:intent-filter的内容【android.intent.action.MAIN】和 【android.intent.category.LAUNCHER】这2个,不能与这次追加的内容混合。
                 所以,如果加入了同一个Activity,请按以下这样做,否则会导致应用图标在桌面消失等问题。

复制代码
<intent-filter>  
    <action android:name="android.intent.action.MAIN"/>  
    <category android:name="android.intent.category.LAUNCHER" />  
</intent-filter>  
<intent-filter>  
    <action android:name="android.intent.action.VIEW"/>  
    <category android:name="android.intent.category.DEFAULT" />  
    <category android:name="android.intent.category.BROWSABLE" />  
    <data android:scheme="myapp" android:host="jp.app" android:pathPrefix="/openwith"/>  
</intent-filter> 
复制代码

这样的话,没有问题。

 

接下来在Activity中需要取值的地方添加以下代码,我是直接写在OnCreate函数里的:


Intent i_getvalue = getIntent();  
String action = i_getvalue.getAction();  
  
if(Intent.ACTION_VIEW.equals(action)){  
    Uri uri = i_getvalue.getData();  
    if(uri != null){  
        String name = uri.getQueryParameter("name");  
        String age= uri.getQueryParameter("age");  
    }  
}

这样就能获取到URL传递过来的值了。

——————————————————————————————————我是分割线————————————————————————————————————


代码copy完了,是不是很惊奇的发现用浏览器输入

myapp://jp.app/openwith?name=zhangsan&age=26

是不是404,打不开?

楼主你这不是骗人么!楼主你个混蛋啊。

客官,稍安勿躁啊,你看看你用的浏览器是什么?UC,猎豹,欧朋?放弃吧,试试系统自带浏览器或者谷歌浏览器吧。肯定能成功的,不能成功的话再来坑我。哈哈。


——————————————————————————————————我是分割线————————————————————————————————————

突然觉得好悲哀,好不容易get了这个技能,却不能被第三方浏览器使用。在这个android浏览器大部分被第三方占据着的时代不得不说是个悲剧啊。


接下来还是说说为什么第三方浏览器不能成功吧。首先,我发现的是UC浏览器,如果你使用了自己的scheme,而不是http的话,uc会默认在你的scheme前面添加http://。这太坑爹了。其他浏览器没看是不是同样的情况。发现这个问题后我就试着把自己的scheme换成http。然后满怀期待的又跑了一遍,结果还是坑爹了。所以我想会不会是第三方浏览器对url做了处理。到这里,我也无可奈何了。我测试了UC,猎豹,欧朋,这3个都不支持。系统自带的和谷歌浏览器是支持的。


最后再补充个线索吧,在浏览器里搜索百度应用。进了他们的页面后,他们是可以实现在各种浏览器启动已经安装好的本地app的。看到这个后我就看了下他们页面的源码。



在这里他们页面添加了个data-sentintent的标签,看到这里,应该能确定第三方浏览器应该是默认都不支持发intent的,只能自己起一个。根据前端说,这个标签应该是自定义的。我们前端看源码的时候发现是这样的



所以最后的结果应该是百度这边是起了个端口,然后在应用里启用了一个服务,来监听这个端口,来获取这个intent。大概就这个思路了。不过楼主没有实际去操作。项目时间紧,太麻烦了。对了,百度这个是有集成他们inapp这个sdk的。

再附上stackoverflow两个相关链接:http://stackoverflow.com/questions/3469908/make-a-link-in-the-android-browser-start-up-my-app

http://stackoverflow.com/questions/2958701/launch-custom-android-application-from-android-browser

<think>嗯,用户问的是如何在UniApp的H5网页中通过微信开放平台实现微信登录的完整流程。首先,我需要回忆一下微信登录的基本流程。通常,微信登录需要获取用户的授权,拿到code,然后用code去换取access_token和openid。不过,用户提到的是UniApp的H5环境,这和普通的网页微信登录可能有些不同。 根据用户提供的三个引用,引用[3]提到了globalData中的appid和baseLoginUrl,这说明在UniApp中需要配置微信开放平台的AppID,且有一个后端接口来处理登录。引用[1]提到H5项目需要微信授权获取code,进而拿到openid,这和标准的OAuth2.0流程一致。引用[2]虽然讲的是微信分享,但可能涉及到配置JS接口安全域名等步骤,这可能和登录流程有共通之处。 首先,用户需要在微信开放平台注册应用,获取AppID和AppSecret,设置授权域名。这一步是关键,因为微信的安全策略要求授权页面必须是在已备案的域名下。然后,UniApp前端需要生成授权URL,跳转到微信的授权页面,用户同意后,微信会重定向回指定的redirect_uri,附带code参数。 接下来,后端需要用这个code、AppID和AppSecret向微信服务器请求access_token和openid。这里需要注意,前端不能直接处理这些敏感信息,必须通过后端来交换,避免AppSecret泄露。获取到openid后,后端可以生成自定义的用户标识,比如token,返回给前端,完成登录流程。 另外,UniApp在H5环境下可能需要处理微信的JS SDK,尤其是在微信内置浏览器中运行时。可能需要引入微信的JS文件,通过wx.config进行配置,确保授权流程正常进行。但根据引用[3]中的代码,似乎已经有globalData存储了相关配置,所以可能需要在App.vue中设置这些参数。 用户可能遇到的问题包括授权域名未正确配置,导致重定向失败;或者前后端接口对接不正确,无法正确传递code参数。此外,跨域问题也可能出现,需要后端正确设置CORS头部。 总结流程应该是:配置微信开放平台 -> 前端生成授权链接跳转 -> 用户授权后获取code -> 后端用code换取openid -> 后端返回用户token给前端 -> 前端完成登录状态管理。需要确保每一步的参数正确,尤其是redirect_uri必须和微信开放平台中配置的一致,否则会报错。 另外,考虑到UniApp的跨平台特性,可能需要区分不同环境,比如在微信内打开和其他浏览器打开,处理方式可能不同。但根据用户的问题,主要集中在H5网页通过微信开放平台实现登录,所以应重点放在标准的H5微信登录流程上。 最后,生成的相关问题需要围绕可能遇到的难点,比如配置问题、跨域处理、安全性等,帮助用户进一步理解和解决问题。</think>### UniApp H5网页微信登录实现流程 #### 一、前期准备 1. **注册微信开放平台账号** - 需完成企业资质认证(个人开发者无法申请)[^1] - 创建网站应用获取`AppID`和`AppSecret` - 在**开发设置**中配置授权回调域名(如`www.yourdomain.com`) 2. **UniApp工程配置** 在`App.vue`的`globalData`配置基础参数: ```javascript globalData: { wxAppId: "wxbf34f4f4*************", baseLoginUrl: "https://api.yourdomain.com/wechat/login" } ``` #### 二、核心实现步骤 1. **前端授权跳转** 构造微信授权链接跳转: ```javascript const authUrl = `https://open.weixin.qq.com/connect/qrconnect?appid=${appid}&redirect_uri=${encodeURIComponent(redirect_uri)}&response_type=code&scope=snsapi_login&state=STATE#wechat_redirect` window.location.href = authUrl ``` > 参数说明:`redirect_uri`需与开放平台配置一致,`scope`使用`snsapi_login`获取登录许可 2. **获取授权码(code)** 微信回调到指定地址后解析code: ```javascript onLoad() { const urlParams = new URLSearchParams(window.location.search) const code = urlParams.get('code') if(code) this.sendCodeToServer(code) } ``` 3. **后端凭证交换** 服务器端发起API请求(需使用HTTPS): ```bash GET https://api.weixin.qq.com/sns/oauth2/access_token?appid=APPID&secret=SECRET&code=CODE&grant_type=authorization_code ``` 返回数据结构: ```json { "access_token": "ACCESS_TOKEN", "expires_in": 7200, "refresh_token": "REFRESH_TOKEN", "openid": "OPENID", "scope": "snsapi_login" } ``` #### 三、安全增强措施 1. **防CSRF攻击** - 在state参数中加入随机token验证请求来源 - 设置access_token有效期(建议2小时内) 2. **用户信息获取** 通过`access_token`获取用户完整信息: ```bash GET https://api.weixin.qq.com/sns/userinfo?access_token=ACCESS_TOKEN&openid=OPENID&lang=zh_CN ``` > 需用户授权`snsapi_userinfo`作用域 #### 四、部署注意事项 1. **域名备案要求** 所有涉及微信API调用的域名必须完成ICP备案 2. **跨域解决方案** 配置Nginx反向代理: ```nginx location /wechat/ { proxy_pass https://api.yourdomain.com/; add_header Access-Control-Allow-Origin *; } ``` 3. **移动端适配** 通过`uni.getSystemInfo`检测运行环境: ```javascript uni.getSystemInfo({ success: function(res) { if(res.platform === 'ios' || res.platform === 'android'){ // 调用原生登录组件 } } }) ``` #### 五、常见问题排查 1. **授权页面白屏** 检查`redirect_uri`编码是否正确,需使用`encodeURIComponent` 2. **invalid code错误** 确保code未重复使用(每个code有效期5分钟) 3. **跨域请求被拦截** 验证响应头是否包含: ```http Access-Control-Allow-Credentials: true Access-Control-Allow-Origin: https://www.yourdomain.com ```
评论 12
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值