小程序如何跳转h5页面

小程序跳转H5页面是通过web-view组件来实现的，web-view是一个可以用来承载网页的容器，会自动铺满整个小程序页面。

1.配置业务域名

1. 小程序账号必须是企业账号，个人和海外账号暂不支持，只有企业账号才能看到业务域名入口。

2. 在【设置】里找到【业务域名】进行配置，域名只支持https

   
   
   1542096063790.jpg

2.在项目中使用web-view

1. web-view会默认自动打开所跳转的页面，但我们一般项目需求是点击某一按钮或下一步进行跳转，所以在小程序中我们需要新建一个页面来承载web-view

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

3.web-view 相关函数

1. bindload：网页加载成功时触发的函数，但是此函数在微信开发者工具中看不到效果，只有在手机上调试才能看到
2. binderror：网页加载失败触发的函数

4. H5回跳小程序

1. 一般点击H5页面顶部返回按钮需要返回上一步，所以我们需要判断当前环境来决定回退路径

判断环境 （wx.miniProgram.getEnv）

//检测是否是微信小程序环境
export function isMiniProgram(){
    var ua = navigator.userAgent.toLowerCase();
    var envType='#';

    if(ua.match(/MicroMessenger/i) == 'micromessenger'){ //微信环境
        wx.miniProgram.getEnv(function(res) {
            if (res.miniprogram) { // 小程序环境下逻辑
                envType = true
            }else { //非小程序环境下逻辑
                envType =  false
            }
        })
    }else{ //非微信环境逻辑
        envType = false
    }
    return envType
}

注意：返回的结果res.miniprogram的miniprogram全部是小写

回退页面（wx.miniProgram.navigateTo）

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

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