记小程序内嵌商城踩过的坑

Posted 2021-03-08 一个九

最近接到需求，需要做一个简单小程序管理自家的设备，但又想增加销售渠道，故打算做个小程序并内嵌自家微信公众号商城。

总结主要问题：

　　1.小程序返回问题

　　2.支付问题

　　3.商城访问权限问题

　　4.ssl证书问题

　　5.端口号冲突问题

 

问题解决：

　　1.问题详情：小程序利用<web-view>嵌入商城界面，左上角返回发现会先出现一次空白页，第二次才会回到小程序页面

　　   原因查找：进入商城时首先会有个微信授权页，然后才会进入微信商城，所以要返回两次

　　   问题处理：由于商城里面还有多个界面，所以不能采用网上流传的监控界面退出事件跳转小程序（不然进入商城子界面的时候也会直接退回小程序），此问题基本无解，但也不是什么影响功能的问题所以可以放宽要求。但是商城内部进入多个界面后，左上角的返回需要一层一层返回，十分不便严重影响用户体验，因此在商城里面的tab栏添加一直接返回小程序按钮，通过判断当前环境，如果是小程序环境下就显示改tab，否则隐藏。

　　　技术要点：　

<script type="text/javascript" src="${pageContext.request.contextPath}/UI/weixin/js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
<script type="text/javascript">
    var ua = navigator.userAgent.toLowerCase();
    if(ua.match(/MicroMessenger/i)=="micromessenger") {
        wx.miniProgram.getEnv((res)=>{
            if (res.miniprogram) {
                //小程序环境
                $("#deviceXiao").show();
                $("#deviceH5").hide();
            }else {
        //微信环境
                $("#deviceH5").show();
                $("#deviceXiao").hide();
            }
        })
    }else {
//非微信环境
        $("#deviceH5").show();
        $("#deviceXiao").hide();
    }
    // alert(typeEnvironment);
    function xiao() {
        wx.miniProgram.navigateTo({ //这将唤起小程序的原生页面
            url: ‘/pages/index/index‘,
        })
    }
</script>    

 

　　2.问题详情：当下单支付的时候发现微信支付唤不起。

　　   原因查找：小程序环境下不支持微信H5支付

　　   问题处理：在商城选择微信支付的时候判断当前环境，如果是小程序环境则跳转小程序新建页面进行支付，在该界面访问新的统一下单接口并唤起小程序支付（统一下单的appid和秘钥为小程序的）