使用HBuilderX打包成app之后点击返回按钮让它返回上一个页面
首先:下载引入mui.min.js文件,MUI框架mui-min.js文件github地址 https://github.com/dcloudio/mui
下载之后并在index.html文件中引入如下图(2-1)( 引入之后在浏览器控制台输出mui,看是否引入成功如图2-2)
注意:mui-min.js需要放到static文件夹下
(单引入这个文件之后,你可以尝试打包看能否正常返回,如点击返回出现关闭app的情况,请继续往下看)

图2-1

图2-2
----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
以下代码直接复制无需做更改,放到首页中,在首页有点击跳转的地方都添加一个toCs事件
就好比是一个洋葱,你在最外层添加一个toCs事件,这整个洋葱就具有了返回的效果 如图2-3,这是三个大的入口,给这每个入口添加一个toCs事件,每个入口里面无论添加了多少页面和其它的产品跳转都具有了返回效果
需要注意的是使用toCs传入参数的问题,name是用作自定义顶部导航名字用的,如图2-4,url是点击跳转的地址,根据你自己的情况而定。

图2-3

图2-4
此段代码放在生命周期函数mounted函数里面
let _this = this;
mui.init({
beforeback: function(){
if(_this.openWebView) {
let viewObj = plus.webview.getWebviewById('ldlh');
viewObj.canBack((event) => {
var canBack = event.canBack;
if(canBack) {
viewObj.back();
} else {
plus.webview.close('ldlh')
_this.openWebView = false;
}
})
return false
}
return true
}
});
toCs(url,name) {
this.openWebView = true;
mui.openWindow({
url: url,
id: 'ldlh',
styles: { // 窗口参数 参考5+规范中的WebviewStyle,也就是说WebviewStyle下的参数都可以在此设置
titleNView: { // 窗口的标题栏控件
autoBackButton: true, //标题栏控件是否显示左侧返回按钮
// titleText: name, // 标题栏文字,当不设置此属性时,默认加载当前页面的标题,并自动更新页面的标题
titleColor:"#000000", // 字体颜色,颜色值格式为"#RRGGBB",默认值为"#000000"
titleSize:"17px", // 字体大小,默认17px
backgroundColor:"#F7F7F7", // 控件背景颜色,颜色值格式为"#RRGGBB",默认值为"#F7F7F7"
progress:{ // 标题栏控件的进度条样式
color:"#00FF00", // 进度条颜色,默认值为"#00FF00"
height:"2px" // 进度条高度,默认值为"2px"
},
splitLine:{ // 标题栏控件的底部分割线,类似borderBottom
color:"#CCCCCC", // 分割线颜色,默认值为"#CCCCCC"
height:"1px" // 分割线高度,默认值为"2px"
}
}
}
});
},
使用事件函数
<ul class="pro_nofree">
<li v-for="(i,idx) in fetch_nofree" :key="'nofree_'+idx">
<a href="#" @click="toCs(i.link,i.title)">
<h3>{{i.title}}</h3>
<p>{{i.subtitle}}</p>
<div class="img" v-show="i.imgurl">
<img :src="'https://ykdstatic.dd668.cn/'+i.imgurl" >
</div>
</a>
</li>
</ul> @click="toCs(i.link,i.title)"
注:看下图一共是7个产品 link是这7个产品对应的连接地址,tite是这7个产品对应的title
注意:@click="toCs(i.link,i.title)" 不能直接加载a标签上,否则不生效,需要把href设置为#

