上一篇：PhoneGap Hybrid APP 开发实战(1)：第一个 Android APK
注：绘本内容有版权，不会公开。只讨论开发过程。
关键字：PhoneGap Hybrid Framework7 Vue 打包 CrossWalk插件 TV插件 Media插件 适配Android4
中间有不少坑啊。。。还好，终于趟完了。现在第一个实用的英语绘本apk已经上线：手机、电视安卓盒子都能用，支持电视遥控器。
最终完成图：
推荐的 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
我们先来看看这个模板的结构：
- 创建
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可以实现开发阶段热替换！直接在Chrome浏览器中快速调试。
$ 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界面出现了！试用一下，是不是工作正常？
可以直接加入script to /package.json，以后直接npm run dev就行:
"scripts": {
"dev": "echo \"check http://127.0.0.1:8081/\" && phonegap run browser -- --lr"
},
调试方法1：如上，Chrome -> F12 -> 打开调试窗口
调试方法2：Phonegap Desktop（不能热更新）
打开Phonegap Desktop桌面版
把我们的项目目录，拖动到Phonegap Desktop
- 会变成绿色，点击
http://<IP>:3000，会自动运行 - 手机端运行Phonegap App，输入地址：
http://<IP>:3000 - Bingo！手机端也可以正常预览了，而且已经是原生App层面的预览了！
- 桌面端能实时看到交互：
调试方法2 - CLI：
生成
www目录：phonegap run browser，这个目录其实就是WebApp的生产输出了CLI：
phonegap serve，这个跟Phonegap Developer App效果一样根据CLI的提示地址，网页、手机都可以。在手机上打开Phonegap Developer App就行
-
调试方法3 - Remote Debug：
- 安卓真机，打开USB调试，USB连接电脑
phonegap run android- 等待1、2分钟，会自动打包，手机上会自动安装应用App
- 手机上可以体验啦
- 打开电脑Chrome:
chrome://inspect/，连接手机
Paste_Image.png - 可以同步调试：电脑上操作、手机上操作都可以，另外Console、Element也可以查看，非常有帮助
目录结构：
下一步，我们就要修改这些源文件，来实现我们的App！
静态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 表示资源的发布地址，当配置过该属性后，
#打包文件中所有通过相对路径引用的资源都会被配置的路径所替换。
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调试时，音频文件放入 /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
