kixScannerPro

kixScannerPro

Framework7 CLI Options

Framework7 app created with following options:

{
  "cwd": "/Users/kennyname/Documents/Documents/projects/cordova/kixScannerPro",
  "type": [
    "cordova",
    "web"
  ],
  "name": "kixScannerPro",
  "framework": "vue",
  "template": "tabs",
  "bundler": "webpack",
  "cssPreProcessor": "scss",
  "theming": {
    "customColor": false,
    "color": "#007aff",
    "darkTheme": false,
    "iconFonts": true,
    "fillBars": false
  },
  "customBuild": false,
  "webpack": {
    "developmentSourceMap": true,
    "productionSourceMap": true,
    "hashAssets": false,
    "preserveAssetsPaths": false,
    "inlineAssets": true
  },
  "pkg": "io.tranyi.kixScannerPro",
  "cordova": {
    "folder": "cordova",
    "platforms": [
      "ios",
      "android"
    ],
    "plugins": [
      "cordova-plugin-statusbar",
      "cordova-plugin-keyboard",
      "cordova-plugin-splashscreen",
      "cordova-plugin-wkwebview-file-xhr"
    ]
  }
}

NPM Scripts

• npm start - run development server
• npm run build-prod - build web app for production
• npm run build-dev - build web app using development mode (faster build without minification and optimization)
• npm run build-cordova-prod - build cordova's www folder from and build cordova app
• npm run build-cordova-dev - build cordova's www folder from and build cordova app using development mode (faster build without minification and optimization)
• npm run build-cordova-ios-prod - build cordova's www folder from and build cordova iOS app
• npm run build-cordova-ios-dev - build cordova's www folder from and build cordova iOS app using development mode (faster build without minification and optimization)
• npm run build-cordova-android-prod - build cordova's www folder from and build cordova Android app
• npm run build-cordova-android-dev - build cordova's www folder from and build cordova Android app using development mode (faster build without minification and optimization)

WebPack

There is a webpack bundler setup. It compiles and bundles all "front-end" resources. You should work only with files located in /src folder. Webpack config located in build/webpack.config.js.

Webpack has specific way of handling static assets (CSS files, images, audios). You can learn more about correct way of doing things on official webpack documentation.

Cordova

Cordova project located in cordova folder. You shouldn't modify content of cordova/www folder. Its content will be correctly generated when you call npm run cordova-build-prod.

Assets

Assets (icons, splash screens) source images located in assets-src folder. To generate your own icons and splash screen images, you will need to replace all assets in this directory with your own images (pay attention to image size and format), and run the following command in the project directory:

framework7 generate-assets

Or launch UI where you will be able to change icons and splash screens:

framework7 generate-assets --ui

開發說明

$ yarn 
$ yarn start # 網頁瀏覽
$ yarn demo # 若要測試原生的東西，如 barcode 掃描，可由這個指令測試

安裝方式

iOS

1. cd 到 cordova資料夾
2. 建立 ios platform
   • 輸入 cordova platform add ios
   • 輸入 cordova build ios
3. 打開 xcode 加入 apple id
   • 打開 Xcode，到 Preferences > Accounts，
   • 按下 + 鈕來加入帳號（一般的apple帳號即可）
4. 使用 xcode 開啟專案
   • 在專案底下 platforms/ios/<專案名稱>.xcodeproj
5. 相關設定
   • Identity - Bundle Identifier 不能跟別人重複
   • Signing - Team 要選擇，選完後會有ign Certificate
   • Info - 要加入 Privacy - Camera Usage Description 允許程式使用相機
   • 點左上角的執行即可 build 到手機
6. 安裝後注意事項
   • 會出現『Device is passcode protected xcode』
   • 要先開 xcode 再接上 iphone ，這時候 iphone 會問你是否信任裝置，要點信任
   • 出現『A build only device cannot be used to run this target』
   • 需要到『系統』『設定』『裝置管理』加入信任
   • APP開啟後，點所有按鈕都沒反應 Content Security Policy 的問題
   • index.html 需要設定 <meta http-equiv="Content-Security-Policy" content="default-src 'unsafe-inline' 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *">

Android

1. 安裝 java SDK
   • [](https://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html)
2. 安裝 Android Studio
   • [](https://developer.android.com/studio#downloads)
   • 相關的環境變數也要確認沒問題
3. 手機先成為開發者模式
   • 『關於手機』 > 『系統版本號』多點幾次 > 開啟開發者模式
4. 手機先與電腦連線，並開啟相關指令
   • 至『開發者選項』
   • 勾選『開啟開發人員選項』
   • 勾選『USB偵錯』
   • 勾選『USB安裝』
   • 勾選『USB試調』（小米才有）
5. 至 terminal 輸入指令，確認手機有連接
   • adb devices -l ```bash
   • daemon not running; starting now at tcp:5037
   • daemon started successfully List of devices attached 92819f16 device usb:336592896X product:sagit model:MI_6 device:sagit transport_id:1 ```
6. 輸入 framework7 cordova platform add android 新增 Cordova 的 Android 輸出目錄（首次建立需要，之後可跳過）
7. 輸入 yarn run-cordova-android-dev 會 build 專案並將 apk 自動安裝至手機

Documentation & Resources

• Framework7 Core Documentation

• Framework7 Vue Documentation

• Framework7 Icons Reference

• Community Forum

Support Framework7

Love Framework7? Support project by donating or pledging on patreon: https://patreon.com/vladimirkharlampidi