vue 获取安卓原生方法_H5-vue与原生Android、ios交互获取相册图片

第一次写简书，比较忐忑，不足部分望简友批评指正，互相学习！

功能需求：H5页面(vue)和移动端安卓、苹果进行交互，调取原生摄像头或相册上传照片；

需求分析：1.移动端获取H5页面的点击事件 2.移动端进行拍照或者是选取照片上传服务器获得图片路径(h5不用管)3.H5获取移动端传值方法获取图片的路径

下面进行正题

第一步：H5正常定义点击事件

ps：括号中的123参数，是为了区分身份证的正反面，同时也是要传递给移动端的，有参传参，无参不传，下面讲

图1

第二步：在vue的methods中写点击事件方法

1.这里要说明一下，方法里要判断Android、和ios系统，因为，不同的系统，移动端接收的方法不同

2.看2.3处的方法，此处就是移动端接收H5的点击事件的方法，这也是交互的开始，2.3处的方法名是H5和移动端互相商定的名字，一致就可以，此处我是为了避免起更多的方法名，就用了我自定义的点击事件名即mainIdCard()，括号里面的value就是传递给移动端的参数

3.看3处的ios的接收方法格式很好理解就是普通的方法，而Android的接收方法是test.mainIdCard()比较奇特，这也是为什么要判断不同系统的原因了，没关系，我们就按照安卓的格式写吧。(至于为什么是test.而不是其他的，这是看安卓心情的叫啥都行，如果是handle.那我们就写handle.mainIdCard(value))

4.如果没有参数，括号中就不用写值了，同时也要和移动端讲一下，是否传参，传几个参数

图2

第三步：H5获取移动端返回值

1.最后一步了，想获取移动端给H5的值，就需要再次定义一个获取值方法如下图的getMainImg，此方法也是H5和移动端协商一致的名字，此函数中的res就是移动端返回给H5的值。

2.本来到这里就结束了--------------------，可是我是H5页面用的vue框架，所以这个函数不知道放哪好，也百度了，反正vue的钩子函数都试了下不管用，最后放在了vue的外面详见图4，然后要将返回值再赋值给vue的data中，所以。。。所以就定义了vue的全局变量chin如window.chin=new Vue({}),然后在复制到vue的data中

图3

下面就是全部JS部分的内容

图4

哈哈哈......这就结束了，有不足的地方欢迎各位小伙伴指正更改，同时前端和原生交互也有其他的方法，并不是唯一的，希望以后多多学习！多多进步！

渣渣小前端

vue 获取安卓原生方法_H5-vue与原生Android、ios交互获取相册图片相关推荐

vue 获取安卓原生方法_VUE H5调用原生APP方法实践笔记
最近做与app端的混合开发,了解到了H5与原生app端之间的方法互通首先是我们给app端定义方法供他们使用(以vue为例) methods中定义一个方法名称 VContent() { console ...
vue怎么跟app配合_h5如何与原生APP交互？（vue）
第一次h5和APP交互,出现了一些问题... 现有一需求: H5前端要做一个图片上传的功能,需要调用相机.相册.然后原生APP那边的开发人员和我说,打开相册这些功能你调用我的方法就可以了. 以下是原生 ...
android h5和原生方法调用,H5与原生APP之间的方法互通
最近做与app端的混合开发,了解到了H5与原生app端之间的方法互通首先是我们给app端定义方法供他们使用(以vue为例) methods中定义一个方法名称 VContent() { console ...
imei ios android,ios设备获取IMEI
ios设备获取IMEI [2021-01-28 02:25:52] 简介: php去除nbsp的方法:首先创建一个PHP代码示例文件:然后通过"preg_replace("/(\ ...
【小程序】【Tips】【前端】交互【后端】从Json对象数组里面获取数据的方法 - PHP - JS 的原生方法
小程序后端和前端之间是通过,json的格式来传数据的,那么,数据如何获取呢?这就分两个部分 1 就是后端到前端后端我们考虑是PHP环境,前端是JS, 那么在JS里面,很简单: 比如,小程序一般在前端 ...
android/IOS NTP 获取在线的GMT 网络时间
不通过读取手机时间,读取服务器时间,通过NTP协议进行获取时间 ios: http://blog.csdn.net/wzq9706/article/details/9497615 android :h ...
php study 直接显示代码_PHP获取文件大小的方法详解（附视频）
本篇文章主要给大家介绍PHP获取文件大小以及封装获取正常大小的具体方法. 对于初入门的PHP新手来说,PHP获取文件大小这个功能实现,或许有一定的难度.但是相信新手小白们在看过本篇文章介绍后,一定能轻 ...
转：Spring Boot 获取 HttpServletRequest 的方法
转自: Spring Boot 获取 HttpServletRequest 的方法 - 简书本文介绍 Spring Boot 2 获取 HttpServletRequest 的方法. 目录概述方法 ...
java severlet 获取当前路径_Java 获取当前路径的方法总结
Java 获取当前路径的方法总结 1.利用System.getProperty()函数获取当前路径: System.out.println(System.getProperty("user. ...
通达信下单接口下载获取数据的方法
通达信下单接口下载获取数据的方法,第一步就是通过交易软件来获取数据,介绍下面这种直接获取的方法,如下: 1.通过pytdx获取本地通达信数据: 2.通过requests爬虫爬取腾讯财经数据: 3.通过 ...

vue 获取安卓原生方法_H5-vue与原生Android、ios交互获取相册图片

vue 获取安卓原生方法_H5-vue与原生Android、ios交互获取相册图片相关推荐

最新文章

热门文章