精华内容
下载资源
问答
  • 这种情况下有一种解决办法就是自定义返回按钮事件: 步骤一: 删除掉1中的easyConfig配置,打开vue项目中的public文件夹,新建static文件夹,下载 mui.min.js 放到里面去,编辑index.html,其中homePage中放置...

    分为两种情况进入app需要登录和进入app不需要登录

    1,不需要登录

    只需在打包配置文件sitemap.json添加配置easyConfig配置

    "pages": [
        {
            "webviewId": "__W2A__xxxx.com",
            "matchUrls": [
    			{"pathname":"http://xxxx.com"}  //首页
    		],
    		"easyConfig": {
    			"back":{
    				"history":true //允许执行history.back  
    			}
    		}
        }
    ]

    关于easyConfig更多配置:https://ask.dcloud.net.cn/article/12750

    2,进入app需要登录(或者判断是否需要登录)

    这种情况下如果使用1的配置,如果从登录进入首页,在首页后退双击会无法退出,因为从登录页进入首页,最后一层页面为登录页,首页后退会退回登录页,由于已经登录了,所以又会调回首页,导致在首页点击后退按钮页面不停刷新却无法退出;

    再次打开app是直接进入index.vue,这时的后退双击是可正常退出app的,因为此时最后一层页面为首页

    这种情况下有一种解决办法就是自定义返回按钮事件:

    步骤一:

    删除掉1中的easyConfig配置,打开vue项目中的public文件夹,新建static文件夹,下载mui.min.js放到里面去,编辑index.html,其中homePage中放置不返回且连续两次返回需要退出的页面hash

    <script src="./static/mui.min.js"></script>
    <script>
    	// 一级页面不返回,连续按两次退出,根据项目自行添加homePage 里的值
        const homePage = ['#/Authen', '#/','#/Game', '#/InviteLogin']
        mui.plusReady(function () {
          // 首页返回键处理
          // 处理逻辑:1秒内,连续两次按返回键,则退出应用;
          var first = null
          var webview = plus.webview.currentWebview()
          plus.key.addEventListener('backbutton', function () {
            //在顶层
            if (homePage.indexOf(this.location.hash) !== -1) {
              // 首次按键,提示‘再按一次退出应用’
              if (!first) {
                first = new Date().getTime()
                mui.toast('再按一次退出应用')
                setTimeout(function () {
                  first = null
                }, 1000)
              } else {
                if (new Date().getTime() - first < 1000) {
                  plus.runtime.quit()
                }
              }
            } else { 
              webview.canBack(function (e) {
                if (e.canBack) {
                  webview.back()
                } else {
                  webview.close() // hide,quit
                  // plus.runtime.quit()
                }
              })
            }
          }, false)
        })
      </script>

    步骤二:

    修改vue的路由配置,将登录页设置为默认路由地址,比如上面#/Authen对应的登录页面,则需要配置路由:

    ...
      {
        path: '/',
        name: 'Authen',
        component: Authen
      },
      {
        path: '/Authen',
        name: 'Authen',
        component: Authen
      },
    ...

    3,存在问题

    1)尽管2这个方法可以解决登录条件下的返回双击退出问题,但是在双击返回的第一次仍会刷新一次页面

    2)此种方法需要将首页设置为登录页,尽管一般会配置已经登录自动跳转,但是登录页还是会闪现一下

    展开全文
  • HTML模板<div class="head ta-c p-r"> //点击返回 ()">< 职位详情 指令'use strict' angular.module('a

    HTML模板

    <div class="head ta-c p-r">         //点击返回
        <span class="p-a c-w back-btn" ng-click="back()">&lt;</span>
        <span class="c-w" ng-bind="text">职位详情</span>
    </div>

    指令

    'use strict'
    angular.module('app').directive('appHeadBar',[function() {
        return {
            restrict: 'A',
            replace: true,
            templateUrl: 'view/template/headBar.html',
            scope: {
                text: '@'
            },link: function ($scope) {
                $scope.back = function() {
                    window.history.back();  // 返回
                }
            }
        };
    }]);
    展开全文
  • webapp返回上一页 处理

    2017-08-04 10:16:00
    window.addEventListener("popstate", function(e) { ... alert("我监听到了浏览器的返回按钮事件啦");//根据自己的需求实现自己的功能 }, false); function pushHistory() { var state = { title:...
    window.addEventListener("popstate", function(e) {  
            alert("我监听到了浏览器的返回按钮事件啦");//根据自己的需求实现自己的功能  
        }, false);  
    
    function pushHistory() {  
            var state = {  
                title: "title",  
                url: "#"  
            };  
            window.history.pushState(state, "title", "#");  
        }  
    
    $(function(){  
        pushHistory();  
        window.addEventListener("popstate", function(e) {  
            alert("我监听到了浏览器的返回按钮事件啦");//根据自己的需求实现自己的功能  
    }, false);  
        function pushHistory() {  
            var state = {  
                title: "title",  
                url: "#"  
            };  
            window.history.pushState(state, "title", "#");  
        }  
          
    });  
    
    
    $(function(){  
                pushHistory();  
                var bool=false;  
                setTimeout(function(){  
                      bool=true;  
                },1500);  
                window.addEventListener("popstate", function(e) {  
                  if(bool)  
                    {  
                            alert("我监听到了浏览器的返回按钮事件啦");//根据自己的需求实现自己的功能  
                    }  
                    pushHistory();  
                      
            }, false);  
            });  

     

    转载于:https://www.cnblogs.com/vali/p/7283569.html

    展开全文
  • vue 开发webapp 手机返回键 退出问题 mui进行手机物理键的监听 首先安装vue-awesome-mui npm ivue-awesome-mui 在main.js注册 在index.html 转载于:...

    vue 开发webapp 手机返回键 退出问题

     

    mui进行手机物理键的监听

    首先安装 vue-awesome-mui

    npm i vue-awesome-mui

    在main.js注册

     

    在index.html

    转载于:https://www.cnblogs.com/WangXinPeng/p/9753544.html

    展开全文
  • WebApp

    2018-01-03 00:39:00
    WebApp与Native App有何区别呢?Native App:1、开发成本非常大。一般使用的开发语言为JAVA、C++、Objective-C。2、更新体验较差、同时也比较麻烦。每一次发布新的版本,都需要做版本打包,且需要用户手动更新(有些...
  • mui进行手机物理键的监听 确保引入mui ... // android 返回按键处理 androidBack(store, data) { try { mui.init({ keyEventBind: { backbutton: true //关闭back按键监听 } });...
  • 之前做webapp时学到的:使用 mui 进行手机物理键的监听 首先安装 mui npm i vue-awesome-mui 然后在 main.js 里注册 import Mui from 'vue-awesome-mui'; Vue.use(Mui); index.html 里: <script type="text/...
  • 监听手机浏览器的返回按钮事件

    千次阅读 2017-07-04 11:14:14
    //监听到了浏览器的返回按钮事件 pushHistory(); window.addEventListener("popstate", function(e) { //alert("我监听到了浏览器的返回按钮事件啦"); WeixinJSBridge.call('closeWindow'); }, false); ...
  • 全局引入监听,main.js中: import physicBackListener from '../commonFunction/physicBackListener'//物理返回键 Vue.prototype.physicBackListener=physicBackListener 如果打包后真机运行返回没有正常进行,或者...
  • js如果要监听安卓手机原生回退按钮,只能通过cordova的backbutton事件来实现,具体实现方法如下: html代码: 回退按钮小实例 testBackBtn.js代码//等待API库装载 function onLoad(){ ...
  • 问题背景: 项目中用户总是可能误触到返回按钮,但此时可能并不希望返回,所以需要弹框进行确认操作。 原理:利用history 和 浏览器 刷新popstate状态 去实现 每一次返回都会去历史记录回退 -1 所以就在进入页面...
  • 安卓webApp模板

    千次阅读 2019-02-03 22:44:05
    安卓webApp开发模板 最近团队需要做一个安卓app,使用原生的android开发的话,开发周期会比较长,考虑到时间因素团队成员考虑采用webapp的形式来开发,这样门槛会相对来说也会低一些。 开发工具: Android ...
  • webApp优化心得

    2018-02-08 10:07:58
    webapp性能优化 本文中提到的app前端采用的技术栈是Vue全家桶+原生js http请求优化: 场景1: 当用户操作过快时,页面之间跳转时间缩短,在网络状态不可控的情况下,有可能造成在B页面中提示A页面的消息。...
  • webapp定位

    2019-10-02 10:44:48
    定位按钮与设置的停靠位置的偏移量,默认:Pixel(10, 20) zoomToAccuracy: true , // 定位成功后调整地图视野范围使定位位置及精度范围视野内可见,默认:false buttonPosition: ' RB ' }); map....
  • webAPP设置

    2018-08-07 17:57:23
     /*按钮父元素设置宽度*/  .m-button-bar {  width: 70%;  max-width: 800px;  padding:5px ;  margin: 0 auto;  }    .top-nav{  position: fixed;  top: 0px;  height: 50px;  width: ...
  • webapp-manager-源码

    2021-08-04 11:29:46
    如何在没有导航按钮的情况下返回? 右键单击网页的空白区域以显示上下文菜单。 在大多数浏览器中,此菜单包含导航按钮。 如何在我的主浏览器中打开链接? 对于 Firefox,所有链接始终在 WebApp 中直接打开或使用新...
  • 音乐播放器WebApp

    千次阅读 2018-09-05 17:17:17
     音乐播放器WebApp是我在自学了vue之后,独自完成的一个项目,目的是把所学的vue知识点实际的综合应用起来。 项目简介:  本项目包括五大块,分别是:用户中心、推荐、歌手、排行和搜索。在用户中心,用户可以...
  • webApp 阅读器

    2017-06-12 11:04:22
    这是一个webApp 阅读器的项目,是慕课网的老师讲授的一个实战,先给出项目源码在GitHub的地址:https://github.com/yulifromchina/MobileWebReader。  项目属于麻雀虽小,但五脏俱全的类型,对于前端新手来说,...
  • ArcGIS WebApp Builder 使用指南

    千次阅读 2015-01-23 10:07:41
    ArcGIS WebApp Builder 是Esri在2014年4月份推出的,相信做WebGIS开发的GISer们对ArcGIS的FlexViewer都不陌生,这次推出的就相当于JS版的Viewer。 1、ArcGIS WebApp Builder安装、部署   ArcGIS WebApp Builder的...
  • <!-- .back返回按钮 --> <div class="back" @click="back"> <i class="icon-back"></i> </div> back() { this.$router.back() },
  • vue2.0仿饿了么webAPP项目

    千次阅读 2018-04-26 13:07:31
    # webapp vue2.x仿饿了么app项目总结 项目地址:https://github.com/harrietjia/vue2-webapp.git如果觉得有帮助,希望可以在右上角给我个star支持一下,谢谢!部分截图:## 实现功能:```• Goods、Ratings、Seller...
  • Flutter WebAPP集成测试

    2021-01-13 09:16:50
    WebAPP集成测试前准备 1.添加FlutterDriver依赖 pubspec.yaml文件可以对依赖和配置进行管理,找到dev_denpendencies添加如下配置。flutteWebApp在测试前,除了test和flutter_driver配置之外,需要更改build_runner和...
  • webapp文本编辑器 这是Project Student的一部分。 其他职位包括带有Jersey的 Web服务 客户端,带有Jersey的 Web服务服务器 , 业务层 , 带有Spring数据的持久性 ,分片集成测试数据 , Webservice集成 , JPA标准...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 6,513
精华内容 2,605
关键字:

webapp返回按钮