Framework7 + cordova +AS 混合开发安卓app（二）

最新推荐文章于 2021-05-30 20:30:26 发布
最新推荐文章于 2021-05-30 20:30:26 发布
阅读量1.1k 收藏 1
点赞数 1
分类专栏： Web开发 文章标签： cordova Android Studio Framework7 app 安卓开发
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42883070/article/details/82115315
版权

四、cordova创建项目

创建项目

 cordova create hello com.example.hello HelloWorld

如果一切正常，本条命令将创建一名为hello的项目文件夹，com.example.hello是你的项目包名，它将生成一个基于web的应用程序，其主页是项目的www/index.html文件
添加平台

cd hello

显示切换至项目（hello）文件夹，此时你需要添加应用的操作平台，这里给出Android与ios的命令操作

cordova platform add ios
cordova platform add android

你也可以通过命令查询其他可添加操作平台的命令

cordova platform ls

此时，你的cordova项目已经创建完成，你可以在你的电脑上看到生成的文件夹，其结构如图：
这里写图片描述
如果你按照如图所示点击打开platforms文件夹，然后你会看到在命令行中所添加的操作平台，譬如我这里显示有Android和ios，接着我们打开Android文件夹，一直点击打开，直到你看到图片所示的目录结构，你会注意到assets下的www文件夹，它与我们前面在wamp软件文件夹下的www文件夹有着很多相似之处，事实上，我们需要将前面我们编写的HTML，Css，JavaScript等文件拷贝到这个地方，你会看到图片所示的结果
这里写图片描述

五、AS导入项目

操作步骤如下：
这里写图片描述
这里写图片描述
这里写图片描述
点击OK，你将看到如下界面
这里写图片描述
导入成功后，你将看到
这里写图片描述

六、cordova插件调用

在我们开发的过程中，我们需要用户手机允许APP调用一些程序，此时我们就不得不借助cordova插件，这里给出三个常用插件的说明
1、cordova-Camera插件
安装

cordova plugin add cordova-plugin-camera

调用

//图片来源
var pictureSource;

//设置返回值格式
var destinationType;

//当前请求调用硬件的页面标识
let g_camera_caller;

document.addEventListener("deviceready", onDeviceReady, false);

function onDeviceReady() {
  //加载后执行
  pictureSource = navigator.camera.PictureSourceType;
  destinationType = navigator.camera.DestinationType;
}


//当成功获取图片时以base64编码格式显示
function onPhotoDataSuccess(imageData) {
  console.log(imageData);
  let image_src = "data:image/jpeg;base64," + imageData;
}


//错误返回
function onFail(message) {
  app.dialog.alert('图片获取失败： ' + message);
}


/*
 *拍照函数
 */
function capturePhotoViaDevice() {
  navigator.camera.getPicture(onPhotoDataSuccess, onFail, {
    quality: 50,
    destinationType: destinationType.DATA_URL,
    allowEdit: true,
    correctOrientation: true,
    saveToPhotoAlbum: true
  });
}


/*
 *从图片库选择函数
 */
function getPhotoFromDevice() {
  navigator.camera.getPicture(onPhotoDataSuccess, onFail, {
    quality: 50,
    destinationType:destinationType.DATA_URL,
    allowEdit: true,
    correctOrientation: true,
    sourceType: pictureSource.PHOTOLIBRARY
  });
}

说明

