小程序跳转H5页面是通过web-view组件来实现的，web-view是一个可以用来承载网页的容器，会自动铺满整个小程序页面。
1.配置业务域名
- 小程序账号必须是企业账号，个人和海外账号暂不支持，只有企业账号才能看到业务域名入口。
-
在【设置】里找到【业务域名】进行配置，域名只支持https
1542096063790.jpg
2.在项目中使用web-view
-
web-view会默认自动打开所跳转的页面，但我们一般项目需求是点击某一按钮或下一步进行跳转，所以在小程序中我们需要新建一个页面来承载web-view
屏幕快照 2018-11-13 下午4.07.00.png
3.web-view 相关函数
- bindload：网页加载成功时触发的函数，但是此函数在微信开发者工具中看不到效果，只有在手机上调试才能看到
- binderror：网页加载失败触发的函数
4. H5回跳小程序
- 一般点击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')
}
