小程式web-view上覆寫原生元件

web-view

一、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);
	}
           

好了，大功告成；

如果大家用這種方式在某些手機不顯示，歡迎留下手機型号一起探讨；

ending…