vue+cordova项目打包实现跨平台开发(一)

环境准备

1. node 8+ 官网安装
2. cordova sudo npm i cordova -g
3. webpack sudo npm i webpack -g
4. vue-cli2 sudo npm i vue-cli -g
5. jdk-1.8
6. 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

1. 进入src文件夹

$ npm i vue-cordova -s 
复制代码

2. vue的main.js引入vue-cordova

//导入vue-cordova
import VueCordova from 'vue-cordova'
Vue.use(VueCordova)
复制代码

3. 修改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
  }
复制代码

4. index.html 加入cordova.js

<script src="cordova.js"></script>
复制代码

vue里调用cordova插件,这里调用camera

1. 安装cordova 插件

cordova plugin add cordova-plugin-camera
复制代码

2. 在需要调取相机的地方，加入相关的代码

 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。
复制代码

3. 在上步完成图片拍摄之后，图片上传

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得打包方式打包即可

（xcode打包未完待续。。。）

转载于:https://juejin.im/post/5bdddc60e51d45548f298982