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

爷,独闯天下 提交于 2020-02-21 18:53:50

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

总结主要问题:

  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和秘钥为小程序的)

 

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!