E企盈营销工具技术服务商 热线:4006-838-530

H5嵌入微信小程序踩过的坑

E企盈直播平台营销卖货系统

关于背景项目是一个涉及跨移动平台的前端项目,技术使用的是vue,因为项目不是很大,所以没有用到状态管理。主要是用vue将h5项目编译成静态页面放到服务器的制定地址上,然后在小程序测使用<web-view>,将服务器上的地址传给这个标签。关于遇到的坑值传输的坑因为使用的是<web-view>,根据我的理解,这个组件类似于html的<iframe>,但又没有<iframe>成熟,很多属性都无法使用,基本的比如宽高。下面是<web-view>的属性。属性名类型默认值说明srcStringwebview 指向网页的链接。可打开关联的公众号的文章,其它网页需登录小程序管理后台配置业务域名。 类似iframe的src。bindmessageEventHandler网页向小程序 postMessage 时,会在特定时机(小程序后退、组件销毁、分享)触发并收到消息。e.detail = { data }bindloadEventHandler网页加载成功时候触发此事件。e.detail = { src }binderrorEventHandler网页加载失败的时候触发此事件。e.detail = { src }上面主要有两个属性可以传值:src 通过url的属性值传值。bindmessage 通过h5页面向小程序 postMessage 传值。第一个属性遇到的坑:总所周知,url的参数值里不能存在=、?等奇怪的符号,不然会出现很奇怪的参数。比如 axxx.com?url=bxx.com?a=123最后拿到的url是什么?肯定不是bxx.com?a=123解决办法对要传入<web-view>的src中参数的值要进行encodeURIComponent(),然后在小程序中拿值是进行decodeURIComponent(),当然,这个需要小程序和H5双方同步(如果小程序和H5是两个项目组时)第二个属性遇到的坑:这个坑属于无意识的,没有细看这个属性的说明导致,所以看到的人请注意上面表格中加粗的位置,这个属性看起来好像很方便,但小程序这边并不是同步接收的,只有在小程序后退、组件销毁、分享时触发并收到消息解决办法如果是实时同步获取数据的情况,这个属性并没有什么卵用。布局的坑这个也是为什么我会觉得<web-view>类似<iframe>但没有<iframe>成熟的原因了,<web-view>是全屏幕的,整个小程序页面如果要用h5,那这个wxml就无法放置更多的组件了,除非用wx:if。其实wx:if只是为了控制这个页面到底用h5还是原生而已。因为<web-view>占满了页面,所以底部导航最后也只能在h5页面中写了,定位使用fixed。遇到的坑:1、fixed布局在小程序中的坑忘记是ios还是app中,当小程序中下拉和上划时,整个页面会看到小程序的容器。这里了解一下小程序容器的结构。而<web-view>属于page内容,所以当在小程序中下拉时,会出现backgroud部分覆盖<web-view>中定位为fixed的部分,如下图,红色文字区域部分被覆盖了。解决方法:定位方式改为absolute,这个可以解决覆盖的问题,但是那一块div会在page被上划或者下拉时跟随page移动,如果在<web-view>中使用小程序的导航,那么整个导航条也会跟随page移动。看使用场景,如果不介意这种情况的可使用这个解决,但介意的话,我这暂时也没有更好的解决方法。如果有更好的解决方案,还望告知。遇到的坑:2、内容高度未达到满屏时无法显示底部的fixed布局的div在ios上,不论是h5嵌入小程序还是app,都会出现这样的问题。当内容高度不够时,无法显示底层的div解决方法:页面设置高度,使用css3的vh特性jssdk的坑–重点关于支付如果你和我一样,也是用的h5嵌入小程序,那么可以跳过在h5页面上使用jssdk进行支付操作了,亲测验证不可行。一直坚信,既然h5能调jssdk接口,那么一定能够调用支付接口。总在想,h5页面直接调用支付,总是比h5与小程序交互去实现支付要简单和方便的多。然而现实告诉我,不可行。原因是因为signature一直报错,后来查了之后,貌似是里面生成signature的有个参数与小程序的不一样。具体我也不是很清楚,如果有了解的还望告知一下。因为该方案并没有成功实现微信支付的功能,所以暂不介绍使用方式。还有一个可能的原因是因为web-view组件中的h5页面不支持支付接口,web-view网页中仅支持以下JSSDK接口:接口模块接口说明具体接口判断客户端是否支持jscheckJSApi图像接口拍照或上传chooseImage预览图片previewImage上传图片uploadImage下载图片downloadImage获取本地图片getLocalImgData音频接口开始录音startRecord停止录音stopRecord监听录音自动停止onVoiceRecordEnd播放语音playVoice暂停播放pauseVoice停止播放stopVoice监听语音播放完毕onVoicePlayEnd上传接口uploadVoice下载接口downloadVoice智能接口识别音频translateVoice设备信息获取网络状态getNetworkType地理位置使用内置地图getLocation获取地理位置openLocation摇一摇周边开启ibeaconstartSearchBeacons关闭ibeaconstopSearchBeacons监听ibeacononSearchBeacons微信扫一扫调起微信扫一扫scanQRCode微信卡券拉取使用卡券列表chooseCard批量添加卡券接口addCard查看微信卡包的卡券openCard长按识别小程序圆形码无以上并没有可以用的支付接口。若以后web-view除了支付接口,则大概可以直接在h5页面上进行支付操作而不用到小程序上操作了。解决方法:1.通过h5调用服务器接口获取到支付所需要的参数(这些参数通过服务器去对接支付中心获取到的)这里需要注意的是服务器获取数据需要openid,而openid需要我们传下去,也就是在调用服务器接口前需要拿到openid。这里的处理是在<web-view>的url中将openid作为参数传下去2.将这些参数通过url跳转到小程序,将参数传到小程序页面(需要新建一个小程序页面)跳转使用的接口是wx.miniProgram.navigateTo,因为当支付失败时需要返回原来的h5页面,返回用的接口是wx.navigateBack,因为返回是在小程序中操作的。举个粒子,小程序中的页面链接为/page/pay/pay,那么h5中进行跳转的操作为const successUrl =encodeURIComponent(‘https://abc.com/successPage’); //支付成功页const path = `/page/pay/pay?timeStamp=${timeStamp}&nonceStr=${nonceStr}&package=${package}&signType=${signType}&paySign=${paySign}&successpage=${successUrl}`; //?后面的参数都是支付需要的参数wx.miniProgram.navigateTo({   url: path})复制代码3.小程序页面接受参数并执行支付操作。小程序中的/page/pay/pay页面中进行支付操作,该页面有一个<web-view>组件,用来跳转支付成功后的页面也就是参数中的successpage<web-view src=’${url}’ />复制代码onLoad: function (options) {    console.log(options)    // 获取网页传过来的值    this.timeStamp = options.timeStamp    this.nonceStr = options.nonceStr    this.package = options.package    this.signType = options.signType    this.paySign = options.paySign    this.successUrl = decodeURIComponent(options.successUrl)    …  },onReady: function(){  wx.requestPayment({    timeStamp: this.timeStamp,    nonceStr: this.nonceStr,    package: this.package,    signType: this.signType,    paySign: this.paySign,    success (res) {         this.url = this.successUrl; //支付成功后会跳转到h5的登陆成功页    },    fail (res) {         wx.navigateBack();    }  })}复制代码关于wx.requestPayment,参见wx.requestPayment这样实现有一个缺点,就是当跳转到小程序页面进行支付时,页面已经换掉了,不再是原来的h5支付页面了,解决也好解决,就是在小程序这边实现一个一摸一样的h5页面视觉,但仍会出现页面刷新跳转的动作。to be continued以上,便是目前记得的所有的坑,后期如果再遇到别的坑,再补充关于文档小程序开发文档jssdk文档微信小程序

赞(0) 打赏
未经允许不得转载:E企盈小程序开发-热线:4006-838-530 » H5嵌入微信小程序踩过的坑
分享到: 更多 (0)
E企盈小程序直播营销卖货系统
E企盈直播平台营销卖货系统

评论 抢沙发

E企盈小程序开发

联系我们联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