使用HBuilderX打包成app之后点击返回按钮让它返回上一个页面的更多相关文章
- HBuilderX打包成安卓或苹果app之后的调试问题,避免每次都要打包
一.使用VScode安装 Live Server插件 二.使用:安装成功后---->>新建一个index.html 写入内容如下图所示 注:href地址是你在电脑上启动该项目的访问地址(此 ...
- vue打包成app后,点击手机上的物理返回按钮后直接退出app
在浏览器上浏览vue项目时,后退按钮是可以正常返回上一页的,但是打包成app后,点击手机上的屋里返回按钮,就直接退出app回到桌面了, 以下是解决办法: 使用mui进行手机的物理键的监听 1.首先安装 ...
- PHP写的手机端网站,可以打包成app吗,怎么打包?
8:13:36 沐歌-重庆 2018/1/19 8:13:36 PHP写的手机端网站,可以打包成app吗,怎么打包 风太大-淮安 2018/1/19 8:14:58 变色龙 沐歌-重庆 一般用什么打包 ...
- 监听当点击微信等app的返回按钮或者浏览器的上一页或后退按钮的事件
在实际的应用中,我们常常需要实现在移动app和浏览器中点击返回.后退.上一页等按钮实现自己的关闭页面.调整到指定页面或执行一些其它操作的 需求,那在代码中怎样监听当点击微信.支付宝.百度糯米.百度钱包 ...
- PHP——0128练习相关2——js点击button按钮跳转到另一个新页面
js点击button按钮跳转到另一个新页面 投稿:whsnow 字体:[增加 减小] 类型:转载 时间:2014-10-10我要评论 点击按钮怎么跳转到另外一个页面呢?点击图片要跳转到新的页面时,怎么 ...
- 一个简单移动页面ionic打包成app
先贴JS代码好了,缓动和调整透明度的功能,最后用ionic打包成应用就可以 window.onload=function(){ search(); move(); calc();}function s ...
- html5页面打包成App - Android或Iphone安装程序
下载安装前端开发工具:HBuilder 官网下载:http://www.dcloud.io/ 根据官网说明安装 * 打开登录HBuilder,把做好的H5页面通过添加app项目把H5的文件夹加入进来( ...
- wap2app(一)-- 网站快速打包成app
工具:HBuilder,下载地址:http://www.dcloud.io/ 下载并安装HBuilder后,打开编辑器,选择:文件 -> 新建 -> 项目,出现如下图: 选择wap2app ...
- H5 app在真机调试的时候正常,打包成app后报错
在自己的一个用h5开发的项目中, 环境 IDE HBuilderX 打包工具 Hbuilder线上打包 开发语言 JS 现象 从一个列表进入详细页之后一直转圈圈.因为是调用系统原生的等待组件,界面无法 ...
随机推荐
- Authenticator App 两步验证会不会造成亚马逊账号关联?
今天听人说,因为用Authenticator App做亚马逊两步验证造成了帐号关联…… 我给大家解释一下Authenticator的实现原理,作为计算机专业科班出身的我,此次从各方面了解并经过自己亲测 ...
- PHP系列 | 编译安装msgpack-php
Msgpack 是一个 PECL 扩展,此扩展提供用于与 MessagePack 序列化通信的 API. MessagePack 是一个基于二进制高效的对象序列化类库,可用于跨语言通信.它可以像JSO ...
- Xamarin图表开发基础教程(12)OxyPlot框架支持的金融图表类型
Xamarin图表开发基础教程(12)OxyPlot框架支持的金融图表类型 OxyPlot组件中支持5种类型的金融图表,它们分别为销量图.高低图.股票K线图.股票走势图和旧式股票图,如图1.20~1. ...
- JS高级:面向对象的构造函数
1 创建对象的方式 1.1 字面量的方式创建对象 var p1 = { name: '张三', run: function () { console.log(this.name + '跑'); } } ...
- 搭建SpringCloud微服务
建立spring父模块 删除不必要的src目录 父模块中的pom.xml中添加相应的依赖以及插件.远程仓库地址 <!-- 项目的打包类型, 即项目的发布形式, 默认为 jar. 对于聚合项目的父 ...
- server2008r2 安装CentOS
一:安装CentOS 二:配置虚拟网络: 三:设置创建的虚拟机使用刚才创建的网卡: 四:运行CentOs,输入用户:root 密码:root,登录后输入: dhclient 自动获取IP ip ...
- pytorch中调用C进行扩展
pytorch中调用C进行扩展,使得某些功能在CPU上运行更快: 第一步:编写头文件 /* src/my_lib.h */ int my_lib_add_forward(THFloatTensor * ...
- oracle11G 命令【导库数量对比】
1.查询用户有哪些表 select * from all_tables where owner='ZJY'; 160 rows selected. 2. 查询总数 select object_type ...
- 玩转CONSUL(3)–大规模部署的性能开销定量分析
1. 引言 今天有朋友问萌叔,consul能否在大规模生产环境下进行应用.场景是总计大约10w+台机器,分为3 ~ 4个机房,单个机房最多3w万+机器.这个问题大的,可把萌叔吓了跳,部门里面consu ...
- 【视频开发】【CUDA开发】ffmpeg Nvidia硬件加速总结
原文链接:https://developer.nvidia.com/ffmpeg GPU-accelerated video processing integrated into the most p ...