使用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設置為#