这里推荐观看官方文档(https://cordova.apache.org/docs/en/dev/reference/cordova-plugin-camera/index.html)
或者可以看CSDN博客 cordova camera插件说明

2、cordova-Splashscreen插件
安装

cordova plugin add cordova-plugin-splashscreen

调用
一般来说，可以直接修改res文件夹下drawable-screen和mipmap-icon文件夹里面的图片，然后直接对应调用即可，需要注意的是，照片的像素一定要按规定对应
这里写图片描述
在AS的config.xml中配置以下信息

<platform name="android">  
    <icon density="ldpi" src="res/icon/android/drawable-ldpi/icon.png" />
    <icon density="mdpi" src="res/icon/android/drawable-mdpi/icon.png" />
    <icon density="hdpi" src="res/icon/android/drawable-hdpi/icon.png" />
    <icon density="xhdpi" src="res/icon/android/drawable-xhdpi/icon.png" />
    <icon density="xxhdpi" src="res/icon/android/drawable-xxhdpi/icon.png" />
    <!-- 以下是启动屏幕页面，可根据需要进行添加 -->
    <splash density="land-hdpi" src="res/screen/android/splash-land-hdpi.png" />  
    <splash density="land-ldpi" src="res/screen/android/splash-land-ldpi.png" />  
    <splash density="land-mdpi" src="res/screen/android/splash-land-mdpi.png" />  
    <splash density="land-xhdpi" src="res/screen/android/splash-land-xhdpi.png" />  
    <splash density="port-hdpi" src="res/screen/android/splash-port-hdpi.png" />  
    <splash density="port-ldpi" src="res/screen/android/splash-port-ldpi.png" />  
    <splash density="port-mdpi" src="res/screen/android/splash-port-mdpi.png" />  
    <splash density="port-xhdpi" src="res/screen/android/splash-port-xhdpi.png" />  
</platform>  
<platform name="ios">  
    <!-- iOS 8.0+ -->  
    <!-- iPhone 6 Plus  -->  
    <icon src="res/icon/ios/icon-60@3x.png" width="180" height="180" />  
    <!-- iOS 7.0+ -->  
    <!-- iPhone / iPod Touch  -->  
    <icon src="res/icon/ios/icon-60.png" width="60" height="60" />  
    <icon src="res/icon/ios/icon-60@2x.png" width="120" height="120" />  
    <!-- iPad -->  
    <icon src="res/icon/ios/icon-76.png" width="76" height="76" />  
    <icon src="res/icon/ios/icon-76@2x.png" width="152" height="152" />  
    <!-- iOS 6.1 -->  
    <!-- Spotlight Icon -->  
    <icon src="res/icon/ios/icon-40.png" width="40" height="40" />  
    <icon src="res/icon/ios/icon-40@2x.png" width="80" height="80" />  
    <!-- iPhone / iPod Touch -->  
    <icon src="res/icon/ios/icon.png" width="57" height="57" />  
    <icon src="res/icon/ios/icon@2x.png" width="114" height="114" />  
    <!-- iPad -->  
    <icon src="res/icon/ios/icon-72.png" width="72" height="72" />  
    <icon src="res/icon/ios/icon-72@2x.png" width="144" height="144" />  
    <!-- iPhone Spotlight and Settings Icon -->  
    <icon src="res/icon/ios/icon-small.png" width="29" height="29" />  
    <icon src="res/icon/ios/icon-small@2x.png" width="58" height="58" />  
    <!-- iPad Spotlight and Settings Icon -->  
    <icon src="res/icon/ios/icon-50.png" width="50" height="50" />  
    <icon src="res/icon/ios/icon-50@2x.png" width="100" height="100" />  
    <!-- 以下是欢迎页面，可根据需要进行添加 -->
    <splash src="res/screen/ios/Default~iphone.png" width="320" height="480"/>  
    <splash src="res/screen/ios/Default@2x~iphone.png" width="640" height="960"/>  
    <splash src="res/screen/ios/Default-Portrait~ipad.png" width="768" height="1024"/>  
    <splash src="res/screen/ios/Default-Portrait@2x~ipad.png" width="1536" height="2048"/>  
    <splash src="res/screen/ios/Default-Landscape~ipad.png" width="1024" height="768"/>  
    <splash src="res/screen/ios/Default-Landscape@2x~ipad.png" width="2048" height="1536"/>  
    <splash src="res/screen/ios/Default-568h@2x~iphone.png" width="640" height="1136"/>  
    <splash src="res/screen/ios/Default-667h.png" width="750" height="1334"/>  
    <splash src="res/screen/ios/Default-736h.png" width="1242" height="2208"/>  
    <splash src="res/screen/ios/Default-Landscape-736h.png" width="2208" height="1242"/>  
</platform>

这里需要注意的是，文件路径填写你的AS项目界面下显示的文件路径；
你还可以添加

<preference name="SplashScreenDelay" value="3000" />

设置启动页的时长，默认是3000，即3秒；
或者添加

<preference name="SplashScreen" value="screen" />

有时你可能想自己命名你的启动页文件名，这条代码可以帮你对应调用。

说明
这里推荐观看官方文档(https://cordova.apache.org/docs/en/dev/reference/cordova-plugin-splashscreen/index.html)

3、cordova-WeChat插件
准备
在安装调用之前，你需要创建一个安卓签名文件
你可以用命令行创建，查看这位博主的分享说明命令行创建安卓签名文件
博主使用的是AS创建签名文件，操作步骤如下：
这里写图片描述
这里写图片描述
选择文件存放路径：
选择文件路径
这里写图片描述
填写好相关信息后，点击OK即可创建成功。
创建成功后，你可以使用DOS命令将目录切换成donkor.jks文件目录下，输入keytool -list -v -keystore donkor.jks，按下回车键。输入keystore密码，获取到签名信息
当然你还有另一种方法，你可以通过一个软件输入包名自动生成签名信息 点击下载
它们一般是32位；
接下来，你需要去微信开放平台，获取你的APPID，你会看到如下界面
这里写图片描述
选择移动应用开发，再选择创建应用，你会看到
这里写图片描述
以及
这里写图片描述
注意：这里的应用包名一定要和cordova创建项目的包名一致，应用签名与打包时使用的签名文件一致
提交成功后，你可以在管理中心查看到接口信息
这里写图片描述
需要什么样的功能接口就去申请，会有一定的审核时间，你将获取到你的APPID，在接下来的步骤中它很重要

安装

cordova plugin add cordova-plugin-wechatv2 --variable wechatappid=YOUR_WECHAT_APPID

调用
微信插件的调用功能有很多，贴出常见的几种
检查安装

Wechat.isInstalled(function (installed) {
    alert("Wechat installed: " + (installed ? "Yes" : "No"));
}, function (reason) {
    alert("Failed: " + reason);
});

分享媒体

Wechat.share({
    message: {
        title: "Hi, there",
        description: "This is description.",
        thumb: "www/img/thumbnail.png",
        mediaTagName: "TEST-TAG-001",
        messageExt: "这是第三方带的测试字段",
        messageAction: "<action>dotalist</action>",
        media: "YOUR_MEDIA_OBJECT_HERE"
    },
    scene: Wechat.Scene.TIMELINE   // share to Timeline
}, function () {
    alert("Success");
}, function (reason) {
    alert("Failed: " + reason);
});

发送支付请求

var params = {
    partnerid: '10000100', // merchant id
    prepayid: 'wx201411101639507cbf6ffd8b0779950874', // prepay id
    noncestr: '1add1a30ac87aa2db72f57a2375d8fec', // nonce
    timestamp: '1439531364', // timestamp
    sign: '0CB01533B8C1EF103065174F50BCA001', // signed string
};
 
Wechat.sendPaymentRequest(params, function () {
    alert("Success");
}, function (reason) {
    alert("Failed: " + reason);
});

事实上，你在AS中导入项目后，你可以在wechat.js文件中查看相关方法说明
这里写图片描述
说明
请查看官方文档(https://open.weixin.qq.com/cgi-bin/showdocument?action=dir_list&t=resource/res_list&verify=1&id=1417751808&token=&lang=zh_CN)

3、cordova-Crosswalkt插件
安装

cordova plugin add cordova-plugin-crosswalk-webview

调用
安装成功后倒入AS编译时会自动从Crosswalk项目的下载网站(https://download.01.org/crosswalk/releases/crosswalk/android/)上取到稳定版本的Crosswalk WebView库，并且针对X86和ARM架构分别编译，因此，我们并不需要进行过多的配置调用，当然打包的时候我们会面临架构的选择，本项目APP经测试悬着armv7可支持在低端机（安卓5.1 处理器高通msm8916)以及普通机（安卓7.1 ）正常使用，由于时间以及测试条件有限，本测试仅供参考。
说明
这里贴出参考文档(https://crosswalk-project.org/documentation/cordova_zh.html?tdsourcetag=s_pctim_aiomsg)

七、AS配置文件

1.config.xml文件
一般来说，你会在config.xml文件看到如下代码

<?xml version='1.0' encoding='utf-8'?>
<widget id="com.hemaapp.cjzx" version="1.0.2">
    <feature name="Whitelist">
        <param name="android-package" value="org.apache.cordova.whitelist.WhitelistPlugin" />
        <param name="onload" value="true" />
    </feature>
    <name>
       testapp
    </name>
    <description>
     just a test
    </description>
    <author email="dev@cordova.apache.org" href="http://cordova.io">
       Ian Team
    </author>
    <content src="index.html" />
    <access origin="*" />
    <allow-intent href="http://*/*" />
    <allow-intent href="https://*/*" />
    <allow-intent href="tel:*" />
    <allow-intent href="sms:*" />
    <allow-intent href="mailto:*" />
    <allow-intent href="geo:*" />
    <allow-intent href="market:*" />
    <preference name="loglevel" value="DEBUG" />
    <feature name="Camera">
        <param name="android-package" value="org.apache.cordova.camera.CameraLauncher" />
    </feature>
    <feature name="SplashScreen">
        <param name="android-package" value="org.apache.cordova.splashscreen.SplashScreen" />
        <param name="onload" value="true" />
    </feature>

你可以在这里配置你的APP信息
version是你的APP当前版本号，可以帮助你在以后对APP进行区分
name是你的APP名称
description是你的APP描述
author 是你的信息
这里推荐官方文档说明（https://cordova.apache.org/docs/en/latest/config_ref/index.html）

2.string.xml文件
你会在string.xml中看到如下代码：

<?xml version='1.0' encoding='utf-8'?>
<resources>
    <string name="app_name">
        testapp
    </string>
    <string name="launcher_name">@string/app_name</string>
    <string name="activity_name">@string/launcher_name</string>
</resources>

它在很多地方都进行了调用，所以建议修改其中的app_name为你的APP名称。

3.AndroidManifes.xml文件
在cordova打包的项目中，我们不需要对本文件做过多的配置，不过注意的是以下代码：

android:versionCode="1" android:versionName="1.0.0"

说明如下：
android:versionCode 是用于版本升级的，int类型，一般我们会把第一个版本定义为1，以此递增，通过判断该值确定是否需要升级更新APP，不对用户显示；
android:versionName 是APP版本号，string类型，一般定义为1.0/1.0.0等，面向用户显示。

八、AS打包apk

操作步骤如下：
这里写图片描述
点击选择已存在的key,进入到key的文件路径
注意：这里的签名文件一定要使用在微信开放平台登记的签名文件，否则会调用微信插件失败
这里写图片描述
这里写图片描述
打包成功后，可以看到
这里写图片描述
点击locate，弹出apk所在位置
这里写图片描述
至此项目结束，特别鸣谢Owen Tsai的指导，以及CSDN中众多前辈的文档的指导，有不对之处请多多指教。
联系我：770707149@qq.com

Ian Wong
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Cordova+Framework7混合App开发
盼盼盼的博客
06-11 1239
1.初始化Framework7项目 执行以下命令 git clone https://github.com/nolimits4web/Framework7-Vue-Webpack-Template my-app //进入项目文件 npm install npm run dev 浏览器会默认打开localhost:8080 想打包生产环境代码，执行 npm run build-prod 2.初...
Framework7—— 混合开发
weixin_30633949的博客
09-18 213
下载模板 地址：https://github.com/framework7io/framework7-template-vue-webpack git clone https://github.com/framework7io/framework7-template-vue-webpack my-app cd my-app npm install npm run dev 应用程序将在浏览器中打开...
HiApp一个简单而有趣基于Framework7开发的混合应用
08-10
HiApp一个简单而有趣基于Framework7开发的混合应用。利用Cordova ，你可以轻松地将其转换为本机iOS应用程序。
Framework7+Cordova+Android开发步骤
lweiyue的专栏
09-02 517
一、安装好基础环境 环境包括： Android Studio JDK 8 node.js cordova 安装完成以下，记得重启电脑，不然会出现一系列的问题。 二、下载模板 执行以下语句： cordova create [Path] [ID] [Name] --template cordova-template-framework7-vue-webpack Path：项目路径...
Framework7 操作手册
02-16
Framework7 是一个开源免费的框架。可以用来开发混合移动应用（原生和 HTML 混合）或者开发 iOS & Android 风格的 WEB APP。也可以用来作为原型开发工具，可以迅速创建一个应用的原型。
基于Cordova + Framework7 + React + Webpack构建混合App.zip
02-15
包含前端、后端、移动开发、操作系统、人工智能、物联网、信息化管理、数据库、硬件开发、大数据、课程资源、音视频、网站开发等各种技术项目的源码。 包括STM32、ESP8266、PHP、QT、Linux、iOS、C++、Java、python...
Cordova+Vue实现Android-APP开发
最新发布
07-12
android vue，Cordova+Vue实现Android-APP开发
vue+cordova+mui制作的移动app
10-08
Vue.js、Cordova和Mui是三个在Web应用开发领域中常用的技术栈，它们结合在一起可以构建跨平台的移动应用程序。让我们深入了解一下这三个技术的核心特点和它们如何协同工作。 Vue.js 是一个轻量级的前端JavaScript...
基于ionic+cordova+angularJs搭建移动端App
12-12
基于ionic+cordova+angularJs搭建移动端App开发环境。
ionic4+angular7+cordova上传图片功能的实例代码
10-16
ionic是一个垮平台开发框架，可通过web技术开发出多平台的应用。这篇文章主要介绍了ionic4+angular7+cordova上传图片功能，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值 ,需要的朋友可以参考下
cordova-plugin-wechat-master
12-09
cordova 微信分享插件，这是一个很不错的Demo，适合初学者！
关于MUI框架混合AS开发app项目中遇到的百度地图闪退，不显示地图问题的一次记录...
weixin_30918633的博客
08-08 284
才进入公司就让我解决MUI混合app出现的BUG，让只会纯纯原生的我有点崩溃，三天就要结果，不过幸不辱命，今天我把这个问题解决了。 这个BUG是：百度地图崩溃导致应用闪退 上图是H5+androidSDK的开发文档，http://ask.dcloud.net.cn/docs/#//ask.dcloud.net.cn/article/104这是文档网址 ...
AS+phoneGap+Cordova把网站打包签名成apk
无论何时都不要停止学习，这是改变自己的必要条件
08-17 3311
一、安装环境：win7（其他的大致道理应该也是这些步骤） 注意：要根据自己电脑32位或64进行对应的下载1、JDKhttp://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html2、nodejshttps://nodejs.org/en/download/3、apache anthttp://an
初识Framework7，搭建app手机端项目
lxhuang_14的博客
12-11 8516
写在前面：在Framework7 （以下简称F7）的官方文档中提到“因为Framework7是通过Ajax在不同页面间跳转的，所以你需要启动一个 http 服务器才可以（不要直接打开本地文件)”，使用工具HBuilder，创建移动App项目，可以解决这个问题，实现页面间的跳转。 下载Framework 地址：Framework官网地址 选择“下载”，完成之后，解压即可 HBulider工具 下
用Framework7开发App记录和经验
romiya的博客
06-25 6390
Framework7 是一个开源免费的框架可以用来开发混合移动应用（原生和HTML混合）或者开发 iOS &amp; Android 风格的WEB APP。也可以用来作为原型开发工具，可以迅速创建一个应用的原型。使用时只需要一个基本的 HTML 布局，并且把 Framework7 的 CSS 和 JS 文件引入即可！Framework7 不会强制你写任何自定义的标签，也不会通过 JS 来生成任何额...
新型的移动网页开发框架——Framework7（简介）
u010846789的专栏
07-27 5491
Framwork 7是一个移动网页前端开发框架，支持WebKit内核的浏览器，目前主流的iosx
cordova安装android平台,Android集成Cordova
weixin_35911307的博客
05-30 928
导语Apache Cordova是一个开源的移动开发框架。允许你用标准的web技术-HTML5,CSS3和JavaScript做跨平台开发。 应用在每个平台的具体执行被封装了起来，并依靠符合标准的API绑定去访问每个设备的功能，比如说：传感器、数据、网络状态等。使用Apache Cordova的人群:移动应用开发者，想扩展一个应用的使用平台，而不通过每个平台的语言和工具集重新实现。web开发者，想...
js实现安卓toast效果（Framework7框架）
卓洛不迷路的博客
11-23 4032
js实现安卓toast效果（Framework7框架）
Android的AlertDialog详解
mmdev
05-04 802
AlertDialog的构造方法全部是Protected的，所以不能直接通过new一个AlertDialog来创建出一个AlertDialog。 要创建一个AlertDialog，就要用到AlertDialog.Builder中的create()方法。 使用AlertDialog.Builder创建对话框需要了解以下几个方法： setTitle ：为对话框设置标题 setIcon ：为对话...
vscode如何将vue+vite代码打包成安卓app
06-12
构建完成后，可以在 `platforms/android/app/build/outputs/apk/debug/` 目录下找到 `app-debug.apk` 文件，这就是你的安卓应用程序。 以上就是将 Vue + Vite 项目打包成安卓 App 的基本步骤，你可以根据自己的实际...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值