使用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 现象 从一个列表进入详细页之后一直转圈圈.因为是调用系统原生的等待组件,界面无法 ...
随机推荐
- opendaylight+sfc 发送测试流量报错找不到SFF Name
问题介绍: 启动opendaylight sfc后,再启动sfc_agent.py,在SFC UI界面进行添加SF,SFF,SN:在部署SFC时,最后点击部署图标,sfc_agent.py报错如下: ...
- 第09组 Beta冲刺(4/4)
队名:软工9组 组长博客:https://www.cnblogs.com/cmlei/ 作业博客:https://edu.cnblogs.com/campus/fzu/SoftwareEngineer ...
- 自己搭建gitlab服务,组员不能上传代码
原因是因为 没有拉分支 直接在master 上开撸代码 ,master 分支 默认是受保护的,具体操作如下
- 更新Alpine Linux源 sed -i 's/dl-cdn.alpinelinux.org/mirrors.ustc.edu.cn/g' /etc/apk/repositories apk add xxx
更新Alpine Linux源 国内镜像源 清华TUNA镜像源:https://mirror.tuna.tsinghua.edu.cn/alpine/中科大镜像源:http://mirrors.ust ...
- Mxnet:以全连接层为例子自定义新的操作(层)
https://blog.csdn.net/a350203223/article/details/77449630 在使用深度学习平台时,光会使用其中已定义好的操作有时候是满足不了实际使用的,一般需要 ...
- CentOS离线状态下安装Python3.7.0
1.下载python安装包以及依赖的包 python安装包:Python-3.7.0 下载地址:www.python.org/ftp/python/3.7.0/Python-3.7.0.tar.xz ...
- [LeetCode] 45. Jump Game II 跳跃游戏 II
Given an array of non-negative integers, you are initially positioned at the first index of the arra ...
- Theano入门
由于自己的一个小项目需要Theano部分的开源代码,所以学习一下并记录入门的经典网站. 入门中文博客:https://blog.csdn.net/hjimce/article/details/4680 ...
- ref,out,int参数复习
ref 结构是值类型,按值传递.通过关键字ref,也可以通过引用传递结构. public static void ChangeA(ref A a) { a.X = ; } //如果A是结构类型,就添加 ...
- Linux学习-软件包管理安装
rpm RPM是Red-Hat Package Manager(RPM软件包管理器)的缩写 软件包类型 二进制包:已经使用GCC编辑后的 tar源码包:需要编译 rpm包获取方式 1,系统镜像 需 ...