首先:下载引入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. CTF SQL注入

    目录 一.宽字节注入 二.基于约束的注入 三.报错注入 四.时间盲注 五.bool盲注 六.order by的注入 六.INSERT.UPDATE.DELETE相关的注入 七.堆叠注入 八.常用绕过 ...

  2. 第07组 Alpha事后诸葛亮

    1.请在博客开头给出组长博客链接(3.1 2分) 团队:摇光 队长:杨明哲 组长博客:这里 2.参考邹欣老师的问题模板进行总结思考(3.2 27分) 设想和目标(2分) 1.我们的软件要解决什么问题? ...

  3. TCP的连接如何知道对方已经异常断开

    断电的话,对方不会发送任何数据包过来,包括RST.主机无法得知.如果是TCP已经连接,有个定时器,会发送空包,sequence number不变.如果一直收不到ack,会断定对方已经无法通信,而释放系 ...

  4. vue 创建监听,和销毁监听(addEventListener, removeEventListener)

    最近在做一个有关监听scroll的功能, 发现我添加监听之后一直不起作用: 1 2 mounted() {     window.addEventListener("scroll" ...

  5. Service与Activity通信 回调方式***

    要实现service与activity的高强度通信用什么方法? service与activity之前的通信方式有很多,回调接口方式.观察者模式.广播.还有handler等,方法有很多,但要高强度地通信 ...

  6. android: android 布局中的weight 属性

    android: weight是线性布局的特有属性,控件的宽度和高度的不同,也会存在差异. 示例1:将宽度设置为包裹类型wrap_content或0dp <?xml version=" ...

  7. [E2E_L9]GOMFCTemplate的融合进阶

    在前面出现的融合方法中,最突出的问题就是每次运算,都需要将整个推断的过程全部操作一遍,这样肯定是费时间的--所以我们需要将能够独立的地方独立出来,但是这个过中非常容易出现溢出的错误--经过一段时间的尝 ...

  8. [转]c++ 开发 sqlite

    #include <iostream> #include <sqlite3.h> using namespace std; int main() { cout << ...

  9. redis-查看日志

    转: redis-查看日志 redis在默认情况下,是不会生成日志文件的,所以需要配置 配置方法: 1.首先找到redis的配置文件 2.打开配置文件,找到logfile(可能有多个logfile,认 ...

  10. Pycharm连接远程服务器并进行代码上传+远程调试

    前提:需要有一个远程服务器,知道他的ip.port.user.password 一.连接远程服务器 进入配置页面 Pycharm菜单栏,如下图所示,依次点击 Tools -> Deploymen ...