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、从这一步开始就已经回到小程序了,我这里自定义一个弹窗来加载小程序的客服功能。



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


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

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

在此,如果有小伙伴有更好的方法也可以在下方评论分享一下。


猜你喜欢

转载自blog.csdn.net/chen_pan_pan/article/details/80332473