前言

其实我们不管是从ios还是安卓都可以看出 原生app能内嵌H5的原因是因为有了webview这个app内嵌浏览器视图,从而使得我们可以开发html然后加载到app中(原理几乎跟pc端请求、加载、渲染是一样的),一般的当我们将h5开发好后就可以有两种方式请求到原生app中,一个是将html代码放到服务器上,一个是放在当前app项目目录中本地请求(一般用于调式)。

因此,可以看到内嵌其实并不难,难就难在要适配、原生与web交互、数据传递等,当然我们也可以使用vue来开发H5界面

一、如何实现交互?

答案是使用第三方插件JsBridge

1.通过js伪造请求---->原生拦截获取数据

2.原生app---->H5界面

原理类似于jsonp  首先在js中定义一个函数并挂载在window下,然后在原生中调用这个函数并传值

js部分:

原生部分:

一个简单的demo

html部分:

原生部分:

一般的 WEB前端工程师是不会写ios 和andirod的,那我们能不能直接使用js就能调用设备的功能呢 比如摄像头  、二维码扫描等,其实是可以的  可以使用以下第三方工具cordova      然后cordova plugins add  对应的插件就可以在js中调用设备功能了

cordova  官方文档:https://cordova.apache.org/docs/en/latest/

原文:https://blog.csdn.net/weixin_41421227/article/details/90473865

H5内嵌原生app的更多相关文章

  1. js通过ua标识判断h5页面是否内嵌在app内

    var userAgent = navigator.userAgent.toLowerCase();//获取UA信息 if(userAgent.indexOf("ezhouxing" ...

  2. h5内嵌微信小程序,调用微信支付功能

    在小程序中不能使用之前在浏览器中配置的支付功能,只能调用小程序专属的api进行支付. 因为需要在现在实现的基础上,再添加在小程序中调用微信支付功能,所以我的思路是这样的 1.在点击支付按钮时,判断是不 ...

  3. ios原生项目内嵌u3d工程

    本文一反常态,目标是把u3d工程以framewWork形式 内嵌原生IOS项目 1.xcode中新建Cocoa Touch FrameWork.取名u3dFrameWork 2.把u3d导出的xcod ...

  4. vue项目内嵌入到app input type=file 坑(文件上传插件)

    w问题描述: 我用vue-cli完成的一个移动端项目,内嵌到app当中,用原生的input type=file 来完成文件上传.在安卓下没有问题但是在苹果手机 上传第二次手机就会发生白屏 并无缘无故跳 ...

  5. 移动端开发利器vConsole.js,app内嵌H5开发时调试用

    vConsole:一个轻量.可拓展.针对手机网页的前端开发者调试面板,主要还是用于内嵌app页面时在手机上进行调试,打印完全和在PC端一样,方便大家找出问题所在. 不说废话直接进入主题,vConsol ...

  6. APP中内嵌H5页面为什么不能下载?

    在APP中内嵌H5页面,若页面上存在下载链接,没有任何反应,为什么呢? 原因是app中内嵌的H5页面是WebView解析的,什么是WebView呢? 在Android手机中内置了一款高性能webkit ...

  7. app内嵌h5分享到小程序分享功能

    if (this.GLOBAL.env !== 'production') { try { window.JSBridge.shareMiniProgramToWx('https://www.lexi ...

  8. android内嵌H5页(webview)如何定位

    一.切换至webview后再定位元素 (1)获取页面上下文 contexts = driver.contexts (2)切换至webview driver.switch_to.context(cont ...

  9. appium常见问题02_android内嵌H5页(webview)如何定位

    现在大多数app都是由原生页面和内嵌H5(即webview)组成,app原生页面直接定位即可,那内嵌H5页面要如何定位呢. 相信大多数人用appium做自动化时都有遇到这个问题,小编总结了下工作中该问 ...

随机推荐

  1. JAVA笔记整理(五),JAVA中的继承

    1.继承的概念 继承是类与类的一种关系,是一种“is a”的关系 2.继承的好处 子类拥有父类的所有属性和方法,从而实现代码复用 4.方法的重写(Overridding) 如果子类对于继承自父类的方法 ...

  2. 异常-Caused by: org.apache.hadoop.ipc.RemoteException(org.apache.hadoop.security.AccessControlException): Permission denied: user=hdfs, access=WRITE, inode="/hbase":root:supergroup:drwxr-xr-x

    1 详细异常 Caused by: org.apache.hadoop.ipc.RemoteException(org.apache.hadoop.security.AccessControlExce ...

  3. C实现哈希表

    1 哈希表原理 这里不讲高深理论,只说直观感受.哈希表的目的就是为了根据数据的部分内容(关键字),直接计算出存放完整数据的内存地址. 试想一下,如果从链表中根据关键字查找一个元素,那么就需要遍历才能得 ...

  4. Nginx- web服务配置与测试

    (一) 软件介绍由俄罗斯人lgor Sysove开发,为开源软件.支持高并发:支持几万并发连接(特别是静态小文件业务环境) 资源消耗少:在3万并发连接下开启10个Nginx线程消耗内存不到200M 支 ...

  5. 使用ESP8266制作一个微型气象站

    本文主要介绍如何制作一个微型气象站. 这个想法和大部分代码来自Daniel Eichhorn在这个网址上的博客,可以去看看,这里面有一些很酷的东西! http://blog.squix.ch/2015 ...

  6. 基于Java+Selenium的WebUI自动化测试框架(六)---浏览器初始化

    本篇我们来讨论,如何写一个浏览器初始化的类.在写之前,先思考一下,我们需要一个什么样的初始化? 先来看看使用原生的Java + selenium是怎么做的.(以firefox为例) System.se ...

  7. puppeteer报错 UnhandledPromiseRejectionWarning: Error: Protocol error (Page.getLayoutMetrics): Target closed.

    puppeteer运行时报错: UnhandledPromiseRejectionWarning: Error: Protocol error (Page.getLayoutMetrics): Tar ...

  8. JS中map、some、every、filter方法

    简介 every()方法用于检测数组中所有元素是否都符合指定条件,若符合返回true,否则返回false:不会对空数组进行检测,不会改变原来的数组. some()方法用于检测数组中的元素是否有满足指定 ...

  9. Python3连接MySQL数据库实战

    Python3连接MySQL数据库实战 第三方库 :pymysql 数据库连接 def connect(): try: #建立数据库连接,从左至右参数依次为 # ip地址 我用的是云端数据库 如果为本 ...

  10. 导航菜单,showHide插件 + Dropdown 下拉对象

    一,index.html文件 <!DOCTYPE html> <html lang="utf-8"> <head> <meta chars ...