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(){
//console.log("所有plus api都應該在此事件發生後調用，否則會出現plus is undefined。"
});
- 注意點：
-
确定使用dcloud進行開發的時候，頁面中一定要存在一個事件，plusready，
plusready實際上是原生将橋接js注入到頁面中的容器，進行任何方法調用的時候都在plusready之後。
-
所有api方法全部都托管在了一個plus對象中。
使用文法plus.子產品名稱.具體方法（參數，callback）
-
第一個案例:在真機下，實作拍照功能
var btn = document.getElementsByTagName('button');
btn[].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[].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[].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[].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:,
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(”);
就是原生控件
![H5上傳圖檔上傳[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)