環境準備
- node 8+ 官網安裝
- cordova
sudo npm i cordova -g - webpack
sudo npm i webpack -g - vue-cli2
sudo npm i vue-cli -g - jdk-1.8
- android sdk & xcode
建立一個cordova手腳架
$ cordova create test com.test.cn HelloWorld
$ cd test
$ cordova platform add android
$ cordova platform add ios
複製程式碼在corodva專案下建立一個vue專案
$ vue init webpack src -yes
$ cd src
$ npm install
複製程式碼執行完上面命令，專案結構如下：
安裝配置vue-cordova
- 進入src資料夾
$ npm i vue-cordova -s
複製程式碼- vue的main.js引入vue-cordova
//匯入vue-cordova
import VueCordova from 'vue-cordova'
Vue.use(VueCordova)
複製程式碼- 修改config/index.js的build選項
build: {
// Template for index.html
index: path.resolve(__dirname, '../../www/index.html'),
// Paths
assetsRoot: path.resolve(__dirname, '../../www'),
assetsSubDirectory: '',
assetsPublicPath: './',
//這裡很重要，如果是true,打包後app會白屏
productionSourceMap: false,
// https://webpack.js.org/configuration/devtool/#production
devtool: '#source-map',
productionGzip: false,
productionGzipExtensions: ['js', 'css'],
bundleAnalyzerReport: process.env.npm_config_report
}
複製程式碼- index.html 加入cordova.js
<script src="cordova.js"></script>
複製程式碼vue裡呼叫cordova外掛,這裡呼叫camera
- 安裝cordova 外掛
cordova plugin add cordova-plugin-camera
複製程式碼- 在需要調取相機的地方，加入相關的程式碼
cameraTakePicture: function (mySourceType) {
navigator.camera.getPicture(this.onSuccess, this.onFail, {
quality: 50,
destinationType: Camera.DestinationType.DATA_URL,
encodingType: Camera.EncodingType.JPEG,
sourceType: mySourceType
})
},
複製程式碼引數說明： sourceType
PHOTOLIBRARY 或 0 開啟照片庫。
CAMERA 或 1 開啟本機相機。
SAVEDPHOTOALBUM 或 2 開啟已儲存的相簿。
複製程式碼destinationType
DATA_URL 或 0 返回base64編碼字串。
FILE_URI 或 1 返回圖片檔案URI。
NATIVE_URI 或 2 返回圖片本機URI。
複製程式碼- 在上步完成圖片拍攝之後，圖片上傳
dataURLtoFile: function (dataurl, filename) {
var arr = dataurl.split(',')
var mime = arr[0].match(/:(.*?);/)[1]
var bstr = window.atob(arr[1])
var n = bstr.length
var u8arr = new Uint8Array(n)
while (n--) {
u8arr[n] = bstr.charCodeAt(n)
}
var blob = new Blob([u8arr], {type: mime})
blob.lastModifiedDate = new Date()
blob.name = filename
return blob
}
複製程式碼呼叫：
var file = this.dataURLtoFile('data:image/jpeg;base64,' + imageURI, 'test.jpeg')
複製程式碼打包apk，安裝到手機上進行測試
如果jdk和android sdk已經配置好，直接執行一下命令就可以打包
cordova build android
複製程式碼打包ios
進入platform/ios 使用xcode開啟檔案Test.xcodeproj 然後按xcode得打包方式打包即可