hbuilder+vue单页应用打包成APP后退按钮返回上一页的问题

APP打包工具:hbuilder

需要js包:mui.js ,引入方法https://www.cnblogs.com/v616/p/11290281.html

实现原理:在vue根组件App.vue监听安卓机,按后退键时候vue的路由path

代码App.vue

代码片段:
data() {
    return {
      tabbarShow:true,
      arrTab:[‘/home‘,‘/cat‘,‘/history‘,‘/me‘]
    };
  },
  mounted(){
    // 安卓后退键
    this.$mui.plusReady( () =>{
      var backcount = 0;
      this.$mui.back = ()=> {
        let path = this.$route.path;
        console.log("path:"+path);

        if (this.arrTab.includes(path)) {
          // 主导航页
          if (this.$mui.os.ios) return;
          if (backcount > 0) {
            if (window.plus) plus.runtime.quit();
            return;
          };
          this.$toast(‘再点击一次退出应用!‘);
          backcount++;
          setTimeout( () =>{
            backcount = 0;
          }, 2000);
        } else {
          // 子页面
          console.log(‘子页面后退键‘);
          this.$router.go(-1);
        }
      };
    })
  },

  

原文地址:https://www.cnblogs.com/v616/p/11294531.html

时间: 2024-10-11 10:44:35

hbuilder+vue单页应用打包成APP后退按钮返回上一页的问题的相关文章

JS后退, JS返回上一页, JS返回下一页

Javascript 返回上一页: 1. history.go(-1), 返回两个页面: history.go(-2); 2. history.back(). 3. window.history.forward()返回下一页 4. window.history.go(返回第几页,也可以使用访问过的URL) 例: <a href="javascript:history.go(-1);">向上一页</a> response.Write("<scrip

点击返回上一页代码实例

点击返回上一页代码实例:在网页中,经常见到这么一个效果,点击一个按钮.文本或者图片可以返回上一步所浏览的网页,下面就给出代码实例,希望能够给需要的朋友带来帮助,代码实例如下:一.点击按钮返回上一页: <input type="button" onclick="javascript:history.back(-1);" value="返回上一页" /> 二.点击图片返回上一页: <img src="images/bt.j

HBuilder初探——强大的提示符及纯网页打包成APP

之前做手机页面,只是时效短.更新度高的零星几个,供APP内嵌调用.比如抽奖嘛.活动宣传啦. 现在的公司,不知是不是不知者无畏,整一个app全部用html5来实现,包括头部导航条.客户端只需封装一下,打个包就OK.实现的方式是网页放在服务器,像从浏览器访问一下,客户端只是充当一个浏览器的角色.这种方式app store应该是不允许的吧.但所做的只是供医院内部人员使用的一个项目,能实现在线学习课程.报名.考试.签到.查房.论文申报等功能就OK. 得知HBuilder这个东东,还是从客户口里听来的,他

使用HBuilderX将vue项目打包成app

因为项目要用到手机扫一扫的功能,纯H5的话我百度之后只能做到调用摄像头,拍照后识别二维码,无法做到自动识别 看到H5+有扫码功能,所以今天尝试用HBuilderX将vue项目打包成app 总的流程很简单,这真的要感谢H5中国产业联盟做出的贡献.将vue打包,生成dist文件夹,HBuilderX创建H5+App项目,这里选择的是默认模版,然后将dist里的文件夹覆盖到新项目,就可以云打包成app下载到手机或者直接进行真机调试 生成app后遇到的第一个坑就是白屏,原因是页面找不到 为了解决跨域问题

html网站网址一键打包成App平台-开心App平台

开心APP在线打包平台可以快速封装网站变成APP,一键打包网站APP平台的出现,极大的降低的开发费用,几百块就可以制作一个体验不错的APP. 网站封装成APP的流程方便快捷!无需懂代码,会上网就能制作APP! 下面介绍使用开心APP平台将一个网站快速打包成APP 分七步进行 1.注册开心APP平台账号 2.创建APP.配置基本信息 3.配置扩展插件 4.配置打包项目 5.配置安卓证书 6.配置ios证书 7.编译APP 一.注册lbuilder平台账号 1.打开心APP官网http://www.

ThingsBoard 前端打包成 App 的方法

欢迎大家加入thingsboard 二次开发讨论群:121202538 ThingsBoard私有化部署之后,不免存在在手机上查看各仪表盘的需求.手机上虽然可以浏览器访问网址,但对用户而言不够专业.体验较差,因此有需要提供一个专门的App,来实现管理或查看功能. 对于这个App,存在两种方案:一是开发全新的App,通过调用ThingsBoard的API实现相应功能,该方法是完全的Native开发模式:二是将ThingsBoard的UI打包,以App的形式内置网页方式的浏览.前一种方式成本较高.周

使用angularjs、ionic框架如何实现返回上一页并刷新

普通的js返回并刷新这里就不多说了,百度就有很多方法. 下面说的是使用了angularjs.ionic开发的一个手机app中使用的一个返回上一页并刷新的方法. 场景:回复的页面是单独的,点击保存回复后会回到上一个页面,此时上一个页面会显示出你新回复的内容 回复页面的controller的相关代码: $scope.save = function () { Replies.giveAReply($scope.reply); //保存回复 $ionicHistory.goBack(); //返回上一页

移动端返回上一页,刚需!document.referrer 详解

返回上一页,在PC端我们可以使用:history.go(-1)或者history.back(),可以正常返回第一层.这样,我们不需要上一页的 url 具体是什么,只要使用 history 一般都没啥问题. 但是在移动端,如果想要返回上一页.比如从A页面跳到B页面,如果B页面想返回A页面,为了防止不会跳错,必须要有一个 <  按钮,给它加 history.go(-1) ,返回上一层. <a href="javascript:history.go(-1)" class=&quo

6种方法实现asp.net返回上一页

其实要实现返回上一页的功能,主要还是要用到JavaScript. 一: 在ASP.net的aspx里面的源代码中 <input type="button onclick="Javascript:window.history.go(-1);"value="返回上一页"> 浅析:这个是用了HTML控件,通过一个onclick的事件,调用了javascript中的一个方法就可以了.这个是最简单的了,也同样适用于静态页面,ASP页面等. 二: 利用Re