h5页面调用小程序的定位功能_小程序如何跳转h5页面

小程序跳转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')

}