使用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 现象 从一个列表进入详细页之后一直转圈圈.因为是调用系统原生的等待组件,界面无法 ...
随机推荐
- Net core学习系列(二)——Net Core项目文件简介
一. ASP.NET Core 项目文件夹解读 ASP.NET Core 1.0 发布以来,相较于传统项目编码发布的行为,新项目中的操作已经有了很大的变化,如解析依赖,选择运行平台和Runtime等等 ...
- ORA-55624: 此时无法为闪回归档启用表
我们在某应用中使用了FDA特性,但是某些表在解除归档后重新启用时报"ORA-55624: 此时无法为闪回归档启用表",经查询google和MOS相关信息,原因就是太频繁.解决方法: ...
- Python3基础 yield 在无返回值的函数中的简单示例
Python : 3.7.3 OS : Ubuntu 18.04.2 LTS IDE : pycharm-community-2019.1.3 ...
- uni-app打包程序 Hbuilder X 用自有证书 苹果证书打包 ios App、用DCloud公用证书打包Android APP
Android用HBuilder的DCloud公用证书即可 HBuilderX uni-app打包成apk安装到手机首先要登录,没有帐号可以注册,接着点击运行—原生App-云打包,配置完后点击打包, ...
- Flutter Android 正式打包、以及升级应用 重新打包
Flutter Android 正式打包 打开androidStudio软件 1.修改版本号. android->app->src->main->AndroidManifest ...
- linux查找文件利器
查找文件 比如:找nginx.conf配置文件 locate nginx.conf /usr/local/etc/nginx/nginx.conf /usr/local/etc/nginx/nginx ...
- SVN限制普通用户删除文件及提交时必须填写log日志
SVN用得也算挺广泛的,但是它也存在着一个大问题,就是权限控制得比较差,要么读,要么读写,而读写就意外着可以删除文件(目前我的理解是这样,如果有什么不对的地方,请多指教). 刚好前段时间发生了开发人员 ...
- upgrade rubygems
gem install rubygems-update update_rubygems gem update --system gem update
- python 数据库导入excel
import MySQLdb import xlwt def outMySQL(file_name): wb = xlwt.Workbook() sh = wb.add_sheet('sheet 1' ...
- Tomcat详解|乐字节
大家好,欢迎来到乐字节小乐的Java技术分享园地.这次给大家分享的是Tomcat 一. 什么是 Tomcat Tomcat 是一个符合 JavaEE WEB 标准的最小的 WEB 容器,所有的 J ...