首先:下载引入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
}
});
在 methods中添加如下事件
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之后点击返回按钮让它返回上一个页面的更多相关文章

  1. HBuilderX打包成安卓或苹果app之后的调试问题,避免每次都要打包

    一.使用VScode安装 Live Server插件 二.使用:安装成功后---->>新建一个index.html 写入内容如下图所示 注:href地址是你在电脑上启动该项目的访问地址(此 ...

  2. vue打包成app后,点击手机上的物理返回按钮后直接退出app

    在浏览器上浏览vue项目时,后退按钮是可以正常返回上一页的,但是打包成app后,点击手机上的屋里返回按钮,就直接退出app回到桌面了, 以下是解决办法: 使用mui进行手机的物理键的监听 1.首先安装 ...

  3. PHP写的手机端网站,可以打包成app吗,怎么打包?

    8:13:36 沐歌-重庆 2018/1/19 8:13:36 PHP写的手机端网站,可以打包成app吗,怎么打包 风太大-淮安 2018/1/19 8:14:58 变色龙 沐歌-重庆 一般用什么打包 ...

  4. 监听当点击微信等app的返回按钮或者浏览器的上一页或后退按钮的事件

    在实际的应用中,我们常常需要实现在移动app和浏览器中点击返回.后退.上一页等按钮实现自己的关闭页面.调整到指定页面或执行一些其它操作的 需求,那在代码中怎样监听当点击微信.支付宝.百度糯米.百度钱包 ...

  5. PHP——0128练习相关2——js点击button按钮跳转到另一个新页面

    js点击button按钮跳转到另一个新页面 投稿:whsnow 字体:[增加 减小] 类型:转载 时间:2014-10-10我要评论 点击按钮怎么跳转到另外一个页面呢?点击图片要跳转到新的页面时,怎么 ...

  6. 一个简单移动页面ionic打包成app

    先贴JS代码好了,缓动和调整透明度的功能,最后用ionic打包成应用就可以 window.onload=function(){ search(); move(); calc();}function s ...

  7. html5页面打包成App - Android或Iphone安装程序

    下载安装前端开发工具:HBuilder 官网下载:http://www.dcloud.io/ 根据官网说明安装 * 打开登录HBuilder,把做好的H5页面通过添加app项目把H5的文件夹加入进来( ...

  8. wap2app(一)-- 网站快速打包成app

    工具:HBuilder,下载地址:http://www.dcloud.io/ 下载并安装HBuilder后,打开编辑器,选择:文件 -> 新建 -> 项目,出现如下图: 选择wap2app ...

  9. H5 app在真机调试的时候正常,打包成app后报错

    在自己的一个用h5开发的项目中, 环境 IDE HBuilderX 打包工具 Hbuilder线上打包 开发语言 JS 现象 从一个列表进入详细页之后一直转圈圈.因为是调用系统原生的等待组件,界面无法 ...

随机推荐

  1. pip常用命令(转载)

    用阿里云服务器,使用pip安装第三方库的时候卡的要死.所以我就想pip能不能安装本地的包. 找到了这篇博客: http://me.iblogc.com/2015/01/01/pip%E5%B8%B8% ...

  2. /etc/bashrc

    [ "$PS1" = "\\s-\\v\\\$ " ] && PS1="[\[\e[34;1m\]\u@\[\e[0m\]\[\e[3 ...

  3. Win 10 MSYS2 VS Code 配置 c++ 的编译环境

    博客参考 https://www.cnblogs.com/esllovesn/p/10012653.html 和 https://blog.csdn.net/bat67/article/details ...

  4. HttpUtils(2)

    import java.io.BufferedReader; import java.io.BufferedWriter; import java.io.InputStreamReader; impo ...

  5. LinQ中合并、连接、相交、与非查询

    LinQ中Union合并查询:连接不同的集合,自动过滤相同项:延迟.即是将两个集合进行合并操作,过滤相同的项 var cities = (from p in mylinq.System_Places ...

  6. [LeetCode] 288.Unique Word Abbreviation 独特的单词缩写

    An abbreviation of a word follows the form <first letter><number><last letter>. Be ...

  7. Kubernetes 健康状态检查(九)

    强大的自愈能力是 Kubernetes 这类容器编排引擎的一个重要特性.自愈的默认实现方式是自动重启发生故障的容器.除此之外,用户还可以利用 Liveness 和 Readiness 探测机制设置更精 ...

  8. Kubernetes Pod应用的滚动更新(八)

    一.环境准备 我们紧接上一节的环境,进行下面的操作,如果不清楚的,可以先查看上一篇博文. 滚动更新是一次只更新一小部分副本,成功后,再更新更多的副本,最终完成所有副本的更新.滚动更新的最大的好处是零停 ...

  9. ObjectARX开发VC版本对照表R14~AutoCAD2020

  10. 使用clion+cmake+vcpkg的开发现代的c++跨平台程序

    使用clion+cmake+vcpkg的开发现代的c++跨平台程序 使用c++开发跨平台的程序 背景 在开发过程中,使用c++作为开发语言,通常被认为是痛苦的,啰嗦的,超长开发时间的.最近几年有各种各 ...