作者:手机用户2602906791 | 来源:互联网 | 2023-05-18 03:53
1.混合开发的解决方案方案一:dcloud(hbuilder)国内一款通用的框架,性能比phonegap高方案二:phonegap(Adobe公司所出的将phonegap捐献给了Apa
1.混合开发的解决方案
- 方案一:dcloud(hbuilder)国内一款通用的框架,性能比phonegap高
- 方案二:phonegap(Adobe公司所出的将phonegap捐献给了Apache),cordova最经典的一款混合开发的框架
- 方案三:APICloud 编写都是在本地 打包在云端
- 方案四:react native 国外比较火
- 方案五:WEX5
- 方案六:微信里面做混合开发
2.混合开发原理
a:什么是混合开发?
使用写web方式去写原生
b:有哪些优势?
- 开发周期短(写一次就可以运行在各个手机版本上面)
- 跨平台(写一次的内容 可以同时跑在安卓和ios设备上面)
- lib丰富性(资源丰富,比如各种js库)
c:有哪些缺点?
- 打包后资源 偏大
- 性能低
- css+js兼容,以及提供更好的api,兼容性差距不大
d:怎么做到的(原理)?
- 为什么可以使用html+css进行构建页面
原因是原生应用给我们目前开发中提供了一个webview(原生提供的浏览器), 我们可以再webview上面写css,html,来构建页面。
- 为什么可以使用js方式就可以调用原生的api
js写在webview里面,而java程序在应用启动的时候,将一些原生的api定制成了js可以调用的api,注入到webview里面去,就可以在webview中调用原生。
将注入到webview里面的js叫做 桥接js jsBridge .
- 为什么写一次就可以在不同的平台上面进行运行?
通过js方式调用原生,通过桥接的js
- 桥接js作用
- 将一些原生的api注入到当前页面里面去,可以在当前页面调用(js形式注入进来的)
- 在html页面里面通过js调用原生
只要原生注入到webview里面的桥接js规范和接口都是统一的,直接调用就可以实现一次编写多次使用。归纳:==安卓和ios同时对上提供了统一标准的接口,可以直接在webview中通过桥接js的方式进行调用==
3.基于dcloud实现的一个混合开发的案例
文档地址:www.dcloud.io document.addEventListener('plusready', function(){
});
注意点:
- 确定使用dcloud进行开发的时候,页面中一定要存在一个事件,plusready,
plusready实际上是原生将桥接js注入到页面中的容器,进行任何方法调用的时候都在plusready之后。
- 所有api方法全部都托管在了一个plus对象中。
使用语法plus.模块名称.具体方法(参数,callback)
第一个案例:在真机下,实现拍照功能
var btn = document.getElementsByTagName('button');
btn[0].addEventListener('touchend',function(){
var _camera = plus.camera.getCamera();
_camera.captureImage(function(path){
alert('拍照成功,返回的路径是'+path);
var _io = plus.io;
var _path = _io.convertLocalFileSystemURL(path);
var img = document.createElement('img');
img.style.display='block';
img.style.width = '18rem';
img.style.height = '10rem';
img.src=_path;
document.body.appendChild(img)
},function(){},{})
})
拍摄小视频:
btn[1].addEventListener('touchend',function(){
var _camera = plus.camera.getCamera();
_camera.startVideoCapture(function(path){
alert('拍摄成功,视频路径为:'+path);
var _path = plus.io.convertLocalFileSystemURL(path);
var video = document.createElement('video');
video.cOntrols="controls";
video.autoplay="autoplay";
video.style.display='block';
video.style.width = '18rem';
video.style.height = '10rem';
video.src = _path;
document.body.appendChild(video);
},function(){},{})
});
app如何进行打包 — 打包成apk文件
- 登录hbulid - manifest.json—点击云端获取appid—右键项目—发行—发行为原生安装包—打包
打开相册
- Gallery模块管理系统相册,支持从相册中选择图片或视频文件、保存图片或视频文件到相册等功能。通过plus.gallery获取相册管理对象。
btn[2].addEventListener('touchend',function(){
var _gallery = plus.gallery;
_gallery.pick(function(path){
alert('选择图片的路径为'+path);
var _path = plus.io.convertLocalFileSystemURL(path);
var img = document.createElement('img');
img.style.display='block';
img.style.width = '18rem';
img.style.height = '10rem';
img.src=_path;
document.body.appendChild(img);
},function(){},{})
});
打开多个图片
btn[3].addEventListener('touchend',function(){
var _gallery = plus.gallery;
var img='';
_gallery.pick(
function(path){
alert('图片的路径'+JSON.stringify(path));
var _files= path.files;
for(var i in _files){
img +=''"/>'
}
document.getElementById('img_cxt').innerHTML = img;
},
function(){},
{
multiple:true,
maximum:9,
system:false
}
)
})
4.熟练dcloud中常用的api(混合开发的api)
- 打开相册plus.gallery.pick进行打开
选取多个图片{multiple:true,maximum:9,system:false}
- device模块里面 震动
3.webview index.html 相当于一个webview
当从一个页面切换到另一个页面的时候,切换的时候伴随着一些动画
open close currentWebView()//获取当前webview的id
4.nativeUI alert(”);
就是原生控件