使用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
      }
    });

 

在 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设置为#