扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
这篇文章将为大家详细讲解有关怎么在Android中利用webView包安装WebAPP,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。
创新互联建站是一家专注于网站设计制作、成都做网站与策划设计,濂溪网站建设哪家好?创新互联建站做网站,专注于网站建设十年,网设计领域的专业建站公司;建站业务涵盖:濂溪等地区。濂溪做网站价格咨询:13518219792
首先在 app/src/main/AndroidManifest.xml 里添加权限:
注意本文代码中的"..."都代表省略的代码
第一个是允许访问网络连接;
第二个是允许程序写入外部存储,如SD卡上写文件;
第三个是允许应用程序从外部存储读取;
再是 app/src/main/res/layout/activity_main.xml 添加:
MainActivety.java:
private WebView webview;
//...
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
WebView.setWebContentsDebuggingEnabled(true);
}
webview = findViewById(R.id.local_webview);
WebSettings settings = webview.getSettings();
loading = findViewById(R.id.loadView);
settings.setJavaScriptEnabled(true);//必须
settings.setCacheMode(WebSettings.LOAD_DEFAULT);//关闭webview中缓存
settings.setRenderPriority(WebSettings.RenderPriority.HIGH);//提高渲染的优先级
settings.setUseWideViewPort(true);//WebView是否支持HTML的“viewport”标签或者使用wide viewport。
settings.setAllowContentAccess(true);//是否允许在WebView中访问内容URL
settings.setBuiltInZoomControls(true);//是否使用其内置的变焦机制
settings.setJavaScriptCanOpenWindowsAutomatically(true);//是否允许自动打开弹窗
settings.setDomStorageEnabled(true);//是否开启DOM存储API权限
webview.loadUrl("http://www.baidu.com");
webview.setWebChromeClient(new WebChromeClient() {
@Override
public void onProgressChanged(WebView view, int newProgress) {
Log.d("加载", "on page progress changed and progress is " + newProgress);
//...
}
}
webview.setWebViewClient(new WebViewClient() {
@Override
public void onReceivedError(WebView view, int errorCode, String description, String failingUrl) {
super.onReceivedError(view, errorCode, description, failingUrl);
// 加载网页失败时处理 如:
view.loadDataWithBaseURL(null,
"页面加载失败,请确认网络是否连接",
"text/html",
"utf-8",
null);
}
@Override
public void onPageFinished(WebView view, String url) {
if (!webview.getSettings().getLoadsImagesAutomatically()) {
webview.getSettings().setLoadsImagesAutomatically(true);
}
Log.d("加载", "end ");
}
});
}
这是一个比较简单的 webView 例子,这里有几点需要说下:
关于WebSettings:
1.1 需要运行 js 的网页都需要此设置:setJavaScriptEnabled
1.2 关于setCacheMode,尽量不要设置 LOAD_CACHE_ONLY 该值,设置这个值会在 webkit 类型浏览器对短时间内的 ajax 访问产生Provisional headers are shown问题;
1.3 关于 AllowFileAccess 一般默认值就好,都开了会有安全上的问题;
1.4 WebSettings 的设置内容很多,如果想看更多的话可以进行搜索;
1.5 暂未发现其他问题,待定;
setWebChromeClient 和 setWebViewClient:
2.1 这2个都是 webView 的配置属性,不过在功能上有所区分:
WebViewClient帮助WebView处理各种通知、请求事件的
WebChromeClient是辅助WebView处理Javascript的对话框,网站图标,网站title,加载进度等;
js 里面使用 alert 和 confirm 需要在WebChromeClient里面进行修改,提供对话框;
2.2 关于onPageFinished:
如果你的路由里面是异步加载的,如resolve => require(['./routers/XXX'], resolve),那么就要注意,在每进入异步加载的页面后,都会触发此函数,所以如果你需要在页面加载后只执行一次的代码的话,就放在 setWebChromeClient 的 onProgressChanged 里进行判断进度是否为100时再执行;
webview.loadUrl():
3.1 这里的加载地址可以有2种,1是 webview.loadUrl("file:///android_asset/index.html"); 访问本地文件,2是webview.loadUrl("http://www.baidu.com");访问网络文件;
各有其优点:若访问网络文件,更新服务器内容即可使用最新的功能;而访问本地资源的话,加载的速度会快一点,而且即使断网也可以看到默认的东西;
刚刚有说到,进入 APP 的快慢问题,这里我是调用了一个加载的动画来完成的:
我这边选择的动画时这个:点击查看
而在 Android studio 里调用插件的方式十分简单:
打开根目录下的 build.gradle,在 allprojects 的 repositories 里添加:
maven { url "https://jitpack.io" }
然后打开 app/build.gradle,在 dependencies 里添加:
compile 'com.github.zzz40500:android-shapeLoadingView:1.0.3.2'
这时候先 build 项目,再在 src/main/res/layout/activity_main.xml 里添加代码:
...
这时候可以,这样 loading 动画就添加好了,后面只需要在 Java 代码里显示和隐藏就行了;
最关键的html:input[type="file"]问题,这个问题才是最大的问题,先说好
如果你的webApp不需要上传文件或者不在意Android 4.2-4.4 版本的话,可以用该方法
MainActivity.java:
先创建变量
public static final int INPUT_FILE_REQUEST_CODE = 1; private ValueCallbackmUploadMessage; private final static int FILECHOOSER_RESULTCODE = 2; private ValueCallback mFilePathCallback; private String mCameraPhotoPath;
在setWebChromeClient里添加代码:
public void openFileChooser(ValueCallback uploadMsg, String acceptType) { Log.d("选择", "3.0+"); mUploadMessage = uploadMsg; Intent i = new Intent(Intent.ACTION_GET_CONTENT); i.addCategory(Intent.CATEGORY_OPENABLE); i.setType("image/*"); MainActivity.this.startActivityForResult( Intent.createChooser(i, "Image Chooser"), FILECHOOSER_RESULTCODE); } //Android 5.0 public boolean onShowFileChooser( WebView webView, ValueCallbackfilePathCallback, WebChromeClient.FileChooserParams fileChooserParams) { Log.d("选择", "5.0+"); if (mFilePathCallback != null) { mFilePathCallback.onReceiveValue(null); } mFilePathCallback = filePathCallback; Intent takePictureIntent = new Intent(MediaStore.ACTION_IMAGE_CAPTURE); if (takePictureIntent.resolveActivity(getPackageManager()) != null) { // Create the File where the photo should go File photoFile = null; try { //设置MediaStore.EXTRA_OUTPUT路径,相机拍照写入的全路径 photoFile = createImageFile(); takePictureIntent.putExtra("PhotoPath", mCameraPhotoPath); } catch (Exception ex) { // Error occurred while creating the File Log.e("WebViewSetting", "Unable to create Image File", ex); } // Continue only if the File was successfully created if (photoFile != null) { mCameraPhotoPath = "file:" + photoFile.getAbsolutePath(); takePictureIntent.putExtra(MediaStore.EXTRA_OUTPUT, Uri.fromFile(photoFile)); System.out.println(mCameraPhotoPath); } else { takePictureIntent = null; } } Intent contentSelectionIntent = new Intent(Intent.ACTION_GET_CONTENT); contentSelectionIntent.addCategory(Intent.CATEGORY_OPENABLE); contentSelectionIntent.setType("image/*"); Intent[] intentArray; if (takePictureIntent != null) { intentArray = new Intent[]{takePictureIntent}; System.out.println(takePictureIntent); } else { intentArray = new Intent[0]; } Intent chooserIntent = new Intent(Intent.ACTION_CHOOSER); chooserIntent.putExtra(Intent.EXTRA_INTENT, contentSelectionIntent); chooserIntent.putExtra(Intent.EXTRA_TITLE, "Image Chooser"); chooserIntent.putExtra(Intent.EXTRA_INITIAL_INTENTS, intentArray); startActivityForResult(chooserIntent, INPUT_FILE_REQUEST_CODE); return true; } // For Android 3.0+ public void openFileChooser(ValueCallback uploadMsg) { Log.d("选择", "3.0+"); mUploadMessage = uploadMsg; Intent i = new Intent(Intent.ACTION_GET_CONTENT); i.addCategory(Intent.CATEGORY_OPENABLE); i.setType("image/*"); MainActivity.this.startActivityForResult(Intent.createChooser(i, "Image Chooser"), FILECHOOSER_RESULTCODE); } //For Android 4.1 public void openFileChooser(ValueCallback uploadMsg, String acceptType, String capture) { Log.d("选择", "4+"); mUploadMessage = uploadMsg; Intent i = new Intent(Intent.ACTION_GET_CONTENT); i.addCategory(Intent.CATEGORY_OPENABLE); i.setType("image/*"); MainActivity.this.startActivityForResult(Intent.createChooser(i, "Image Chooser"), MainActivity.FILECHOOSER_RESULTCODE); }
在主类中添加:
@SuppressLint("SdCardPath") private File createImageFile() { File file=new File(Environment.getExternalStorageDirectory()+"/","tmp.png"); mCameraPhotoPath=file.getAbsolutePath(); if(!file.exists()) { try { file.createNewFile(); } catch (IOException e) { e.printStackTrace(); } } return file; } @Override public void onActivityResult(int requestCode, int resultCode, Intent data) { Log.d("result", "show"); if (requestCode == FILECHOOSER_RESULTCODE) { if (null == mUploadMessage) return; Uri result = data == null || resultCode != RESULT_OK ? null : data.getData(); if (result != null) { String imagePath = ImageFilePath.getPath(this, result); if (!TextUtils.isEmpty(imagePath)) { result = Uri.parse("file:///" + imagePath); } } mUploadMessage.onReceiveValue(result); mUploadMessage = null; } else if (requestCode == INPUT_FILE_REQUEST_CODE && mFilePathCallback != null) { // 5.0的回调 Uri[] results = null; // Check that the response is a good one if (resultCode == Activity.RESULT_OK) { if (data == null && !TextUtils.isEmpty(data.getDataString())) { // If there is not data, then we may have taken a photo if (mCameraPhotoPath != null) { results = new Uri[]{Uri.parse(mCameraPhotoPath)}; } } else { String dataString = data.getDataString(); if (dataString != null) { results = new Uri[]{Uri.parse(dataString)}; } } } mFilePathCallback.onReceiveValue(results); mFilePathCallback = null; } else { super.onActivityResult(requestCode, resultCode, data); return; } }
关于怎么在Android中利用webView包安装WebAPP就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流