混合开发 - 原生 js

最新推荐文章于 2024-03-30 23:15:57 发布

weixin_45554114

最新推荐文章于 2024-03-30 23:15:57 发布

阅读量314

点赞数

本文链接：https://blog.csdn.net/weixin_45554114/article/details/104306793

版权

一、原生语言：

苹果手机：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

— 链接本组件内跳转