移动端开发调试入门

目录

1. 基础概念
2. 原理
3. 调试技巧

一、基础概念

1 WebView

（1）定义

WebView，直译是网页视图，是一个基于 webkit 内核的，用于显示网页的控件，具备渲染 Web 页面的功能。 Android 的 Webview 在低版本和高版本采用了不同的 webkit 版本内核，4.4 后直接使用了 Chrome。
WebView 可以内嵌在移动端，实现前端的混合式开发，大多数混合式开发框架都是基于 WebView 模式进行二次开发的，比如，uni-app、Hybrid app 等。

（2）作用

• 显示和渲染 Web 页面
• 直接使用 html 文件（网络上或本地 assets 中）作布局
• 可和 JavaScript 交互调用
• 除了具有一般 View 的属性和设置外，还可以对 url 请求、页面加载、渲染、页面交互进行强大的处理。

2 JSBridge

（1）问题

近些年，移动端普及化越来越高，开发过程中选用 Native 还是 H5 一直是热门话题。Native 和 H5 都有着各自的优缺点，为了满足业务的需要，公司实际项目的开发过程中往往会融合两者进行 Hybrid 开发。Native 和 H5 分处两地，看起来无法联系，那么如何才能让双方协同实现功能呢？

（2）定义

JSBridge 是一种 JS 实现的 Bridge，连接着桥两端的 Native 和 H5。它在 APP 内方便地让 Native 调用 JS，JS 调用 Native ，是双向通信的通道。 JSBridge 主要提供了 JS 调用 Native 代码的能力，实现原生功能如查看本地相册、打开摄像头、指纹支付等。

（3）作用

在开发中，为了追求开发的效率以及移植的便利性，一些展示性强的页面我们会偏向于使用 H5 来完成，功能性强的页面我们会偏向于使用 Native 来完成，而一旦使用了 H5，为了在 H5 中尽可能的得到 Native 的体验，我们 Native 层需要暴露一些方法给 JS 调用，比如，弹 Toast 提醒，弹 Dialog，分享等等，有时候甚至把 H5 的网络请求放着 Native 去完成。

JSBridge 就像其名称中的『Bridge』的意义一样，是 Native 和非 Native 之间的桥梁，它的核心是 构建 Native 和非 Native 间消息通信的通道，而且是双向通信的通道。

• JS 向 Native 发送消息：调用相关功能、通知 Native 当前 JS 的相关状态等。
• Native 向 JS 发送消息：回溯调用结果、消息推送、通知 JS 当前 Native 的状态等。

（4）双向通信

a. JS 调用 Native

主要有 拦截 URL Scheme 、重写 prompt 、注入 API 等方法。