混合app的使用
- 前言
- 一、什么是混合开发?
- 二、混合开发的优势
- 三、作为h5如何使用
- 四、怎么进行和安卓 和 ios交换数据
- 1.初始化
- 2.调用原生方法
- 总结
前言
这里就是关于混合开发了,也是经常问到的。现在的移动端,大部分都是混合开发
一、什么是混合开发?
简单来说就是一种原生+HTML5的模式。即h5与安卓、iOS合并开发一个项目,将h5我们写好的移动端页面,放到ios设备以及安卓设备中,在里面
我们可以享受ios和安卓给我们的所有支持,通过方法调用,回调函数进行使用 给我们提供的方法
二、混合开发的优势
- 能够利用原生解决h5实现不了的功能,有更好的用户体验
- 因为h5的存在节省了开发成本、更好维护
- 是一种折中式的开发,结合了原生与h5的所长
三、作为h5如何使用
简单来说就是方法调用方法。原生已经写好了方法只需要你的一个方法去调用即可实现功能。下面以微信支付功能为例
如果在混合开发中由安卓或iOS来写好了微信支付功能,你只需要给一个支付按钮点击事件,点击支付时调用原生写好的方法即可实现所有功能!!!
当然你会要判断是安卓的方法还是iOS的方法(百度上很多)
下面随便举个例子
<button type="" @click="clickPay(参数)">点击支付</button>
...
clickPay(参数){
//如果是安卓
android.pay(参数)
//如果是ios
ios.pay(参数)
}
四、怎么进行和安卓 和 ios交换数据
1.初始化
// 初始化方法
function init (obj) {
// 在页面初始化我们可以拿到原生端给我们传来的初始化数据,他们会默认调用一次初始化方法
console.log(obj)
}
2.调用原生方法
这里和我上面说的如何使用差不多,上面通俗一点
// 判断h5在ios还是安卓
function detect(){
var equipmentType = "";
var agent = navigator.userAgent.toLowerCase();
var android = agent.indexOf("android");
var iphone = agent.indexOf("iphone");
var ipad = agent.indexOf("ipad");
if(android != -1){
equipmentType = "android";
}
if(iphone != -1 || ipad != -1){
equipmentType = "ios";
}
return equipmentType;
}
// 我们定义好一个 上传图片方法,放在一个公用的js文件中
function updataImg (obj,callback) {
if(equipmentType == "android") {
// 调用android方法,比如是
android.webviewupdataJs(obj,callback) // 浏览器不认识的方法,是安卓定义好的方法
} else {
ios.webviewupdataJs(obj,callback)
}
console.log(obj)
}
总结
到这里就结束了,希望对大家有帮助,啦啦啦啦😎