精华内容
下载资源
问答
  • 最流行的两种vue打包成apk框架 1、使用Dcloud-HbuilderX打包app 基础打包(可以忽略) 配置manifest.json文件 在HbuilderX中找到:发行—>原生app打包(云打包) 注意HbulderX一个账号只打包5次。 等待一段时间打包...

    最流行的两种vue打包成apk框架

    1、使用Dcloud-HbuilderX打包app

    • 基础打包(可以忽略)

      • 配置manifest.json文件
      • 在HbuilderX中找到:发行—>原生app打包(云打包)
      • 注意HbulderX一个账号只打包5次。
      • 等待一段时间打包成功,查询打包状态,返回一个网站,打开下载即可。
    • Vue项目打包app

      • 打包Vue项目前得修改vue.config.js文件(如果没有在项目根目录新建)

        module.exports = {
          publicPath: './',
        }
      • 把vue项目打包成开发模式

        • 运行 npm run build
      • 然后把开发模式的dist文件复制到HBuilderX中

      • 然后复制一个manifest.json文件到dist中与HBuilder项目文件保持一致。

    在这里插入图片描述

    + manifest.json可以再HBuilderX中新建一个5+app项目来获取
    

    在这里插入图片描述

    • 修改manifest.json文件配置
      在这里插入图片描述
    • 进行云打包或本地打包。

    在这里插入图片描述

    • 如果遇到打开项目空白的坑(一般修改vue中的vue.config.js文件就没问题)

      • 暂时可以修改进入口文件来解决
      • 进入manifest.json文件选择基础配置—>修改应用入口文件
      • 修改成可运行的网站即可,例如:http://xxxx:9902
      • 它可以通过网站进入你的vue项目,但前提得把vue项目运行并获取到此网站地址。

    2、使用Cordova打包Vue app

    • 首先安装全局Cordova

    npm i -g cordova

    • 选择一个文件夹并创建Cordova项目
    cordova create cordova-project
    • 切换到项目中并添加Android平台
    cd cordova-project
    cordova platform add android --save
    • 基础cordova环境是否能过继续

    cordova requirements

    • 如有一处没有通过,即可百度搜索解决

    • 最有可能出现的错误是未安装Gradle

      • 解决:进去[官网下载传送门][https://gradle.org/releases/]
      • 下载后解压并复制bin路径
      • 填入到环境变量中
      • gradle -version检测是否安装成功
    • 如果需要打包vue项目apk得

      • 首先修改vue项目中的vue.config.js(如果没有在项目根路径创建)

        module.exports = {
          publicPath: '',
        }
      • 打包成dist文件

        npm run build

      • 将vue打包后的dist里的所有文件替换到cordova**创建的项目(cordova-project)**里的www文件里。

    • 运行到手机:如果运行失败,可尝试打包apk

    cordova run android
    
    • 打包apk(他会给你个地址进入取出即可)
    cordova build android
    
    • 如果想要修改打包后的apk名以及apk图标

    名字:config.xml文件

    k(他会给你个地址进入取出即可)

    cordova build android
    
    • 如果想要修改打包后的apk名以及apk图标

    名字:config.xml文件

    图表:进入cordova-project文件里的platforms里的android后面文件结构与androidstudio一样。

    展开全文
  • Vue.js2.0教程.apk

    2018-10-13 00:20:03
    Vue.js 是用于构建交互式的 Web 界面的库。 Vue.js 提供了 MVVM 数据绑定和一个可组合的组件系统,具有简单、灵活的 API。这是vue教程,打包成app方便阅读。
  • 直接上代码,组件html 白名单应用: 应用包名: apk文件名 包名 应用名 VUE的实现: data() { return { newpagesBAPPINSTALL: {}, pagesBAPPINSTALLs: [], pagesBAPPINSTALLlist:[],//获取发送给后端的配置 } } ...

     

    见上图,两种方式获取包名,1.选择apk,点击读取实现;2.直接输入包名(前提是你得知道APK得包名),点击添加。

    我们来实现通过1方法选择APK方式实现

    事前准备下载:app-info-parser-master这个插件,这个插件可以支持安卓的应用APK,也可以支持ios的应用ipa

    这个是直接选择APK的路径,我是是通过选择自动获取 const parser = new AppInfoParser(files[0]);

    直接上代码,组件html

     <p style="margin-left: 230px;" id="BappInstallCSX">
                                <p style="margin-left: 230px;display:none;" id="BPappInstall1">
                                    白名单应用:<input type="file" style="width: 200px; height: 30px;" accept=".apk" id="BfileappInstallC"  οnchange="BappSelect()"/>
                                               <input type="button" value="读取" style="margin-top: -10px;" onclick="BappSelect()"/>
                                </p>
    
                                <p style="margin-left: 230px;display:none;" id="BPappInstall2">
                                    应用包名:<input type="text" style="width: 150px; height: 15px;" id="BinputappInstallC"/>
                                             <input type="button" value="添加" style="margin-top: -10px;" onclick="addBPappInstall()"/>
                                             <input type="button" value="删除" style="margin-top: -10px;" onclick="deleBPappInstall()"/>
                                </p>
    
                                  <table style="margin-left: 230px;align-self: auto; text-align: center;display:none;"class="appInstallCtable" id="BappInstallCtableid">
                                    <thead style="background-color:#acabac;border-style:solid;border-width:1px;" class="appInstallCthead">
                                      <tr class="appInstallCheader">
                                         <th> </th>
                                         <th>apk文件名 </th>
                                         <th>包名 </th>
                                         <th>应用名 </th>
                                      </tr>
                                    </thead>
                                    <tbody id="BappInstallCtbody" class="appInstallCtbody" style="background-color: #FCFDFD;color: #414C5E;border-top: 1px solid #D6DBDF;border-bottom: 1px solid #D6DBDF;">
                                      <!-- js中动态拼接-->
                                    </tbody>
                                  </table>
                            </p>

    VUE的实现:

    data() {
      return {
    
          newpagesBAPPINSTALL: {},
          pagesBAPPINSTALLs: [],
          pagesBAPPINSTALLlist:[],//获取发送给后端的配置      
    
      }
    }
    
    methods: {
    
    
     BappSelect1(){//选择文件按钮,判断是否是apk
                  var objFile = document.getElementById('BfileappInstallC').files[0];//获取文件内容对象
                  var objStr = /\.(apk)$/; //文件类型正则验证
                  if(!objStr.test(objFile.name)){
                    this.$alert('请选择正确的APK!', '警告', {
                            confirmButtonText: '确定',
                            // callback: action => {
                            //     this.$message({
                            //         type: 'info',
                            //         message: `action: ${ action }`
                            //     });
                            // }
                      });
                    return false;
                  } 
           },
           BappSelect(){ //点击添加按钮
                  let AppInfoParser = require('../../../../build/app-info-parser-master/dist/app-info-parser.js');
                  const files = document.getElementById('BfileappInstallC').files;
                  console.log("aaa"+JSON.stringify(files))
                  const parser = new AppInfoParser(files[0]);
                  console.log("bbb"+ JSON.stringify(parser))
                  parser.parse().then(result => {
                    console.log('app info ----> ', result);
                    console.log('包名:', result.package);
                    console.log('BfileappInstallC buffer ----> ', parser.file);
                    console.log("APK名称"+parser.file.name);
    
                    let APKname = parser.file.name; //APK文件名
                    let PACKname = result.package;//包名
                    let APPname = " ";//应用名
                    let APKList = {"newpagesBAPPINSTALL":APKname,"inputUSERBAPPINSTALLC":PACKname,"apkUSERBAPPINSTALLC":APPname}
                    this.pagesBAPPINSTALLs.push(APKList);//添加显示出来之用
                    this.pagesBAPPINSTALLlist.push(PACKname);//收集数据发送给后端
                    
                    // BPappInstallpp.push(APKname);
                    // BPappInstallpp.push(PACKname);
                    // BPappInstallpp.push(APPname);
    
                  }).catch(err => {
                    this.$alert('无法获取apk信息,请检查!', '警告', {
                            confirmButtonText: '确定',
                            // callback: action => {
                            //     this.$message({
                            //         type: 'info',
                            //         message: `action: ${ action }`
                            //     });
                            // }
                      });
                    console.log('无法获取apk信息 ----> ', err)
                  })
           },
           addBPappInstall(){
               if (this.newpagesBAPPINSTALL.inputUSERBAPPINSTALLC == "" || this.newpagesBAPPINSTALL.inputUSERBAPPINSTALLC == null){
                   this.$alert('包名不能为空!', '警告', {
                            confirmButtonText: '确定',
                            // callback: action => {
                            //     this.$message({
                            //         type: 'info',
                            //         message: `action: ${ action }`
                            //     });
                            // }
                      });
               }else{
                   this.pagesBAPPINSTALLs.push(this.newpagesBAPPINSTALL);//把获取的APK放到表格中展示
                   this.pagesBAPPINSTALLlist.push(this.newpagesBAPPINSTALL.inputUSERBAPPINSTALLC);//获取的参数要转给后台
                   this.newpagesBAPPINSTALL = {inputUSERBAPPINSTALLC:""};//置空,否则重复添加按钮内容重复
               }
           },
    }

     

    扩展:

    我们选择APK文件的时候可以先判断一下。JQ/JS写法:

     $(document).ready(function(){//监听选择文件--判断选的是不是APK
        $("#BfileappInstallC").change(function(evt){
          var objFile = document.getElementById('BfileappInstallC').files[0];//获取文件内容对象
          var objStr = /\.(apk)$/; //文件类型正则验证
          if(!objStr.test(objFile.name)){
            alert("请选择正确的APK");
            return false;
          }
        });
        $("#HfileappInstallC").change(function(evt){
          var objFile = document.getElementById('HfileappInstallC').files[0];//获取文件内容对象
          console.log("aaa"+ objFile);
          var objStr = /\.(apk)$/; //文件类型正则验证
          if(!objStr.test(objFile.name)){
            alert("请选择正确的APK");
            return false;
          }
    
        });
       });

    选择文件后,直接点击读取按钮,然后就会获取APK信息,我这里只取APK包名。

     function BappSelect () {//读取APK包名的方法
            const files = document.getElementById('BfileappInstallC').files;
            console.log("aaa"+JSON.stringify(files) )
            const parser = new AppInfoParser(files[0]);
            console.log("bbb"+ JSON.stringify(parser))
            parser.parse().then(result => {
              console.log('app info ----> ', result);
              console.log('包名:', result.package);
              console.log('BfileappInstallC buffer ----> ', parser.file);
              console.log("APK名称"+parser.file.name);
              // document.getElementById('BinputappInstallC').value = result.package;
    
              var APKname = parser.file.name; //APK文件名
              var PACKname = result.package;//包名
              var APPname = " ";//应用名
              var str = "";
              var checkbox='<input type="checkbox" name="appInstallCcheckId" class="appInstallCcheckbox" id="appInstallCcekall" >';
              str = "<tr><td>" + checkbox +"</td><td>"+APKname+"</td><td>"+PACKname+"</td><td>"+APPname+"</td></tr>";
              BPappInstallpp.push(APKname);
              BPappInstallpp.push(PACKname);
              BPappInstallpp.push(APPname);
              if(APKname == "" || APKname == null){
                 alert("包名不能为空!!!");
              }else{
                $(".appInstallCtbody").append(str);
              }
    
            }).catch(err => {
              alert("无法获取apk信息,请检查!");
              console.log('无法获取apk信息 ----> ', err)
            })
      }
    
    //添加按钮方法
    function addBPappInstall(){ //添加APK包名到输入框
    
         var APKname = ""; //APK文件名
         var PACKname = document.getElementById("BinputappInstallC").value;//包名
         var APPname = "";//应用名
         var str = "";
         var checkbox='<input type="checkbox" name="appInstallCcheckId" class="appInstallCcheckbox" id="appInstallCcekall" >';
         str = "<tr><td>" + checkbox +"</td><td>"+APKname+"</td><td>"+PACKname+"</td><td>"+APPname+"</td></tr>";
          BPappInstallpp.push(APKname);
          BPappInstallpp.push(PACKname);
          BPappInstallpp.push(APPname);
    
         if(PACKname == "" || PACKname == null || PACKname == " "){
           alert("白名单不能为空!!!");
         }else{
           $(".appInstallCtbody").append(str);
         }
         $("#BinputappInstallC").val("");
      }

     

    简化下上面的代码:

    就是导入APK,直接就读取了

    appSelect1(){//选择文件按钮,判断是否是apk
                  var objFile = document.getElementById('appPush').files[0];//获取文件内容对象
                  var objStr = /\.(apk)$/; //文件类型正则验证
                  if(!objStr.test(objFile.name)){
                    this.$alert('请选择正确的APK!', '警告', {
                            confirmButtonText: '确定',
                      });
                    return false;
                  }
                  this.appSelect();//直接就调用实现apk读取
            },
    appSelect(){
                    let AppInfoParser = require('../../build/app-info-parser-master/dist/app-info-parser.min');
                    const files = document.getElementById('appPush').files;
                    console.log("aaa"+JSON.stringify(files))
                    const parser = new AppInfoParser(files[0]);
                    console.log("bbb"+ JSON.stringify(parser))
    
                    parser.parse().then(result => {
                        console.log('app info ----> ', result);
                        console.log('包名:', result.package);
                        console.log("图片路径:"+result.icon);
                        console.log("版本号:"+result.versionName);
                        console.log("应用名称:"+result.application.label);
                        console.log('appPush buffer ----> ', parser.file);//等同于files[0]
                        console.log("APK名称:"+parser.file.name);
                        
                        //这里需要什么就要什么,看看上面打印的
    
    
                    }).catch(err => {
                        this.$alert('无法获取apk信息,请检查!', '警告', {
                                confirmButtonText: '确定',
                        });
                        console.log('无法获取apk信息 ----> ', err)
                    })
            },

    注意:原生的选择文件按钮和element使用是有细微差别的,详情请看:https://blog.csdn.net/bbs11007/article/details/117749289

     

    读取到的信息打印:

     

    或者通过另个插件下载:https://github.com/chen2009277025/nodejs_apkTool

    参考:https://blog.51cto.com/snaile/1727234

    来实现apk的相关操作

    展开全文
  • Cordova + vue 打包安卓[Android] apkApk版本自动升级及安装[实时获取下载进度]准备一、Cordova + vue 打包安卓(Android) apk1.安装Cordova环境2.新建Cordova项目(建议放在英文目录下)3.Vue项目打包放入...

    提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档


    准备

    环境:node.js , 安卓sbk , jdk , npm
    node.js官网: https://nodejs.org/zh-cn/ 下载安装node.js , 安装完成后在命令行(cmd)中使用“node -v”,检验是否安装成功。
    npm:新版node已经集成了npm,在命令行输入“npm -v”,测试是否安装成功。


    一、Cordova + vue 打包安卓(Android) apk

    1.安装Cordova环境

    使用:

    npm install -g cordova 
    

    来全局安装cordova
    安装完成后使用:cordova -v 检验是否安装成功
    在这里插入图片描述

    2.新建Cordova项目(建议放在英文目录下)

    执行行命令

    cordova create myApp
    

    myapp - cordova目录名

    cd myApp 进入目录

    使用命令

    cordova platform add android
    

    来生成Android平台的cordova库,这时platforms文件夹中会生成一个android文件夹。
    在生成的cordova文件中 :
    config.xml -包含应用相关信息,使用到的插件以及面向的平台
    platforms – 包含应用运行平台如 Android 和 iOS 上对应的 Cordova 库
    plugins – 包含应用所需插件的 Cordova 库,使得应用能够访问例如照相机和电池状态相关的事项。
    www – 包含应用源代码,例如 HTML, JavaScript 和 CSS 文件
    hooks – 包含为个性化应用编译系统所需的脚本

    到这里,cordova项目就已经建好了。

    3.Vue项目打包放入cordova项目

    (如果还没有vue项目请看这篇博客:https://www.cnblogs.com/qirui/p/8421372.html)

    需要先将vue.config.js中publicPath属性改为:”/” (没有vue.config.js文件可以百度一个模板自己在根目录创建一个)
    在这里插入图片描述
    然后使用打包命令

    npm run build
    

    之后将打包文件夹下的文件(默认打包在dist文件夹下)全部复制到cordova项目下的www目录中(将原先www目录中的文件全部删除)

    4.调试打包apk软件

    在打包之前,检查打包相关环境是否正确安装,在cordova项目文件夹下执行命令。

    cordova requirements
    

    即可查看当前环境中安装情况。显示如下即标识环境正确安装。(确认安装正确即可,不需要每次都去进行检查)
    在这里插入图片描述
    联调Android软件(需要连接真机或模拟器)

    cordova run android
    

    5.打包成安卓apk

    执行命令

    cordova build android -release
    

    即可打包为发布版apk
    在这里插入图片描述
    红框标出来的就是apk所在的路径

    6.APK签名

    APK都必须经过数字签名后才能安装到设备上,签名需要对应的证书(keystore),大部分情况下 APK 都采用的自签名证书,就是自己生成证书然后给应用签名。
    数字签名证书是给APK打包所必需的文件,所以要先把数字签名证书生成。

    在命令行输入:

    keytool -genkey -v -keystore D:\mytest.keystore -alias mytest -keyalg RSA -validity 20000
    

    -keystore D:/mytest.keystore表示生成的证书及其存放路径,如果直接写文件名则默认生成在用户当前目录下;
    -alias mytest 表示证书的别名是mytest,不写这一项的话证书名字默认是mykey;
    -keyalg RSA 表示采用的RSA算法;
    -validity 20000表示证书的有效期是20000天。

    填写完相关信息后在最后[否]那里输入y
    在这里插入图片描述
    生成后的证书文件
    在这里插入图片描述

    之后将证书与apk放在同一目录下
    命令行输入:

    jarsigner -verbose -sigalg SHA1withRSA -digestalg SHA1 -keystore myapp.keystore app-release-unsigned.apk myapp
    

    进行签名操作
    在这里插入图片描述
    此时apk就已经是带签名的apk了。

    7.常见的问题

    在这里插入图片描述
    大概意思就是说打包的目录有中文, 可以在配置文件中加入android.overridePathCheck=true来忽略此错误。
    …\myapp\platforms\android 在这个目录下找到gradle.properties文件。
    在这里插入图片描述
    将android.overridePathCheck=true 加入即可
    在这里插入图片描述

    二、Apk版本自动升级及安装(实时获取下载进度)

    1.安装安卓插件

    进入cordova项目根目录
    输入命令行

    cordova plugin add cordova-plugin-app-version //获取版本号
    cordova plugin add cordova-plugin-file
    cordova plugin add cordova-plugin-file-opener2
    cordova plugin add cordova-plugin-file-transfer
    cordova plugin add cordova-plugin-whitelist
    

    2.添加cordova.js

    vue项目的index.html中加入

    <script src="cordova.js"></script>在这里插入图片描述

    3.创建版本更新js

    创建upgrade.js

    import apis from '@/request'
    import { Dialog } from 'vant';
    
    Dialog.setDefaultOptions({
        confirmButtonColor:"#006BE0",
        closeOnPopstate:false
    })
    //检测新版本升级
    export function upgradeForAndroid(releasePath, packageName) {
        //从window中获取Cordova对象
    var cordova = window.cordova
    //apk所在的服务器路径(下载路径)
        var url = process.env.VUE_APP_APK_URL + process.env.VUE_APP_APK_NAME + ".apk"; 
        var targetPath = cordova.file.externalCacheDirectory + "Download/Pass/" + "test.apk"; //要下载的目标路径及文件名(本地存储路径)
        var trustHosts = true;
        var options = {};
        console.log("url:" + url);
        console.log("targetPah:" + targetPath);
        console.log("trustHost:" + trustHosts);
        downLoadApp();
        function downLoadApp() {
            // 初始化FileTransfer对象
            // eslint-disable-next-line no-undef
            var fileTransfer = new FileTransfer();
            fileTransfer.onprogress = function (progressEvent) {
                if (progressEvent.lengthComputable) {
                    var downloadProgress = (progressEvent.loaded / progressEvent.total) * 100;
                    var result = "已下载:" + Math.floor(downloadProgress) + "%";
                    console.log(result,"已经下载")
                    
                    if(Math.floor(downloadProgress) == 100){
                        Dialog.alert({
                            title: result,
                            message:"下载完成后会自动弹出安装",
                            showConfirmButton:false,
                            showCancelButton:true
                        }).then(
                        ).catch(() => {
                            // on cancel
                            navigator.app.exitApp();
                        })
                    }else{
                        Dialog.alert({
                            title: result,
                            message:"下载完成后会自动弹出安装",
                            showConfirmButton:false,
                            showCancelButton:false
                        })
                    }
                }
            };
            // 调用download方法
            fileTransfer.download(
                url, //uri网络下载路径
                targetPath, //url本地存储路径
                function (entry) {
                    console.log("download complete: " + entry.toURL());
                    cordova.plugins.fileOpener2.open(
                        targetPath,
                        'application/vnd.android.package-archive',
                        {
                            error: function (e) {
                                console.log('Error status: ' + e.status + ' - Error message: ' + e.message);
                                Dialog.alert({
                                    title: "打开下载文件失败",
                                    message:"请退出后重新进入应用",
                                }).then(res => {
                                    navigator.app.exitApp();
                                })
                            },
                            success: function () {
                                console.log('open successfully');
                            }
                        })
                },
                function (error) {
                    // AlertModule.show({ title: "下载失败" })
                    console.log("download error source " + error.source);
                    console.log("download error target " + error.target);
                    console.log("upload error code" + error.code);
                }
            );
        }
    }
    /*
     * 检测升级方法
     */
    export function checkUpgrade(locationVersion) {
        /**
        * 从服务器获取应用的版本信息,和本地应用版本对比
        */
        apis.updateVersion.getAppVersion().then(response => {
            if(response != null){
                var serverVersion = response.data.appVersion;
                //获取本地App版本;
                console.log("本地版本:" + locationVersion);
                console.log("服务器版本:" + serverVersion);
                var locationVersionNum = parseInt(locationVersion.replace(/\./g,""))
                var serverVersionNum = parseInt(serverVersion.replace(/\./g,""))
                if(locationVersionNum < serverVersionNum){
                    Dialog.confirm({
                        title: '发现版本: ' + serverVersion + ',请进行升级',
                        message: '建议您在WIFI环境下升级',
                    }).then(() => {
                        // on confirm
                        upgradeForAndroid()
                    }).catch(() => {
                        // on cancel
                        navigator.app.exitApp();
                    });
                }
            }
        })
        // 监听网络状况,无网络时
        document.addEventListener('offline', function () {
            console.log("网络异常,不能连接到服务器!");
            Dialog.alert({
                title:"网络异常,不能连接到服务器!",
                message:"请在连接网络的情况下升级应用"
            }).then(() => {
                navigator.app.exitApp();
            })
        }, false);
    }
    

    apis:封装的请求实例
    Dialog:弹窗组件 这里引用的是v-vant的弹窗插件

    4.调用版本更新

    在进入app的地方调用这个js中的方法
    在这里插入图片描述
    在这里插入图片描述
    服务端需要做的就是需要存储一个当前的版本号供app发请求去和本地的版本号做对比,还有将新版本的apk上传到服务器的一个位置供app去下载。

    5.打包注意事项

    打包时要注意将版本号升级
    进入cordova项目的根目录找到config.xml
    在这里插入图片描述
    在这里更改版本号
    在这里插入图片描述

    6.其他注意事项

    安卓9.0版本以上请求必须使用https请求,否则请求会被强制结束,状态码返回0

    如果需要使用http请求,在(…/platforms/android/app/src/main/AndroidManifest.xml)加入android:usesCleartextTraffic="true
    在这里插入图片描述
    在这里插入图片描述
    即可解决该问题。

    展开全文
  • 因工作需要,需要我这边做一个将vue打包成apk的需求,搜索了很多资料,得到三种方法, 1. 是用apiClound来制作apk,官网入口 2. HBuilder 打包成apk 资料1 3. 用 vue+cordova打包 Android的apk 这里说一下第三...

    前言:

            因工作需要,需要我这边做一个将vue打包成apk的需求,搜索了很多资料,得到三种方法,

    1. 是用apiClound来制作apk官网入口  

    2. HBuilder 打包成apk  资料1  

    3. 用 vue+cordova打包 Androidapk

    这里说一下第三种方法:

    步骤一:cordova

    1. 全局安装环境   

          npm install -g cordova

    2.  创建 cordova 项目(直接使用就好了)

           (1)创建项目:cordova create cordova-app com.ysh mapp

           *注释:(1)名称是mapp,

                       (2)包名是com.ysh,

                       (3)项目名是cordova-app

           (2)安装依赖:cordova platform add android

    3.将上面的vue项目中的dist目录下的文件全部拷贝到cordova项目的www目录下

    注意:除了vue项目,,在此送大家2020 最新企业级Vue3.0/Js/ES6/TS/React/node等实战视频教程,点击此处  免费获取,小白勿入哦,

    步骤二:要运行打包成安卓的apk,需要配置安卓的环境

    注意:没有apk,直接运行打包命令会报错:Failed to find 'ANDROID_HOME' environment variable. Try setting it manually...

    1.配置 jdk (安卓的sdk环境变量配置必须配置这个)

    链接:https://pan.baidu.com/s/15Ktkn66dk3WfIOHOgBBrQA        提取码:i0v3

    此电脑右键--》属性--》高级系统设置--》环境变量

    (1)添加   JAVA_HOME   +你  jdk  的路径

    (2)path  里面添加     %JAVA_HOME%\bin

    (3)接下来验证配置是否成功  java -version

     

    2.安装sdk  官网入口

    百度网盘地址:

    链接:https://pan.baidu.com/s/1qvF4S0EPVrvvGW5Ow1aCGA        提取码:h6ty 

    此电脑右键--》属性--》高级系统设置--》环境变量

    (1)添加 ANDROID_HOME   +你  sdk  的路径

    (2)path  里面添加     %ANDROID_HOME%\platform-tools

    (3)Android SDK配置完成,接下来验证配置是否成功

             ***先重启cmd!!!!!!!!!!

              打开c盘,打开cmd小黑框,输入adb

     

     

    3.安装 gradle 教程入口

     

    步骤三:这里默认我们必需的三个环境变量已经配置好了

    1.在cordova-app中配置安卓插件

    如果之前有,不想要了,先删除android平台:

    cordova platform remove android

    如果之前没有,就直接安装:

    cordova platform add android

    2.用编译器或者直接打开我们的cordova-app项目文件夹

    3.输入打包命令(第一次特别慢,2-8分钟哦)  

    cordova build android --release

    4.打开我们在打包以后出现的apk的路径(注意,这里生成apk成功了,但是没有签名,模拟器还有手机是不运行他安装的,会提示安装失败)

    5.apk签名生成(注意,生成在你apk所在的文件夹底下,我这里做示例是用d盘根目录)

    keytool -genkey -v -keystore D:\mytest.keystore -alias mytest -keyalg RSA -validity 20000

    *注释:-keystore D:/mytest.keystore表示生成的证书及其存放路径,如果直接写文件名则默认生成在用户当前目录下;
          -alias mytest 表示证书的别名是mytest,不写这一项的话证书名字默认是mykey;
          -keyalg RSA 表示采用的RSA算法;
          -validity 20000表示证书的有效期是20000天。*

    注意:密码库口令,新口令虽然不显示,但是是存在的,这个要记住,给apk文件配置属于他的签名的时候需要

    6.解决生成签名时密钥库格式转移的报错问题

    输入:也就是提示的这一句

     keytool -importkeystore -srckeystore D:\mytest.keystore -destkeystore D:\mytest.keystore -deststoretype pkcs12

    然后输入口令,就生成成功了,看下面这个

    打开我的d盘根目录地下出现了这个,带old是我们之前密码规则有问题的,所以用

    mytest.keystore  这个文件

    7.将我们的签名与apk绑定起来

    打开以后,最终拥有的文件,应该和我这个是差不多的

    在此目录下打开cmd小黑框   输入:

    jarsigner -verbose -sigalg SHA1withRSA -digestalg SHA1 -keystore mytest.keystore app-release-unsigned.apk mytest

    这里的密码短语就是你上面的密钥库口令(mytest.keystore必须和apk在同一目录地下)

      

    8.将你的apk改名放到模拟器,或者直接放手机上点击安装,进行测试

    我这里是雷电模拟器,有需要可以百度下载,

    注意:最后送大家2020最新企业级 Vue3.0/Js/ES6/TS/React/node等实战视频教程,点击此处 免费获取,小白勿进哦

     

    展开全文
  • 但是它也有vscode无法满足的功能,比如说今天我们就要用它来把vue项目打包为 apk。 打包步骤 执行 npm run build 打包vue项目 下载并安装HBuilder X 依次点击文件》新建》项目,选择 5+APP(A) 选项,并填写好项目名
  • vue项目打包成apk安装包详细步骤

    千次阅读 2020-10-27 11:23:42
    然后把打包好的vue项目的内容拿来放里面 就是这个玩意,里面的css,js等文件复制过去 然后它就变成了这个亚子 随后点击manifest.json,会给你调出配置页面,自行配置 第三步 : 发行 配置好了点上面 发行 - - - 原生App...
  • 如何将vue项目打包为.apk文件

    千次阅读 2020-04-27 15:18:04
    如果需要将它安装到安卓手机上就需要打包为.apk文件了。 具体步骤: 1.在vue项目中找到config/build.js 2.到build属性下的assetsPublicPath属性: 改变 '/', 为'./' (ps:就是加了个点) 3. ...
  • 主要介绍了解决cordova+vue 项目打包成APK应用遇到的问题,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
  • // 判断上传的文件是否是 以apk结尾的apk文件 if (files.name.substr(files.name.length - 3) === "apk") { const ApkParser = require("app-info-parser/src/apk"); const parser = new ApkParser(files); //files...
  • Vue项目打包成安卓APP

    千次阅读 2020-04-03 10:37:37
    概述:普通vue项目如何成安卓apk安装包 第一步:项目目录 config文件夹–>index.js里面的两处assetsPublicPath,把 ‘/’ 改为 ‘./’ 第二步:通过npm run build 指令打包vue项目到dist文件夹里面 第三步:通过...
  • vue+vant开发app打包apk

    2021-06-29 17:19:32
    最近用vue+vant开发移动端项目,然后总结了一些方法心得,在此记录一下 1、首先需要对vue项目进行打包成dist文件。打包命令(npm run build) ...以上就说vue项目开发移动端打包成apk方法,希望对各位有所帮助 ...
  • vue 项目打包成apk(Hbuilder方案)

    千次阅读 2018-12-14 17:21:13
    一:使用webstorm创建vue项目 参考:手把手一步步使用webStrom创建vue项目 二:build项目生成dist文件 执行npm run dev 后打开链接可看到界面说明项目初始化正常, 然后编辑build命令 点击绿色三角形运行...
  • Hbulid打包vue-cli项目生成APK

    万次阅读 2017-09-19 16:03:58
    之前写过不少移动APP项目,但是平时写的Vue-cli项目都只在浏览器开发运行的,今天稍微写一下使用Hbulid打包Vue-cli项目生成APK的大致流程吧 1.准备已有的Vue-cli搭建的webAPP项目 确保 npm run dev 命令能正常运行...
  • 利用Hbuilder将Vue项目打包成apk

    千次阅读 2019-07-31 15:03:14
    “页面入口” : 主页面,因为我是用vue开发的,所以我只有一个HTML文件,是index.html (2)图标配置 其余的”启动图片” “sdk配置” ...我直接略过了 配置应用信息和图标配置先试试效果,配置好后,...
  • vue扫码下载APP安装包

    2021-03-30 17:49:14
    把appDownload.vue地址生成二维码即可 临时跳转页 appDownload.vue <template> <div class="guide-wrap" v-show="guideShow"><img src="@/assets/images/downloadapp/openinbrowser.png"/>&...
  • Cordova+Vue打包Android Apk

    2020-03-23 15:05:33
    文章目录Cordova打包Vue移动端项目Android环境要求安装Cordova安装Android SDK安装GradleCordova创建项目Vue项目使用Cordova打包创建一个的Vue项目github源码 Cordova打包Vue移动端项目Android 环境要求 Cordova ...
  • Vue使用cordova打包成apk

    2019-11-06 11:24:10
    1.新建一个文件夹 2.创建cordova项目 cordova create DonateBlood cn.brynn.donateBlood Donate(Donate是看到的app名字,DonateBlood是文件夹名字,... cordova platform add android ...3.创建vue项目 在Donate...
  • 工程中编译后的前端代码加载至Android工程的Android/app/src/main/assets路径下,这样每次打出Android Apk时,都是最新的前端代码;  1)修改hybird_android/ geo_location8 /package.json,新增App打包构建方式...
  • Vue-Vant—打包apk

    千次阅读 2021-01-18 16:34:01
    Vue项目打包Apk有两种最常用的方法,其一使用Dcloud-HbuilderX打包Apk,其二使用Cordova打包Apk。 注意,本文只介绍HbuilderX打包,Cordova忽略。 二、详解 第一步:下载HbuildX 如下图所示,下载HbuilderX,...
  • 一文带你使用Vue完成移动端(apk)项目

    千次阅读 多人点赞 2021-06-09 09:17:56
    目录结构: 基本配置 ...import Vue from 'vue' // 引入根组件App.vue import App from './App.vue' // 引入router路由 import router from './router' import store from './store' // 引入axios import
  • Vue 移动端打包成apk

    2021-04-12 21:53:30
    Vue 移动端打包成apk如何将Vue 移动端打包成apk打包配置打包使用HuilderX进行打包打包 云配置 如何将Vue 移动端打包成apk 打包配置 dex.js的build下的assetsPublicPath修改为如图(解决打包空白) 将webpack.prod....
  • hbuilder 打包 VUE项目为APK 本项目使用 hbuilder 进行打包 已经验证 设置 vue 打包路径 VUE默认的项目根路径会导致打包后白屏。 vue.config.js publicPath: './', 解决手机点击返回按钮退出项目bug /...
  • vue 移动端弹层组件

    2020-05-27 10:10:12
    这是一个用Vue技术封装的组件,主要在移动端使用。 1、其实前端的UI库有很多,但是我们却不需要将所有的都使用,虽然也可以单个加载。 2、弹层的组件有很多,但是在某些机型上有兼容问题,这里我单独封装了一下,只...
  • 3.在vscode中打包vue项目 在打包vue项目之前,修改以下几处: (1)config\index.js 把build下面的assetsPublicPath的值,从’/‘改为’./’: (2)src/router/index.js mode如果是history,注释掉。 根目录直接...
  • HbuilderX将vue项目打包成apk——Android 使用npm run build命令将vue项目打包 打开HbuilderX新建项目 3. 将新建的项目中manifest.json以外的文件删除,把上面打包的vue项目dist文件内容放进去 4. 配置manifest....
  • windows+weex+vue项目——Android打包生成apk流程 ** 第一步:安装 weex-toolkit **命令:**npm install -g weex-toolkit,安装完成后在命令行输入weex,若出现各种命令选项介绍,则安装成功 **若出现:**npm ...
  • Vue 仿网易云音乐,移动版。(可通过cordova直接打包成apk
  • 现在使用vue开发的项目越来越多,使用vue开发的移动端打包就成了最大的问题。 现在前端打包方案有好多种,但是综合来说,我比较喜欢用cordova来进行Android和ios的打包,配置完成之后,每次只需要一条命令就可以完成...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 3,529
精华内容 1,411
关键字:

apkvue

vue 订阅