cordova+vue搭建app实践笔记

scq000 发布于2019-08-23 15:41 / 910人阅读

摘要：实现对原生物理返回键的监听获取获取再次返回退出自定义实现中效果自定义，实现中效果显示文字显示的时间长度

实现对原生物理返回键的监听:

var exitAppTicker = 0;
  document.addEventListener("deviceready",function(){
      document.addEventListener("backbutton", function(){
        var pageUrl = window.location.href;
        var n = pageUrl.lastIndexOf("?");
        var m = pageUrl.lastIndexOf("/");
        var str = ""
        if (n > 0) {
          str = pageUrl.substring(m+1,n); //获取pageName
        } else {
          str = pageUrl.substring(m+1); //获取pageName
        }
        if(str == "index" || str == "" || str == "loginPhone"){
            if(exitAppTicker == 0){
                    exitAppTicker++;
                    showToast("再次返回退出", 2000)
                    setTimeout(function(){
                            exitAppTicker = 0;
                    },2000);
            }else if(exitAppTicker == 1){
              navigator.app.exitApp();
            }  
        }else{
            history.back();
        }
      }, false);
  },false);

自定义toast , js实现android中toast效果

/** 
   * 自定义toast，js实现android中toast效果
   * @param msg 显示文字 
   * @param duration 显示的时间长度 
   */  
  function showToast(msg, duration) {
    duration = isNaN(duration) ? 2000 : duration;    
    var m = document.createElement("div");    
    m.innerHTML = msg;    
    m.style.cssText = "width:60%; min-width:150px; background:#000; opacity:0.5; height:40px; color:#fff; line-height:40px; text-align:center; border-radius:5px; position:fixed; top:70%; left:20%; z-index:999999; font-weight:bold;";    
    document.body.appendChild(m);    
    setTimeout(function() {    
        var d = 0.5;    
        m.style.webkitTransition = "-webkit-transform " + d    
                + "s ease-in, opacity " + d + "s ease-in";    
        m.style.opacity = "0";    
        setTimeout(function() {    
            document.body.removeChild(m)    
        }, d * 1000);    
    }, duration);    
  }

GPU服务器海外云主机 vue20开发实践 vue3 学习笔记 (五)——vue3 空格APP技术实践搭建云笔记

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/102433.html

ionic4+vue+cordova开发混合应用

摘要：摘要是可以让我们使用开发即使来移动应用的框架。如果你熟悉可以直接使用开发，但如果你熟悉使用或并且也想使用，可以使用版本，本文就以来说明这两者如何结合使用。除此之外还引入和来对把我们代码打包成安卓或应用。。摘要 ionic是可以让我们使用web开发即使来移动应用的框架。ionic4之前，ionic只能和angular搭配使用，ionic4后把ionic抽离成四个版本，@ionic/co...

Yujiaao 2019-08-23 17:00 评论0 收藏0
指尖前端重构（React）技术调研分析

摘要：一为什么选择是当前前端应用最广泛的框架。目前来看的生态系统要比大的多，在等最大的技术社区搜索两者，的搜索结果是的十倍左右，另外据近期统计使用的站点是的几百倍以上。其中是基于技术，依然是浏览器应用。一、为什么选择React React是当前前端应用最广泛的框架。三大SPA框架 Angular、React、Vue比较。 Angular出现最早，但其在原理上并没有React创新的性能优化...

AlphaWallet 2019-08-23 18:18 评论0 收藏0
用cordova+vue-cli 打包成 android apk 过程和路径问题

摘要：简介最近用框架写安卓版，本来打算用打包成文件即可，但发现配置起来复杂，还不如自己搭建环境，用工具提供的命令在终端实现，下面介绍遇到的问题及解决。简介：最近用vue-cli框架写安卓版APP，本来打算用Hbuilder打包成.apk文件即可，但发现配置起来复杂，还不如自己搭建环境，用cordova工具提供的命令在终端实现，下面介绍遇到的问题及解决。一、打包过程首先要有node环境，然后...

LucasTwilight 2019-08-30 11:12 评论0 收藏0
用cordova+vue-cli 打包成 android apk 过程和路径问题

摘要：简介最近用框架写安卓版，本来打算用打包成文件即可，但发现配置起来复杂，还不如自己搭建环境，用工具提供的命令在终端实现，下面介绍遇到的问题及解决。简介：最近用vue-cli框架写安卓版APP，本来打算用Hbuilder打包成.apk文件即可，但发现配置起来复杂，还不如自己搭建环境，用cordova工具提供的命令在终端实现，下面介绍遇到的问题及解决。一、打包过程首先要有node环境，然后...

Forest10 2019-08-23 18:08 评论0 收藏0