小程序与webview之间的跳转

前言：自从小程序提供了webview这个功能，就大大提高了小程序的开发效率，而且能复用之前的H5页面。简单的h5还好办，直接用webview加载即可，可是当h5页面中有第三方客服的时候，由于webview所跳转的路径必须要去小程序的业务域名中配置，而且这个路径还必须是我们自己域名下的。所以就出现了如下问题：

经过一番研究，决定让它触发小程序的微信客服功能。

思路：

当小程序加载h5页面的时候，在服务端判断当前页面的加载环境，如果是普通浏览器加载，则跳转方式不变，如果是小程序加载，则点击咨询客服的时候跳转回小程序。然后通过小程序原生的方法去调用微信客服功能。

具体解决方案：

本人是一枚Java工程师，所以下面介绍的都是Java的一些方法，页面渲染用的是jsp。

1、服务端的jsp页面引入

<script src="/h5iptop/js/jweixin-1.3.2.js"></script>

2、h5页面加载时候判断加载环境

<script>
var smallPro=false;
//判断当前页面是否在小程序环境中
wx.miniProgram.getEnv(function(res) {
  console.log(res.miniprogram) // true
  if(res.miniprogram){
  smallPro=true;
  }else{
  smallPro=false;
  }

});

if(smallPro){
wx.miniProgram.navigateTo({
url:'/pages/contact/contact',//跳转回小程序的页面
            success: function(){
                console.log('success')
            },
            fail: function(){
                console.log('fail');
            },


        });
}else{
window.open('http://t.cn/RXT246p','_blank');//这里是H5页面之前跳转到第三方的咨询客服
}

</script>

3、从这一步开始就已经回到小程序了，我这里自定义一个弹窗来加载小程序的客服功能。

image

4、最后点击确定触发微信小程序的客服功能。到了这一步就可以实现了webview跳转小程序的客服功能了。

但是，大家肯定会问，为啥不是跳转到小程序的时候自动进入小程序的客服功能呢，还要多增加一个界面，多增加一个操作。

没办法，找了各种方法，发现没有页面加载的时候自动调用微信客服的方法，官方解释是说必须要触发才能实现。

---

作者：chen_pan_pan
原文：https://blog.csdn.net/chen_pan_pan/article/details/80332473