混合开发基础

1.混合开发的解决方案

• 方案一：dcloud(hbuilder)国内一款通用的框架，性能比phonegap高
• 方案二：phonegap（Adobe公司所出的将phonegap捐献给了Apache）,cordova最经典的一款混合开发的框架
• 方案三：APICloud 编写都是在本地 打包在云端
• 方案四：react native 国外比较火
• 方案五：WEX5
• 方案六：微信里面做混合开发

2.混合开发原理

a:什么是混合开发？

使用写web方式去写原生

b:有哪些优势？

1. 开发周期短（写一次就可以运行在各个手机版本上面）
2. 跨平台（写一次的内容 可以同时跑在安卓和ios设备上面）
3. lib丰富性（资源丰富，比如各种js库）

c:有哪些缺点？

1. 打包后资源 偏大
2. 性能低
3. 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作用
  
  1. 将一些原生的api注入到当前页面里面去，可以在当前页面调用（js形式注入进来的）
  2. 在html页面里面通过js调用原生

只要原生注入到webview里面的桥接js规范和接口都是统一的，直接调用就可以实现一次编写多次使用。

归纳：==安卓和ios同时对上提供了统一标准的接口，可以直接在webview中通过桥接js的方式进行调用==

3.基于dcloud实现的一个混合开发的案例

文档地址：www.dcloud.io

 document.addEventListener('plusready', function(){
//console.log("所有plus api都应该在此事件发生后调用，否则会出现plus is undefined。"

    });

• 注意点：

  1. 确定使用dcloud进行开发的时候，页面中一定要存在一个事件，plusready，
     plusready实际上是原生将桥接js注入到页面中的容器，进行任何方法调用的时候都在plusready之后。
  2. 所有api方法全部都托管在了一个plus对象中。
     使用语法plus.模块名称.具体方法（参数，callback）

第一个案例:在真机下，实现拍照功能

var btn = document.getElementsByTagName('button');
    btn[0].addEventListener('touchend',function(){
        //调用原生API
        //获取camera模块  plus.camera;  获取摄像头 getCamera
        var _camera = plus.camera.getCamera();
        //captureImage拍照方法  参数：成功回调函数，失败回调函数，配置{config}
        _camera.captureImage(function(path){
            alert('拍照成功，返回的路径是'+path);
            // 参数path是相对路径
            //plus.io.convertLocalFileSystemURL(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();
        //startVideoCapture：调用摄像头进行摄像操作
        _camera.startVideoCapture(function(path){
            alert('拍摄成功，视频路径为：'+path);
            //将当前路径转换成本地路径
            var _path = plus.io.convertLocalFileSystemURL(path);
            var video = document.createElement('video');
            //controls 属性规定浏览器应该为视频提供播放控件。
            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(){
        //plus.gallery获取相册管理对象
        var _gallery = plus.gallery;
        //pick方法：从系统相册选择文件（图片或视频）
        _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 +='<img src="'+_files[i]+'"/>'
                }
                document.getElementById('img_cxt').innerHTML = img;
            },
            function(){},
            {   
                multiple:true,
                maximum:9,
                system:false
            }
        )
    })

4.熟练dcloud中常用的api(混合开发的api)

1. 打开相册plus.gallery.pick进行打开
   选取多个图片{multiple:true,maximum:9,system:false}
2. device模块里面 震动
   3.webview index.html 相当于一个webview
   当从一个页面切换到另一个页面的时候，切换的时候伴随着一些动画
   open close currentWebView()//获取当前webview的id
   4.nativeUI alert(”);
   就是原生控件