一蓉媳。 首先安裝Cordova
- 打開Cordova官網(wǎng) http://cordova.axuer.com 點(diǎn)擊入門
- 先安裝Node酱酬，點(diǎn)擊步驟1中的Node.js,下載安裝
- 打開cmd 依次輸入上圖命令 創(chuàng)建第一個(gè)cordova demo（第一個(gè)命令安裝cordova是從服務(wù)器下載 跟網(wǎng)速有關(guān)，耐心等待）
- 創(chuàng)建Cordova項(xiàng)目
二傻丝。 添加Camera插件
上面步驟后cmd不要閉關(guān) 繼續(xù)輸入 添加相機(jī)插件
cordova plugin add cordova-plugin-camera
三赖晶。 生成Android Studio 可用的Cordova jar包
- Android Cordova 官方github：https://github.com/apache/cordova-android 直接整個(gè)項(xiàng)目Download下來就行了
- 下載ant 官網(wǎng)：http://ant.apache.org/ 下載解壓 配置path環(huán)境
進(jìn)入解壓Cordova目錄的/framework，然后執(zhí)行指令ant jar(目錄下需要新建local.properties文件 指定sdk路徑 可以從其他的Android Studio項(xiàng)目中直接復(fù)制一個(gè)過來),生成cordova-X.X.X-dev.jar
四腔长。 新建Android Studio Cordova 項(xiàng)目
- 新建正常Android studio 項(xiàng)目 復(fù)制cordova-X.X.X-dev.jar 到libs下 Add As Library...
- MainActiviaty頁面
public class CordovaViewTestActivity extends CordovaActivity {
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
loadUrl(launchUrl);//加載h5頁面
}
- 新建assets目錄袭祟，并把Cordova項(xiàng)目中assets目錄下的www文件復(fù)制過去
- 把Cordova項(xiàng)目下src下的org復(fù)制到src/mian/java 下面
- 把Cordova項(xiàng)目下res下xml復(fù)制到 res下
- 打開AndroidManifest 相機(jī)權(quán)限
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
并在application 標(biāo)簽下 加入調(diào)用相機(jī)的代碼
</application>
...
<!--js調(diào)用原生相機(jī)-->
<provider
android:name="android.support.v4.content.FileProvider"
android:authorities="${applicationId}.provider"
android:exported="false"
android:grantUriPermissions="true">
<meta-data
android:name="android.support.FILE_PROVIDER_PATHS"
android:resource="@xml/provider_paths" />
</provider>
</application>
五。 配置js文件
1 index.html文件中添加一個(gè)按鈕 設(shè)置一個(gè)點(diǎn)擊方法
<button onclick="takephoto()">takephoto</button>
js中寫對(duì)應(yīng)方法
//只有在deviceready事件觸發(fā)以后才可以監(jiān)聽拍照事件
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
console.log(navigator.camera);
}
//拍照方法(對(duì)應(yīng)button方法名字)
function takephoto(){
navigator.camera.getPicture(onSuccess, onFail, { quality: 50,
destinationType: Camera.DestinationType.DATA_URL
});
}
//成功回調(diào)
function onSuccess(imageData) {
var image = document.getElementById('myImage');
image.src = "data:image/jpeg;base64," + imageData;
}
//失敗回調(diào)
function onFail(message) {
alert('Failed because: ' + message);
}
運(yùn)行試試效果吧
附個(gè)人demo： https://git.coding.net/Lrxc/LrxcCordova.git
