PhoneGap Hybrid APP 开发实战(2)：Fram

作者: 非梦nj | 来源:发表于2017-05-08 09:32 被阅读2271次

上一篇：PhoneGap Hybrid APP 开发实战(1)：第一个 Android APK
注：绘本内容有版权，不会公开。只讨论开发过程。

关键字：PhoneGap Hybrid Framework7 Vue 打包 CrossWalk插件 TV插件 Media插件适配Android4

中间有不少坑啊。。。还好，终于趟完了。现在第一个实用的英语绘本apk已经上线：手机、电视安卓盒子都能用，支持电视遥控器。

最终完成图：

Paste_Image.png

推荐的 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界面出现了！试用一下，是不是工作正常？

Paste_Image.png

可以直接加入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

Paste_Image.png

会变成绿色，点击http://<IP>:3000，会自动运行
手机端运行Phonegap App，输入地址：http://<IP>:3000
Bingo！手机端也可以正常预览了，而且已经是原生App层面的预览了！
桌面端能实时看到交互：

Paste_Image.png

调试方法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也可以查看，非常有帮助
目录结构：

傲游截图20170510221211.png

下一步，我们就要修改这些源文件，来实现我们的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

下一篇： PhoneGap Hybrid APP 开发实战(3)：用户登录鉴权

网友评论

本文标题：PhoneGap Hybrid APP 开发实战(2)：Fram

本文链接：https://www.haomeiwen.com/subject/ppcmtxtx.html

延伸阅读

深度阅读

您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

PhoneGap Hybrid APP 开发实战(2)：Fram

关键字：PhoneGap Hybrid Framework7 Vue 打包 CrossWalk插件 TV插件 Media插件适配Android4

推荐的 Framework7+Vue.js 模板：cordova-template-framework7-vue-webpack

我们先来看看这个模板的结构：

静态static、资源文件assets

以下是一些可能会遇到的坑，碰到问题记得回来搜一下：

android-minSdkVersion | Android Developers

run android时报错：Error: Could not find gradle wrapper within Android SDK. Might need to update your Android SDK - Android

Media插件，播放Android本地音频文件

打开了“pushState: true”功能，有时刷新会报错：

安卓全屏：

判断手机横向还是竖向

APK位置（未签名）

对安卓盒子遥控器的支持

Changing Build API level Android Studio

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

Web前端之路

程序员

Vue.js专区

Vue.js开发技巧

PhoneGap Hybrid APP 开发实战(2)：Fram

关键字：PhoneGap Hybrid Framework7 Vue 打包 CrossWalk插件 TV插件 Media插件 适配Android4

推荐的 Framework7+Vue.js 模板：cordova-template-framework7-vue-webpack

我们先来看看这个模板的结构：

静态static、资源文件assets

以下是一些可能会遇到的坑，碰到问题记得回来搜一下：

android-minSdkVersion | Android Developers

run android时报错：Error: Could not find gradle wrapper within Android SDK. Might need to update your Android SDK - Android

Media插件，播放Android本地音频文件

打开了“pushState: true”功能，有时刷新会报错：

安卓全屏：

判断手机横向还是竖向

APK位置（未签名）

对安卓盒子遥控器的支持

Changing Build API level Android Studio

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

Web前端之路

程序员

Vue.js专区

Vue.js开发技巧

关键字：PhoneGap Hybrid Framework7 Vue 打包 CrossWalk插件 TV插件 Media插件适配Android4