网页唤起app,并传值到app中使用的全过程 android篇
andriod从分享的网页中唤起app,并传值到app中进行使用
项目背景
我是个搞前端开发的,这个项目用到了web前端和移动客户端的知识,说起来比较复杂,功能大概是在app里面分享链接出去,在此链接中带好需要的参数,别人点击进链接获得这个参数后,唤起手机里安装的这个app,进入app之后拿到这个参数进行使用.
emmmmm…主要是获得参数和传参,就酱.
对了,还是老实交代一下项目环境.项目的是用cocos2d-x引擎,客户端语言是lua,其他需要用的语言就是html+css+js
下面是步骤:
分为两大步:
一:网页唤起app
-
在AndroidManifest.xml的activity 主入口中加入代码
此处的scheme和host是调用app的关键
-
写index.html页面,这个页面就是分享出去的链接页面,需要带参数的,页面的复杂程度根据自己的情况来定,我只描述该功能使用的地方
在head位置里加入
- 用js去获取参数以及唤起app
先拿到url的参数
/*从url中获取参数*/
function getUrlParam(key){
// 获取参数
var url = window.location.search;
// 正则筛选地址栏
var reg = new RegExp("(^|&)"+ key +"=([^&]*)(&|$)");
// 匹配目标参数
var result = url.substr(1).match(reg);
//返回参数值
return result ? decodeURIComponent(result[2]) : null;
}
//使用
var roomid=getUrlParam('roomid');
这里判断一下,如果是安卓手机并且在微信里面打开的话,就提示一下打开浏览器访问(这个地方有个坑就是最好使用手机自带浏览器),我加了定时器,如果超过时间没有响应的话就是没有检测到手机安卓了这个app,提示让他下载,如果检测到了就执行 ifr.setAttribute(‘src’,‘userapp://user.app/openwith?roomid=’+roomid+’&name=name’); 这里的userapp和user.app就是上面在AndroidManifest.xml定义的,一定要保证是一样的.这样就在iframe里面打开app
//这里先定义好需要用到的东西
var ua = window.navigator.userAgent.toLowerCase();
var u = navigator.userAgent;
var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1;
var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
var isWeixin = ua.match(/MicroMessenger/i) == 'micromessenger';
var ifr = document.createElement('iframe');
var hasApp = true;
$(function(){
//判断本地有无app
if(isAndroid && !isWeixin){
console.log('isAndroid');
var config = {
timeout1: 300,
timeout2: 600,
timeout_d: 1000
};
setTimeout(function () {
clears();
},config.timeout_d);
var startTime = +Date.now();
ifr.setAttribute('id', 'frm');
ifr.setAttribute('src','userapp://user.app/openwith?roomid='+roomid);
document.body.appendChild(ifr); //第一种方式
t = setTimeout(function () {
t1 = setTimeout(function () {
endTime = +Date.now();
if (!startTime || endTime - startTime < config.timeout1 + config.timeout2 + 200) {
hasApp = false;
//alert('未检测到本地APP,请下载');
}
}, config.timeout2);
}, config.timeout1);
window.onblur = function () {
if (endTime > 0) clears();
};
}
})
function clears() {
clearTimeout(t);
clearTimeout(t1);
if (document.body.getElementsByTagName('iframe').length > 0)
document.body.removeChild(ifr);
}
上面的是打开页面后自动检测和唤起,另一个方法是手动唤起(适合在ios中用)
//触发点击事件
$('#add').click(function() {
opens()
})
function opens(){
if((isAndroid&&isWeixin)){
$('#isphone').html("在浏览器中打开");
}else{
if(!hasApp){
//同样没检测到app,去下载
window.location='你的app链接';
}else{
if((isiOS&&isWeixin)) {
//微信中添加遮罩层
$('#isphone').html("在safari中打开");
}else if(!isWeixin&&!isAndroid){
console.log('isiOS');
window.location='userapp://user.app/openwith?roomid='+roomid;
}
}
}
}
嗯,第一步就差不多了
二.唤起app后,拿到参数传给app并使用
- 在AppActivity.Java中添加以下内容
static private String RoomIDOnShare = "";//声名变量
- 在onCreate函数中添加代码拿到url中的参数
Intent i_getvalue = getIntent();
String action = i_getvalue.getAction();
if(Intent.ACTION_VIEW.equals(action)){
Uri uri = i_getvalue.getData();
if(uri != null){
String roomid = uri.getQueryParameter("roomid");
System.out.println("==========获取roomid============");
RoomIDOnShare=roomid;
}
}
3.新建函数以便调用,必须是静态的
public static String getRoomIdOnShare() {
String idTemp = RoomIDOnShare;
RoomIDOnShare = "";
System.out.println(idTemp);
return idTemp;
}
- 在lua中定义,调用java的函数
function User:OnRoomIDAndroid()
print('User:OnRoomIDAndroid')
local argsJson = nil
local sigs = "()Ljava/lang/String;"
local className = "com/xxx/xxx/AppActivity"
local luaj = require("cocos.cocos2d.luaj")
local ok,ret = luaj.callStaticMethod(className, "getRoomIdOnShare", nil, sigs)
if not ok then
print('==== luaj error ==== : ', ret)
else
if ret == nil or #ret == 0 then
return
end
local str = tostring(ret)
print('str:', str)
return str --这里就是获得到的房间号了
end
end
在其他地方调用
local app = require("app.App"):instance()
local user = app.session.user;
local rid=user:OnRoomIDAndroid(); --最终拿到的参数
这样就拿到参数可以在app里随便使用了,我的做法就是拿到房间号后直接加入游戏房间,嘻嘻,谢谢浏览!