最近接到需求,需要做一个简单小程序管理自家的设备,但又想增加销售渠道,故打算做个小程序并内嵌自家微信公众号商城。
总结主要问题:
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和秘钥为小程序的)
来源:https://www.cnblogs.com/dztHome/p/12342527.html