上一篇：PhoneGap Hybrid APP 開發(fā)實戰(zhàn)(1)：第一個 Android APK
注：繪本內(nèi)容有版權袒哥，不會公開。只討論開發(fā)過程消略。
關鍵字：PhoneGap Hybrid Framework7 Vue 打包 CrossWalk插件 TV插件 Media插件 適配Android4
中間有不少坑啊堡称。。艺演。還好却紧，終于趟完了。現(xiàn)在第一個實用的英語繪本apk已經(jīng)上線：手機胎撤、電視安卓盒子都能用晓殊，支持電視遙控器。
最終完成圖：
推薦的 Framework7+Vue.js 模板：cordova-template-framework7-vue-webpack
$ npm i phonegap -g
$ phonegap create <project_dir> --template cordova-template-framework7-vue-webpack
$ phonegap platform add android browser ios
我們先來看看這個模板的結構：
- 創(chuàng)建
c:\git>phonegap create pg_vue_demo --template cordova-template-framework7-vue-webpack
Creating a new cordova project.
- 安裝依賴
c:\git\pg_vue_demo>npm install
C:\git\pg_vue_demo>npm i
npm WARN prefer global node-gyp@3.6.1 should be installed with -g
node-sass@4.5.2 install C:\git\pg_vue_demo\node_modules\node-sass
node scripts/install.js
Downloading binary from https://github.com/sass/node-sass/releases/download/v4.5.2/win32-x64-48_binding.node
Download complete ] - :
Binary saved to C:\git\pg_vue_demo\node_modules\node-sass\vendor\win32-x64-48\binding.node
Caching binary to C:\Users\Yan\AppData\Roaming\npm-cache\node-sass\4.5.2\win32-x64-48_binding.node
node-sass@4.5.2 postinstall C:\git\pg_vue_demo\node_modules\node-sass
node scripts/build.js
Binary found at C:\git\pg_vue_demo\node_modules\node-sass\vendor\win32-x64-48\binding.node
Testing binary
Binary is fine
helloworld@1.0.0 C:\git\pg_vue_demo
...
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.0.0 (node_modules\chokidar\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.1.1: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN uglifyjs-webpack-plugin@0.3.1 requires a peer of uglify-js@^2.8.0 but none was installed.
npm WARN helloworld@1.0.0 No repository field.
檢查一下uglify-js的版本伤提，如果是3.0+巫俺，反而會報錯，安裝低一的版本：
npm install uglify-js@^2.8.0
- 首次運行
命令phonegap run browser -- --lr可以實現(xiàn)開發(fā)階段熱替換肿男！直接在Chrome瀏覽器中快速調(diào)試介汹。
$ phonegap platform add browser android
C:\git\pg_vue_demo>phonegap platform add android
Adding android project...
Creating Cordova project for the Android platform:
Path: platforms\android
Package: com.phonegap.helloworld
Name: helloworld
Activity: MainActivity
Android target: android-25
Subproject Path: CordovaLib
Android project created with cordova-android@6.1.2
Installing "cordova-plugin-whitelist" for android
This plugin is only applicable for versions of cordova-android greater than 4.0. If you have a previous platform version, you do *not*
need this plugin since the whitelist will be built in.
Before deploy hook started...
Checking is node modules installed...
Node modules already installed.
Cordova hook completed. Resuming to run your cordova command...
$ phonegap run browser -- --lr
[phonegap] executing 'cordova platform add --save browser' ...
這時，打開Chrome瀏覽器：http://localhost:8000/ -> Done! 漂亮的demo界面出現(xiàn)了舶沛！試用一下痴昧，是不是工作正常？
可以直接加入script to /package.json冠王，以后直接npm run dev就行:
"scripts": {
"dev": "echo \"check http://127.0.0.1:8081/\" && phonegap run browser -- --lr"
},
調(diào)試方法1：如上赶撰，Chrome -> F12 -> 打開調(diào)試窗口
調(diào)試方法2：Phonegap Desktop（不能熱更新）
打開Phonegap Desktop桌面版
把我們的項目目錄，拖動到Phonegap Desktop
- 會變成綠色柱彻，點擊
http://<IP>:3000豪娜，會自動運行 - 手機端運行Phonegap App，輸入地址：
http://<IP>:3000 - Bingo哟楷！手機端也可以正常預覽了瘤载，而且已經(jīng)是原生App層面的預覽了！
- 桌面端能實時看到交互：
調(diào)試方法2 - CLI：
生成
www目錄：phonegap run browser卖擅，這個目錄其實就是WebApp的生產(chǎn)輸出了CLI：
phonegap serve鸣奔，這個跟Phonegap Developer App效果一樣根據(jù)CLI的提示地址墨技，網(wǎng)頁、手機都可以挎狸。在手機上打開Phonegap Developer App就行
-
調(diào)試方法3 - Remote Debug：
- 安卓真機扣汪，打開USB調(diào)試，USB連接電腦
phonegap run android- 等待1锨匆、2分鐘崭别，會自動打包，手機上會自動安裝應用App
- 手機上可以體驗啦
- 打開電腦Chrome:
chrome://inspect/恐锣，連接手機
Paste_Image.png - 可以同步調(diào)試：電腦上操作茅主、手機上操作都可以，另外Console土榴、Element也可以查看诀姚，非常有幫助
目錄結構：
下一步，我們就要修改這些源文件玷禽，來實現(xiàn)我們的App学搜！
靜態(tài)static、資源文件assets
file-loader:
webpack學習筆記-2-file-loader 和 url-loader -
https://blog.csdn.net/qq_38652603/article/details/73835153
module: {
rules: [
{test: /\.(png|jpe?g|gif)$/, loader: 'file-loader', options: {name: '[name].[ext]?[hash]'}},
vue里论衍，訪問static文件：
<img src="/static/aaa.png" alt="Vuetify.js" class="" />
aaa.png存放的目錄為：
<project>/src/static/aaa.png
另一種方法：url-loader
webpack踩坑之路 (2)——圖片的路徑與打包 -
https://www.cnblogs.com/ghost-xyx/p/5812902.html
定義打包后的存放路徑(/dist/images/)和文件名：
Webpack.config:
module: {
loaders: [
{
test: /\.(png|jpg)$/,
loader: 'url-loader?limit=8192&name=images/[hash:8].[name].[ext]'
}
]
}
#publicPath
#output.publicPath 表示資源的發(fā)布地址，當配置過該屬性后聚磺，
#打包文件中所有通過相對路徑引用的資源都會被配置的路徑所替換坯台。
output: {
path: 'dist',
publicPath: '/assets/',
filename: 'bundle.js'
}
JS:
var imgUrl = require('./images/bg.jpg'),
imgTempl = '<img src="'+imgUrl+'" />';
document.body.innerHTML = imgTempl;
以下是一些可能會遇到的坑，碰到問題記得回來搜一下：
android-minSdkVersion | Android Developers
https://developer.android.com/guide/topics/manifest/uses-sdk-element.html
Android 7.1 25
6.0 23
5.1 22
4.4 19
4.2 17
4.0 14
run android時報錯：Error: Could not find gradle wrapper within Android SDK. Might need to update your Android SDK - Android
There appears to be a workaround though, which I just got to work on my machine. Here's what I did:
Download tools_r25.2.3-windows.zip from Android Downloads.
Extracted zip on desktop
Replaced C:\Users\username\AppData\Local\Android\sdk\tools with extracted sub-folder tools/
In project folder:
$ cordova platforms remove android
$ cordova platforms add android
Media插件瘫寝，播放Android本地音頻文件
web調(diào)試時蜒蕾，音頻文件放入 /src/static/mp3/a1.mp3，然后引用就行
但打包到Android焕阿，路徑會變化成：file:///data/user/0/com.adobe.phonegap.app/files/phonegapdevapp/www/static/mp3/a1.mp3
所以咪啡，在vue文件時判斷一下device:
function getPhoneGapPath(device) {
var path = window.location.pathname;
var sizefilename = path.length - (path.lastIndexOf("/") + 1);
path = path.substr(path, path.length - sizefilename);
if (device.android) {
path = 'file://' + path;
}
return path;
};
var srcfile = 'a1.mp3';
let src = '';
src = getPhoneGapPath(device) + 'static/mp3/' + srcfile;
console.log(JSON.stringify(device)); // Object to String
console.log(' PATH: ' + src);
var media = new Media(src);
console.log(media);
media.play();
})
打開了“pushState: true”功能，有時刷新會報錯：
找不vue.common.js:522 TypeError: Cannot read property 'title' of undefined TypeError: Cannot read property 'addEventListener' of null
http://127.0.0.1:8081/#!//playPicBook/
這時暮屡，把地址欄 #后面的去掉撤摸，再刷新就行！
或者設置： pushStateOnLoad: false
安卓全屏：
config.xml -> to add:
<preference name="Fullscreen" value="true" />
判斷手機橫向還是豎向
原生：
window.screen.orientation
angle: 90/-90 橫屏
angle: 0 豎屏
# html
<f7-grid>
<f7-col :width="orient==0 ? 50: 33">
<f7-button open-panel="left">Left Panel</f7-button>
</f7-col>
<f7-col :width="orient==0 ? 50: 33">
<f7-button open-panel="right">Right Panel</f7-button>
</f7-col>
<f7-col :width="orient==0 ? 50: 33">
<f7-button open-panel="right">3rd col</f7-button>
</f7-col>
</f7-grid>
# vue.js
computed: {
orient () {
return window.screen.orientation.angle;
}
}
Detect on smartphone change screen orientation
$$(window).on('orientationchange',function(e){ console.log(e.orientation)});
Cordova Screen Orientation Plugin: https://github.com/gbenvenuti/cordova-plugin-screen-orientation
function my_app_statusbar_toggle() {
if ( My_App.device.statusBar && Mp_App.device.iphone ) {
switch( window.orientation ) {
case -90 :
case 90 :
if ( window.innerWidth >= 736 ) {
$$( 'html' ).removeClass( 'with-statusbar-overlay' );
}
break;
default :
if ( window.innerWidth >= 414 ) {
$$( 'html' ).addClass( 'with-statusbar-overlay' );
}
break;
}
}
}
window.addEventListener( 'orientationchange', function() {
my_app_statusbar_toggle();
} );
window.addEventListener( 'load', function() {
my_app_statusbar_toggle();
} );
APK位置（未簽名）
$ C:\git\f7-vue-cord>phonegap run android自動打包成APK： \platforms\android\build\outputs\apk\android-debug.apk
對安卓盒子遙控器的支持
Android TV:cordova plugin add https://github.com/hughisaacs2/Cordova-Android-TV-Plugin.git
包含：上下左右鍵褒纲，OK鍵准夷，返回鍵
Changing Build API level Android Studio
For android studio users:right click the App directorychoose the "module setting" optionchange the ADK Platform as what you need
