一、原生语言:
苹果手机:ios系统,由swift和c++/object-c语言编写,后缀名为 ipa(ios开发的安装包的后缀名) swift语言是一种开源的语言
安卓手机:android系统,由java(android)语言编写,后缀名为apk
开源的
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FexkZS6h-1581643539945)(https://note.youdao.com/yws/res/168/3D4DB0311DFF4C88B82125DDC0EC3CAB)]
二、混合开发:
原生语言开发+js的开发
缘由:
js无法调动系统的原生功能(拍照、短信、打电话、通讯录),但是原生(android、ios)可以
原生有很大的适配问题(特别是android),js可以很好的解决这个问题
术语:
webapp m站 touch端项目 手机网站 ---- 纯js写的
nativeapp – 纯android/ios编写的程序
hybridapp ---- js + android/ios写的
三、android + js的开发模式
准备工具:
java jdk
链接:https://pan.baidu.com/s/1_LsDWTLTa7Hnj3PtRFzkGg 提取码:b2ke
**jdk配置文档 **
https://jingyan.baidu.com/article/6dad5075d1dc40a123e36ea3.html
**android-studio **
intellij编辑器插件扩展而来(intellij在13-14年之前特别火爆,直到现在还被很多人青睐)
链接:https://pan.baidu.com/s/1bFXhgpC2XNJqLdZsmyBLtg 提取码:rzv6
**安装教程 **
https://www.runoob.com/android/android-studio-install.html
四、代码分析
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0QQvAnCR-1581643539946)(https://note.youdao.com/yws/res/170/D7CA3751A13040B68C0649003C24935D)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rYYi9F9Z-1581643539950)(https://note.youdao.com/yws/res/175/15C24BD58BF343C8A9487382DDFD10F9)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-IZLvHr5J-1581643539951)(https://note.youdao.com/yws/res/171/18E5CF51A4B24C69A22350B4099B2666)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-suzUBobb-1581643539954)(https://note.youdao.com/yws/res/176/5389F6FFE91640749B243E2365182FAB)]
代码展示为java文件夹下为控制文件,相当于js文件,res文件相当于资源文件以及布局文件
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0ufgLOWs-1581643539961)(https://note.youdao.com/yws/res/174/1220A46B425F4BB8B5B8450F814A6865)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Ad8smW9i-1581643539965)(https://note.youdao.com/yws/res/173/045AA6AB8EA24DD38C90938249C3541A)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NnsTTCS8-1581643539966)(https://note.youdao.com/yws/res/167/AA3C550C95B04D2BACA286C90A982C17)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-aA5XCr42-1581643539969)(https://note.youdao.com/yws/res/166/1FB96B29213E46F782AF44FA00A9DE43)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9XltUWIK-1581643539970)(https://note.youdao.com/yws/res/169/ACBBD8B5A4F04A4289925443464547FC)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Czv1K1lU-1581643539973)(https://note.youdao.com/yws/res/172/D72CFA28AD054357BD7FD42B664413F9)]
如需需要给页面添加一个网页
wv.loadUrl("file:///android_asset/index.html"); ///加载本地的页面 ----- 代码在手机,更新需要下载替换
wv.loadUrl("https://m.jd.com"); /// 加载远程的页面 ----- 更新无需下载
默认的webviw浏览器是纯洁的,不支持js
/**
* webView目前还不具备真正浏览器的功能
*/
webView.getSettings().setJavaScriptEnabled(true);//相当于google浏览器中的内容设置中的js的设置
//默认情况下,点击webview中的链接,会使用Android系统自带的浏览器打开这个链接。
//如果希望点击链接继续在我们自己的Browser中响应,必须覆盖 webview的WebViewClient对象:
//新建两个对象MWebViewClient 和 MWebChromeClient,他们分别继承自WebViewClient和WebChromeClient
/* Android WebView 做为承载网页的载体控件,他在网页显示的过程中会产生一些事件,
并回调给我们的应用程序,以便我们在网页加载过程中做应用程序想处理的事情。
比如说客户端需要显示网页加载的进度、网页加载发生错误等等事件。
WebView提供两个事件回调类给应用层,分别为WebViewClient,WebChromeClient开发者可以继承这两个类,接手相应事件处理。
WebViewClient 主要提供网页加载各个阶段的通知,比如网页开始加载onPageStarted,网页结束加载onPageFinished等;
WebChromeClient主要提供网页加载过程中提供的数据内容,比如返回网页的title,favicon等。*/
//处理页面加载各个阶段
MWebViewClient mWebViewClient = new MWebViewClient(webView, getApplicationContext());
webView.setWebViewClient(mWebViewClient);
//提供网页加载过程中提供的数据内容
MWebChromeClient mWebChromeClient = new MWebChromeClient( getApplicationContext());
webView.setWebChromeClient(mWebChromeClient);
MWebViewClient.java
public class MWebViewClient extends WebViewClient {
private WebView webView;
private Context context;
public MWebViewClient(WebView webView) {
super();
this.webView = webView;
}
public MWebViewClient(WebView webView, Context context) {
super();
this.webView = webView;
this.context = context;
}
@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
webView.loadUrl(url);
return true;
}
@Override
public void onPageStarted(WebView view, String url, Bitmap favicon) {
super.onPageStarted(view, url, favicon);
}
@Override
public void onPageFinished(WebView view, String url) {
super.onPageFinished(view, url);
}
@Override
public void onLoadResource(WebView view, String url) {
super.onLoadResource(view, url);
}
@Override
public void onReceivedSslError(WebView view,
SslErrorHandler handler, SslError error) {
super.onReceivedSslError(view, handler, error);
}
}
MWebChromeClient.java
public class MWebChromeClient extends WebChromeClient {
private Context context;
public MWebChromeClient(Context context) {
super();
this.context = context;
}
@Override
public boolean onJsAlert(WebView view, String url, String message,
JsResult result) {
return super.onJsAlert(view, url, message, result);
}
@Override
public void onReceivedTitle(WebView view, String title) {
super.onReceivedTitle(view, title);
}
@Override
public boolean onJsConfirm(WebView view, String url, String message,
JsResult result) {
return super.onJsConfirm(view, url, message, result);
}
@Override
public boolean onJsPrompt(WebView view, String url, String message,
String defaultValue, JsPromptResult result) {
return super.onJsPrompt(view, url, message, defaultValue, result);
}
}
假设你现在需要调用系统的拍照功能,android工程师会为你提供一个对象和他对应的方法
WebViewTakePhoto为对象,takePhoto为拍照的方法,
webView.addJavascriptInterface(new MJavascriptInterface1(getApplicationContext()), "WebViewTakePhoto");
通过这样的形式将地址传递给前端,testParams方法由前端定义
webView.loadUrl(“javascript:testParams(http://img4.imgtn.bdimg.com/it/u=103061881,2842093305&fm=26&gp=0.jpg’)”);
MJavascriptInterface1
class MJavascriptInterface1{
private Context context;
public MJavascriptInterface1(Context context) {
// TODO Auto-generated constructor stub
this.context = context;
}
@JavascriptInterface
public void takePhoto(){
Toast.makeText(context, "拍照", Toast.LENGTH_SHORT).show();
//android调用拍照功能
// webView.loadUrl("javascript:testParams('http://img4.imgtn.bdimg.com/it/u=103061881,2842093305&fm=26&gp=0.jpg')");
}
}
前端调用拍照方法,在自己的写的触发函数中
window.WebViewTakePhoto.takePhoto()
说:
webview — android、ios的组件 ---- js运行的环境
进行配置
--- 支持js
--- 链接本组件内跳转
根据需求先写页面,假设你的一个按钮需要调用系统的功能,在你的按钮事件中调用由android工程师提供的相对应的对象和其方法即可。
同时前端也会定义一些方法,但是前端自己不调用,android会根据webview的loadUrl方法进行调用,并且传参(根据需求看)
四、IOS + js的混合开发
参考百度网盘观看
链接:https://pan.baidu.com/s/19fZvDn2NWjoLHTa2L09MRQ
提取码:ogvx
— 链接本组件内跳转
根据需求先写页面,假设你的一个按钮需要调用系统的功能,在你的按钮事件中调用由android工程师提供的相对应的对象和其方法即可。
同时前端也会定义一些方法,但是前端自己不调用,android会根据webview的loadUrl方法进行调用,并且传参(根据需求看)
四、IOS + js的混合开发
参考百度网盘观看
链接:https://pan.baidu.com/s/19fZvDn2NWjoLHTa2L09MRQ
提取码:ogvx