WebView页面调用原生Android页面
1. 权限请求
所有页面的功能均自动根据情况请求权限，无需处理。
2. 文件下载
和PC端h5页面一样，正常链接下载地址即可
<a href="http://58.216.96.29/imtt.dd.qq.com/16891/myapp/channel_79755048_1000047_f71e9dd6885466b57bc4c26a7beec994.apk?mkey=5d5a299e72de9a11&f=0c59&hsr=5848&cip=114.222.188.228&proto=http">下载应用宝</a>
3. 上传文件
- 图片
<div style="margin: 0 auto;width: 80%;height: 80%;border:3px solid #41a0f2;margin-top: 50px;overflow: scroll;">
<!-- 展示图片位置 -->
<img id="preview" style="display: block;margin: 0 auto;max-width: 60%;margin-top: 20px" />
<p class="fontBlue ta-c mt5" style="text-align: center;">上传身份证</p>
<a href="javascript:;" class="file" style="display: block;margin: 0 auto;width: 50%;height: 30px;text-align: center;line-height: 30px;margin-bottom: 20px">选择文件
<form id="form">
<input id="file_upload" type="file" name="" id="" accept="*/*," capture="camera" multiple="multiple">
</form>
</a>
</div>
$(function() {
form.reset(); //清除浏览器记录的上次记录
var file;
$(form).on("change", "#file_upload", function() {
var $file = $(this);
var fileObj = $file[0];
var windowURL = window.URL || window.webkitURL;
var dataURL;
var $img = $("#preview");
if (fileObj && fileObj.files && fileObj.files[0]) {
dataURL = windowURL.createObjectURL(fileObj.files[0]);
$img.attr('src', dataURL);
} else {
console.log("else upload");
dataURL = $file.val();
var imgObj = document.getElementById("preview");
// 两个坑:
// 1、在设置filter属性时，元素必须已经存在在DOM树中，动态创建的Node，也需要在设置属性前加入到DOM中，先设置属性在加入，无效；
// 2、src属性需要像下面的方式添加，上面的两种方式添加，无效；
imgObj.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
imgObj.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = dataURL;
}
//输出选中结果
console.log(this.value);
alert(this.value);
//每次选中都保存旧元素，并使用新的控件替换
$(this).clone().replaceAll(file = this);
}).submit(function() {
//提交时把之前保存的旧元素替换回去
$("#file_upload").replaceWith(file);
});
});
- 视频
<div style="margin: 0 auto;width: 80%;height: 30%;border:3px solid #41a0f2;margin-top: 50px;overflow: scroll;">
<div id="preview_path" class="fontBlue ta-c mt5" style="text-align: center;color:#000000;">暂无视屏</div>
<p class="fontBlue ta-c mt5" style="text-align: center;">上传视频</p>
<a href="javascript:;" class="file" style="display: block;margin: 0 auto;width: 50%;height: 30px;text-align: center;line-height: 30px;margin-bottom: 20px">选择文件
<form id="form2">
<input id="file_upload2" type="file" name="" accept="video/*" capture="camera" multiple="multiple">
</form>
</a>
</div>
$(function() {
form.reset(); //清除浏览器记录的上次记录
$(form2).on("change", "#file_upload2", function() {
alert(this.value);
document.getElementById("preview_path").innerText=this.value;
}).submit(function() {
//提交时把之前保存的旧元素替换回去
$("#file_upload2").replaceWith(file);
});
});
- js通信文件上传
<div style="margin: 0 auto;width: 80%;height: 80%;border:3px solid #41a0f2;margin-top: 50px;overflow:scroll;">
<img id="preview" src="./id.png" style="display: block;margin: 0 auto;max-width: 80%;margin-top: 20px;" />
<p class="fontBlue ta-c mt5" style="text-align: center;">上传身份证</p>
<div id="file_upload" href="javascript:;" class="file" style="display: block;margin: 0 auto;width: 50%;height: 25px;text-align: center;line-height: 25px;margin-bottom: 20px">
选择文件
</div>
</div>
bindEvent(window, 'load', function() {
var ip = document.getElementById("file_upload");
bindEvent(ip, 'click', function(e) {
// alert("我是" + this + "元素, 你点击了我!");
if (window.agentWeb != null && typeof(window.agentWeb) != "undefined") {
// uploadFile是Android后端定义的方法
// 在此方法中打开文件选择界面
// 调用成功后，回调uploadFileResult(objs)方法
window.agentWeb.uploadFile();
//alert("Js 调 Android 方法成功");
} else {
alert(typeof(window.agentWeb));
}
});
});
//这里返回来的是一个 Json 数组 //
function uploadFileResult(objs) {
// console.log(message);
//alert(objs);
//alert("Android 调 Js 方法");
if (objs == null || typeof(objs) == "undefined" || objs.length == 0) {
//alert("");
} else {
var img = document.getElementById("preview");
//Android回传的数据
/*for(var i=0;i<objs.length;i++){ //
img.src="data:image/png;base64," + objs[i].fileBase64*/
if (objs[0] == null || objs[0] == 'undefined' || objs[0] == '' || objs[0].fileBase64 == null || objs[0].fileBase64 == 'undefined') {
} else {
img.src = "data:image/png;base64," + objs[0].fileBase64;
}
}
}
- 将input选择的图片显示在浏览器上
// sourceId:文件源
// targetId:文件要显示的位置
function preImg(sourceId, targetId) {
var url = getFileUrl(sourceId); //调用getFileUrl
console.log(url);
var imgPre = document.getElementById(targetId);
imgPre.src = url;
}
// 从 file 获取文件url
// ie firefox chrome 有所不同
function getFileUrl(sourceId) {
var url;
console.log(navigator.userAgent);
if (navigator.userAgent.indexOf("MSIE") >= 1) {
// IE
url = document.getElementById(sourceId).value;
} else if (navigator.userAgent.indexOf("Firefox") > 0) {
// Firefox
url = window.URL.createObjectURL(document.getElementById(sourceId).files.item(0));
} else if (navigator.userAgent.indexOf("Chrome") > 0) {
// Chrome
url = window.URL.createObjectURL(document.getElementById(sourceId).files.item(0));
}
return url;
}
4. JS 与Android交互
//callAndroid 是安卓后端写好的方法
function sendHelloToAndroid() {
// body...
//console.log("call android")
if(window.android!=null&&typeof(window.android)!="undefined"){
window.android.callAndroid("你好，Android! ");
}else{
alert(typeof(window.android));
}
}
// 安卓回调的方法 如下：
function callByAndroid(){
console.log("callByAndroid")
alert("Js收到消息");
//showElement("Js收到消息-->无参方法callByAndroid被调用");
}
function callByAndroidParam(msg1){
console.log("callByAndroid_param")
alert("Js收到消息："+msg1);
//showElement("Js收到消息-->方法callByAndroidParam被调用,参数:"+msg1);
}
function callByAndroidMoreParams(objs,msg2,msg3){
console.log("callByAndroid_moreparam")
alert("Js收到消息："+"id:"+objs.id.toString()+" name:"+objs.name+" age:"+objs.age.toString()+msg2+msg3);
//showElement("Js收到消息-->方法callByAndroidMoreParam被调用 , 参数1:"+objs+" 参数2:"+msg2+" 参数3:"+msg3);
}
5. 基础应用交互
<a href="tel:10086">电话</a>
<a href="sms:10086">短信</a>
<a href="mailto:xiaozhongcen@gmail.com">邮件</a>
<a href="agentweb://sample.just.com?url=https://m.jd.com/">打开应用内部页面</a>
<a href="weixin://">打开微信</a>
6. 定位
和PC端h5页面一样，正常引用地图api并在页面上调用定位方法即可
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<!-- 页面引用地图api -->
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=申请的key"></script>
<title>浏览器定位</title>
</head>
<body>
</body>
</html>
<script type="text/javascript">
// 地图定位功能，以百度为例
// 需注意，高德地图不支持 http,如需定位，要将网站升级为https访问
var geolocation = new BMap.Geolocation();
geolocation.getCurrentPosition(function(r){
if(this.getStatus() == BMAP_STATUS_SUCCESS){
alert('您的位置：'+r.point.lng+','+r.point.lat);
}
else {
alert('failed'+this.getStatus());
}
},{enableHighAccuracy: true})
</script>
网友评论