小程序跳轉H5頁面是通過web-view組件來實現(xiàn)的，web-view是一個可以用來承載網(wǎng)頁的容器，會自動鋪滿整個小程序頁面。

1.配置業(yè)務域名

1. 小程序賬號必須是企業(yè)賬號，個人和海外賬號暫不支持，只有企業(yè)賬號才能看到業(yè)務域名入口。

2. 在【設置】里找到【業(yè)務域名】進行配置，域名只支持https

   
   
   1542096063790.jpg

2.在項目中使用web-view

1. web-view會默認自動打開所跳轉的頁面，但我們一般項目需求是點擊某一按鈕或下一步進行跳轉，所以在小程序中我們需要新建一個頁面來承載web-view

   
   
   屏幕快照 2018-11-13 下午4.07.00.png

3.web-view 相關函數(shù)

1. bindload：網(wǎng)頁加載成功時觸發(fā)的函數(shù)，但是此函數(shù)在微信開發(fā)者工具中看不到效果，只有在手機上調試才能看到
2. binderror：網(wǎng)頁加載失敗觸發(fā)的函數(shù)

4. H5回跳小程序

1. 一般點擊H5頁面頂部返回按鈕需要返回上一步，所以我們需要判斷當前環(huán)境來決定回退路徑

判斷環(huán)境 （wx.miniProgram.getEnv）

//檢測是否是微信小程序環(huán)境
export function isMiniProgram(){
    var ua = navigator.userAgent.toLowerCase();
    var envType='#';

    if(ua.match(/MicroMessenger/i) == 'micromessenger'){ //微信環(huán)境
        wx.miniProgram.getEnv(function(res) {
            if (res.miniprogram) { // 小程序環(huán)境下邏輯
                envType = true
            }else { //非小程序環(huán)境下邏輯
                envType =  false
            }
        })
    }else{ //非微信環(huán)境邏輯
        envType = false
    }
    return envType
}

注意：返回的結果res.miniprogram的miniprogram全部是小寫

回退頁面（wx.miniProgram.navigateTo）

import { isMiniProgram } from '@/config/mUtils.js'

if(isMiniProgram){  //小程序環(huán)境
    wx.miniProgram.navigateTo({url: '/pages/index/main'})
}else{
    this.$router.push('/storeGold')
}