vue+cordovaプロジェクトパッケージによるプラットフォーム間開発(一)

環境準備

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')

アプリを梱包し、携帯電話にインストールしてテストします

jdkとandroid sdkが構成されている場合は、コマンドを直接実行してパッケージ化できます.

cordova build android

パッケージios

platform/iosに入りxcodeを使用してファイルTestを開く.xcodeprojは、xcodeでパッケージ化すればよい

△xcodeパッケージが完了していません。。

転載先:https://juejin.im/post/5bdddc60e51d45548f298982