准备开发环境

  • 前端开发环境

    • Node.js LTS
      • @vue/cli
      • cordova
      • yarn 推荐
    • 编辑器 VS code(墙裂推荐)
      • 各种插件

###项目搭建

  • 使用脚手架生成基础项目

    • cordova 项目
      • cordova create demo
      • cordova platform add android
      • cordova run android
      • 目录结构
        • www 存放网页代码
        • plugins 插件
        • platforms 平台
        • res 资源
      • 调试
        chrome://inspect/#devices
    • vue 项目
      • vue create demo
      • yarn
      • npm run serve
      • 目录结构
        • public 静态资源
        • src 源码
      • 安装一个 UI 框架 Vuetify
        • yarn add vuetify
        • 导入文件
          import Vuetify from ‘vuetify’import ‘vuetify/dist/vuetify.min.css’Vue.use(Vuetify)
        • 代码结构 app.vue
    • 把 vue 运行到 Android
      • npm run build
      • 复制文件
      • cordova run android
      • 配置 vue 项目
        • vue.config.js
          module.exports = { baseUrl: “”};
      • 重新 build、复制、run

    合并两个项目

    • 复制 cordova 到 vue
      • /hooks
      • /platforms
      • /plugins
      • /res
      • /www
      • config.xml
    • 修改 package.json

    • 修改配置

    • npm run build
    • cordova run android

cordova 插件使用

  • 引入 cordova.js
    if (window.location.protocol === “file:” || window.location.port === “3000”) { var cordovaScript = document.createElement(“script”); cordovaScript.setAttribute(“type”, “text/javascript”); cordovaScript.setAttribute(“src”, “cordova.js”); document.body.appendChild(cordovaScript);}
  • 安装 cordova 插件http://cordova.axuer.com/plugins/
    • 扫描二维码 https://github.com/phonegap/phonegap-plugin-barcodescanner
      • cordova plugin add phonegap-plugin-barcodescanner
      • 使用
        /_ global cordova:true _/ cordova.plugins.barcodeScanner.scan(result => { alert(result.text); });
    • 读取通讯录https://github.com/apache/cordova-plugin-contacts
      • cordova plugin add cordova-plugin-contacts
      • 使用
        navigator.contacts.find( [“displayName”, “name”, “phoneNumbers”, “emails”, “address”], e => { console.log(e); }, err => { console.log(err); }, { filter: “”, multiple: true } );

路由整理，嵌套的路由