【轉】小程序web-view覆蓋原生組件

一、web-view的使用

官方文檔

<web-view class="map-box" src="https://www.forguo.com"> </web-view>

** 官方指出，小程序默認會覆蓋其它所有的組件**

二、解決需求

需要在web-view頁面上面加一個按鈕，用來跳轉到小程序的頁面，

• 1.通過web-view的接口實現

• // <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
  
  // javascript
  wx.miniProgram.navigateTo({url: '/path/to/page'})
  wx.miniProgram.postMessage({ data: 'foo' })
  wx.miniProgram.postMessage({ data: {foo: 'bar'} })
  wx.miniProgram.getEnv(function(res) { console.log(res.miniprogram) })

  但是需要等到web-view頁面完全加載結束，這樣對於小程序頁面跳轉的操作就有一定的延時了，
  會導致跳轉好多次的情況，而且不及時。

  2.通過在web-view上面覆蓋小程序的標簽來實現了；
  該方式官方沒有指出（但親測有效）
  選擇cover-view覆蓋在web-view上面，將coevr-view寫到web-view里面
  需要將該coevr-view樣式fixed，層級z-index: 99999（越大越好）
  
  

• .tool-bar {
          color: #fff;
          position: fixed;
          bottom: 13%;
          right: 0rpx;
          width: 136rpx;
          height: 236rpx;
          border-radius: 8rpx;
          z-index: 999999;
          /*box-shadow: 0px 0px 15px 4px  rgba(0,0,0,0.15);*/
  
          .nav-bg {
              width: 136rpx;
              height: 236rpx;
              position: absolute;
              left: 0;
              top: 0;
              z-index: -1;
              border-radius: 8rpx;
          }
  
          .tool-btn {
              width:100rpx;
              height: 200rpx;
              position: absolute;
              top: 18rpx;
              left: 18rpx;
              display: flex;
              align-items: center;
              justify-content: center;
              flex-wrap: wrap;
          }
      }

  <web-view src="https://www.forguo.com">
  <cover-view class="tool-bar">
  <cover-image src="../../common/imgs/nav-bg.png" class="nav-bg"></cover-image>
  <cover-view class="tool-btn">
  <cover-view>我的</cover-view>
  <cover-view>訂單</cover-view>
  </cover-view>
  </cover-view>
  </web-view>

   

• Tips: cover-view默認是不可以設置背景圖及box-shadow的，如需：使用cover-image實現

• 當然，如果你寫了發現，開發者工具沒有顯示，（調試樣式可以先刪掉src）

  用手機打開試試，發現是可以的，（用不同的手機試試）

  最終效果如圖紅色部分：

  
  
  

• 三、繼續采坑（如何兼容更多的手機）
  當你發現在IOS可以顯示以為就可以了，其實不是；

  上面的寫法，我用華為榮耀（安卓9和8）、Vivo（安卓7）、Oppo（安卓4）、三星S9（安卓8）都是可以的，

  唯獨在三星S6(安卓6)的手機不顯示，然后就繼續采坑了；

  去網上找，說可以給cover-view的顯示加個延時，一試果然有效

  html加一個wx:if即可

  <web-view src="https://www.forguo.com">
              <cover-view class="tool-bar" wx:if={{showNav}}>
                  <cover-image src="../../common/imgs/nav-bg.png" class="nav-bg"></cover-image>
                  <cover-view class="tool-btn">
                      <cover-view>我的</cover-view>
                      <cover-view>訂單</cover-view>
                  </cover-view>
              </cover-view>
          </web-view>

   

•     data = {
              showNav: false, // 默認不顯示
      }
  
      // wepy 下開發，不用setData就可以
      onLoad() {
            setTimeout(() => {
                 this.showNav = true;
                 this.$apply();
             }, 300);
      }

• ————————————————
  版權聲明：本文為CSDN博主「這魏先森」的原創文章，遵循CC 4.0 BY-SA版權協議，轉載請附上原文出處鏈接及本聲明。
  原文鏈接：https://blog.csdn.net/weiguo19951107/article/details/94305964