开发嵌入京东app h5| Hybrid | 微信小程序 | 实践踩坑总结十六条(下)

简介: 踩坑实践

8 taro跨平台开发H5: swiper组件横向滚动平铺问题

背景

在用taro-vue构建 h5应用的时候,对于banner轮播图部分,出现一个诡异的问题,就是水平方向轮播的时候,期望图片是正常的轮播效果,但是初始化的时候,图片垂直方向平铺。

大致效果如下图所示:

期望结果

实际结果

解决方案

大致代码如下:

<swiper  class="swiper-wrap"  >
  <swiper-item
        v-for="(v,idx) in renderList"
        :key="idx"
        class="swiper-item"
    >
        <view class="swiper-wrap-item">
            <image
            mode="widthFix"
            :src="v.path"
            class="swiper-image"
            />
        </view>
    </swiper-item>
</swiper>

这个棘手的问题在于不是每次都复现,由于这个页面是商品详情页,问题会根据某一个商品出现。因为 renderList 是通过后台获取的图片列表,所以判断问题是由渲染swiper -> 请求数据赋值renderList -> 再到swiper-item渲染图片列表的过程中,某一个环节出了问题。遂改变了渲染方案, 所以采用 获取数据 -> 渲染swiper ->渲染swiperItem的方案。

改进后的代码如下:

<swiper  class="swiper-wrap"  v-if="renderList.length > 0"  >
  <swiper-item
        v-for="(v,idx) in renderList"
        :key="idx"
        class="swiper-item"
    >
        <view class="swiper-wrap-item">
            <image
            mode="widthFix"
            :src="v.path"
            class="swiper-image"
            />
        </view>
    </swiper-item>
</swiper>

renderList获取到数据之后,在依次渲染swiperswiper-item。根本解决了这个问题。

微信小程序

以下在开发小程序的过程中遇到的兼容问题。

1 android问题:打开webview被微信拦截问题

背景

在微信小程序里开发webview h5的时候,在配置了合法域名,域名备案的情况下,出现了 ios 上正常打开,但是在 android 手机上出现了被拦截的情况。而且这些情况都是因为打开webviewurl中存在汉字的情况。

效果图片

分析原因,解决方案

实际原因很简单,安卓手机对于 http / https url如果存在汉字,需要用encodeURI对汉字进行编码处理就可以了。

 <web-view :src="webViewUrl" @message="handerMessage" />
 this.webViewUrl  = commonUrl + '/pages/goods/index?name=' + encodeURI('外星人')

如果是接口请求,就这么写

wx.request({
   
   
   url: commonUrl + '/pages/goods/index?name=' + encodeURI('外星人'),
   method: "GET",
})

完美解决了问题。

webview 被微信拦截,详细解决方案。

关于微信小程序中webview被拦截。我总结了一个详细的方案,供大家参考,也是开发中踩坑实录。

如果在微信小程序开发webview中 , 被微信拦截,你需要这样逐一排查。

① 首先检查域名是否备案

首先检查域名是否备案,如果域名没有备案,是无法正常打开webview的,如果当前域名是二级域名,那就看主域名有没有备案,二级域名无需独立备案。

② 配置业务域名

配置业务域名流程很简单,首先登陆小程序后台 -> 开发,开发管理 - > 开发设置。

然后选择业务域名 -> 点击修改 -> 添加业务域名。

注意上边这部分,需要按这上面的操作添加。添加成功后,会自动添加到,合法域名列表中。

③ 如果 ① 和 ② 完成后,仍然被拦截

如果走完上边的两步,仍然被拦截。在2020年之前的域名,一般不会被拦截,但是微信对新申请的域名比较严格,需要先点击申诉试试,如果申诉还不行的话,需要联系微信团队相关人员解决问题,因为我们公司有与微信团队联系的部门,所以无须我们联系。

④ 如果只有安卓手机被拦截

如果只有安卓手机被拦截的情况,请按照上面的方法,编码带汉字的url

2 iOS问题: 微信小程序1rpx border ios真机显示不全问题

背景

微信小程序在iphone低版本手机(iphone6 ,6p),如果多个视图容器排列(水平和竖直方向都会存在),可能会出现个别边框显示不全的问题。

效果如下图所示:

<view class="father" >
    <view class="item" >商品1</view>
    <view class="item" >商品2</view>
    <view class="item" >商品3</view>
    <view class="item" >商品4</view>
</view>
.father{
   
   
    width: 696rpx;
    height: 60rpx; 
    font-size: 28rpx;
    color: #01b5b5;
    margin: 0 auto;  
   }
   .item{
   
   
    height: 60rpx;
    line-height: 60rpx;
    border: 1rpx solid #01b5b5;
    float: left;
    border-radius: 10rpx;
    padding: 0 20rpx;
    margin-right: 16rpx;
    margin-bottom: 16rpx;
}

解决方案

经过测试得来一组数据 ,注意步骤1中加粗的文本.label-con类中width:696rpx,将标签的父容器宽度设置为下面的值都会出现这个692 693 696 697 700 701 704 705 708 709。我们把这组数字除以2。

692/2=346,693/2=346.5,696/2=348,697/2=348.5,700/2=350,701/2=350.5,704/2=352,705/2=352.5,708/2=354,709/2=354.5

分析结果:当标签的父容器宽度(单位rpx)÷2的值为偶数或偶数.5的时候会出现该bug,那么我们可以推到出用200.52=401,3022=604等等都会重现这个bug。那么解决方案油然而生。

第一种: 设置高度/宽度到安全的值

第一种方式是设置标签父容器的宽度到无bug值,即(奇数或奇数.5)2,例如2812rpx,281.5*2rpx可以解决;

第二种:放一个1rpx的元素占位。(亲测有效)

<view class="father" >
    <view class="hold" />
    <view class="item" >商品1</view>
    <view class="item" >商品2</view>
    <view class="item" >商品3</view>
    <view class="item" >商品4</view>
</view>
.hold{
   
   
    width: 1rpx;
    height: 100%;
    float: left;
}

效果如下,完美的解决了这个问题。

3 小程序问题: scroll-view 不滑动问题

背景

相信很多同学在开发微信小程序的时候都会遇到scroll-view不滑动的情况,造成scroll-view不滑动的原因有会多,横向和竖向不滑动的原因也不同,接下来我会分别从横向和竖向分别介绍造成滑动的原因。

横向:

竖向:

解决方案

1 竖直方向

对于竖直方向的滑动,造成原因如下:

scroll-viewscroll-y 是否为 true

<scroll-view :scroll-y="true" >
  <!-- 此处省略很多东西 -->
</scroll-view>

scroll-view 必须设置具体的高度,如果没有设置高度,或者直接继承父元素高度100%,那么 scroll-view竖直方向将无效。我们必须动态获取scroll-height因为在不同型号手机,都要达到完美的效果

如何正确获取scroll-view高度

情况一 scroll-view 在中间的情况:

const scrollHeight = windowHeight - scrollTop - scrollBottom

情况二 scroll-view 靠底部的情况 :

const scrollHeight = windowHeight - scrollTop

③ 检查 scroll-view 是否设置了 overflow-y: auto; 等滑动属性。

<scroll-view :scroll-y="true" class="scroll_box"  >
  <!-- 此处省略很多东西 -->
</scroll-view>
.scroll_box{
   
   
    height:500px;
    overflow-y: auto;
}

2 水平方向

对于水平方向的滑动,造成原因如下:

scroll-viewscroll-x 是否为 true

<scroll-view :scroll-x="true" >
  <!-- 此处省略很多东西 -->
</scroll-view>

② 不要设置 display:flex; 等情况 ,让子元素设置 display:inline-block

<scroll-view :scroll-x="true" class="scroll_box"  >
   <view  class="item"  >  <!-- 此处省略很多东西 --> </view>
   <view  class="item"  >  <!-- 此处省略很多东西 --> </view>
   <view  class="item"  >  <!-- 此处省略很多东西 --> </view>
   <!-- .... -->
</scroll-view>
.scroll_box{
   
   
    /* display:flex; 不要这么做 */
    white-space: nowrap;
}
.item{
   
   
   display:inline-block; /* 这么做 */
}

scroll-view 设置样式 white-space: nowrap;

<scroll-view :scroll-x="true"  style="white-space: nowrap;" ></scroll-view>

4 低版本android手机:原生组件层级问题

背景

这个是很久之前做的一个类似地图的项目,在地图组件上,有一个view,在高版本手机上,正常显示,但是在低版本安卓手机上,会出现view只有文字能看见,背景完全被原生组件覆盖,设置层级也没有效果。

解决方案

后来差了微信文档,才明白原生组件和原生组件的限制。

小程序中的部分组件是由客户端创建的原生组件,这些组件有:

camera
canvas
input(仅在focus时表现为原生组件)
live-player
live-pusher
map
textarea
video

原生组件的使用限制

由于原生组件脱离在 WebView 渲染流程外,因此在使用时有以下限制:

①原生组件的层级是最高的,所以页面中的其他组件无论设置 z-index 为多少,都无法盖在原生组件上。后插入的原生组件可以覆盖之前的原生组件。

②原生组件还无法在 picker-view 中使用。基础库 2.4.4 以下版本,原生组件不支持在 scroll-view、swiper、movable-view 中使用。

③部分CSS样式无法应用于原生组件,例如:无法对原生组件设置 CSS 动画,无法定义原生组件为 position: fixed,不能在父级节点使用 overflow: hidden 来裁剪原生组件的显示区域。

④原生组件的事件监听不能使用 bind:eventname 的写法,只支持 bindeventname。原生组件也不支持 catch 和 capture 的事件绑定方式。原生组件会遮挡 vConsole 弹出的调试面板。 在工具上,原生组件是用web组件模拟的,因此很多情况并不能很好的还原真机的表现,建议开发者在使用到原生组件时尽量在真机上进行调试。*

替代方案

cover-viewcover-image
为了解决原生组件层级最高的限制。小程序专门提供了 cover-viewcover-image 组件,可以覆盖在部分原生组件上面。这两个组件也是原生组件,但是使用限制与其他原生组件有所不同。

5 ios问题: 微信scroll-view内部定位元素抖动问题

背景

ios环境下,scroll-view标签里面如果有,position:absolute的元素。当scroll-view滑动的过程中,定位的元素会出现抖动的情况。

🤔分析原因,还是 scroll-viewios兼容性的原因造成的。

解决方案

针对这个抖动问题,解决方案也是很简单,我们把定位的元素从scroll-view拿出来。就能根本解决这个问题。

<view class="box" >
    <scroll-view class="scroll_box"  :scroll-y="true" >
        <view class="current" >我是定位元素</view>
    </scroll-view>
</view>
.box{
   
   

}
.scroll_box{
   
   
    height:500px;
    overflow-y: auto;
    position:relative;
}
.current{
   
   
   position:absolute;
   left:0;
   top:0;
}

改成

<view class="box" >
    <scroll-view class="scroll_box"  :scroll-y="true" >
    </scroll-view>
    <view class="current" >我是定位元素</view>
</view>
.box{
   
   
    position:relative;
}
.scroll_box{
   
   
    height:500px;
    overflow-y: auto;
}
.current{
   
   
   position:absolute;
   left:0;
   top:0;
}

6 微信小程序跳转微信小程序,第二次跳转无效

背景

在开发小程序的时候,有一个小程序跳转另外一个小程序的场景,第一次的时候没有任何问题,但是当从跳转的目标小程序,返回到当前小程序之后,第二次跳转的时候,发现跳转功能失效了,无法再次跳转。我们的跳转逻辑是写在一个小程序过渡页面的生命周期中的。具体流程图如下所示:

解决方案

先看看跳转小程序方法

wx.navigateToMiniProgram({
   
   
    appId:'appId',
    path:'路径',
    extraData:'需要传递给小程序的数据',
    success(){
   
   }, // 成功回调
    fail(){
   
   }, //失败回调
    complete(){
   
   } //无论成功/失败,都会执行完成方法。
})

🤔这到底是为什么呢,这个问题困扰我很久,查阅了相关资料,微信文档都没找到相关的解决方案。但是微信文档有这么一句话,需要用户触发跳转,从 2.3.0 版本开始,若用户未点击小程序页面任意位置,则开发者将无法调用此接口自动跳转至其他小程序
最后发现是第二次跳转的过程中,由于不是用户主动行为(点击事件等人为主动的行为),而是又过渡页面的生命周期执行的跳转小程序,所以微信被判定无效的跳转,就会直接走跳转失败的逻辑,webview里面的点击跳转事件不算是用户的主动行为😂😂。

所以我们在过渡页进行一判断,如果是第二次跳转,先弹出弹窗,让用户主动点击,触发用户主动行为。然后再跳转小程序。

7 taro小程序 scroll-view 下滑,突然置顶问题

背景

在用taro-vue搭建小程序的时候,在scroll-view向下滑动的时候,会出现一个诡异情况,就是scroll-view会因为一个兄弟元素的显示隐藏,而突然置顶。

结构是这样的。

<view>
    <scroll-view :scroll-y="true" >
       <!-- 此处省略很多 -->
    </scroll-view>
    <view  class="current" v-show="currentShow" > </view>
</view>

scroll-view滑动的时候,想用变量currentShow控制scroll-view显示隐藏,但是 currentShow一旦改变,就会引起 scroll-view 突然置顶。

解决方案

scroll-view的问题还真是多呀,这个问题曾困扰笔者很久,taro3.0 taro-vue毕竟不够成熟,会有很多想象不到的问题,如果想用taro,我这里推荐taro2.0比较成熟。

废话不多说,这里介绍两个解决方案。

1 将当前元素节点放在 scroll-view元素内部。

<view>
    <scroll-view :scroll-y="true" >
       <!-- 此处省略很多 -->
        <view  class="current" v-show="currentShow" > </view>
    </scroll-view> 
</view>

2 将v-if改变成 v-show

<view>
    <scroll-view :scroll-y="true" >
       <!-- 此处省略很多 -->
    </scroll-view>
    <view  class="current" v-if="currentShow" > </view>
</view>

8 小程序cavans问题,生成二维码问题。

问题汇总

canvas 遇到的坑

① 关于canvas 宽高以及缩放比问题,绘制的元素变形,画布的高度真得等于cavans标签设置的宽高么?

② canvas怎么绘制叠在一起的两张图片,并控制层级?

③ 如何用canvas绘制,多行文本?

④ 如何根据设计稿,精确还原海报各个元素位置问题。

⑤ canvas怎么绘制base64的图片?

⑥ 如何绘制网络的图片,两种canvas画布api,绘制图片有什么区别完成?

生成二维码遇到的坑

① 如何正确选型生成二维码工具?

② 生成的二维码,识别不出来怎么办?

③ 如何绘制二维码上的logo?

解决方案

这些问题都会在笔者的另一篇文章中找到答案,文章的传送门是:

建议收藏」小程序canvas绘制海报全流程

总结

这些问题都是笔者在实际工作中遇到的问题,吐血总结踩坑实录,为了让大家少走弯路。送人玫瑰,手留余香,阅读的朋友可以给笔者点赞,关注一波 ,陆续更新前端超硬核文章。

回看笔者往期高赞文章,有更多精彩内容等着你!

vue3.0源码系列

react-hooks系列

开源项目系列

顺便透露一下,接下来会发布一篇,react-keepalive-router系列第二篇文章,完善功能。

参考资料

微信小程序1rpx border ios真机显示不全问题分析及解决方案

微信官方文档

相关文章
|
1月前
|
存储 人工智能 移动开发
uni-app+vue3接入deepseek-v3搭建跨端ai流式(小程序+app+h5)
基于Uniapp+Vue3+Markdown接入DeepSeek-V3聊天大模型,支持编译到H5+小程序+App端。实现流式输出、支持亮色/暗黑主题、代码高亮、会话本地存储等功能。
289 12
|
3月前
|
安全 算法 小程序
【03】微信支付商户申请下户到配置完整流程-微信开放平台创建APP应用-填写上传基础资料-生成安卓证书-获取Apk签名-申请+配置完整流程-优雅草卓伊凡
【03】微信支付商户申请下户到配置完整流程-微信开放平台创建APP应用-填写上传基础资料-生成安卓证书-获取Apk签名-申请+配置完整流程-优雅草卓伊凡
211 28
【03】微信支付商户申请下户到配置完整流程-微信开放平台创建APP应用-填写上传基础资料-生成安卓证书-获取Apk签名-申请+配置完整流程-优雅草卓伊凡
|
3月前
|
存储 移动开发 小程序
校园圈子系统小程序(圈子论坛、私信聊天、资料共享、二手交易、兼职,跑腿)开源码开发/微信公众号、小程序、H5多端账号同步/搭建多城市的综合社交生活平台
基于开源技术栈构建的校园圈子系统小程序,整合社交与生活服务功能,涵盖兴趣圈子、私信聊天、资料共享、二手交易、兼职跑腿等六大核心模块。通过多端账号同步(微信公众号/小程序/H5),实现数据实时交互,满足学生群体的多元化需求。项目精准锚定校园市场,以“社交+服务”双轮驱动,提供一站式解决方案,支持快速部署与多校区运营,同时具备广告、佣金、会员等多元变现能力,是打造校园生态的理想工具。
281 2
校园圈子系统小程序(圈子论坛、私信聊天、资料共享、二手交易、兼职,跑腿)开源码开发/微信公众号、小程序、H5多端账号同步/搭建多城市的综合社交生活平台
|
2月前
|
小程序 关系型数据库 Java
weixin168“返家乡”高校暑期社会实践微信小程序设计与开发ssm(文档+源码)_kaic
本文探讨高校暑期社会实践微信小程序的开发与应用,旨在通过信息化手段提升活动管理效率。借助微信小程序技术、SSM框架及MySQL数据库,实现信息共享、流程规范和操作便捷。系统涵盖需求分析、可行性研究、设计实现等环节,确保技术可行、操作简便且经济合理。最终,该小程序可优化活动发布、学生信息管理和心得交流等功能,降低管理成本并提高工作效率。
|
3月前
|
小程序
【04】微信支付商户申请下户到配置完整流程-微信开放平台移动APP应用通过-微信商户继续申请-微信开户函-视频声明-以及对公打款验证-申请+配置完整流程-优雅草卓伊凡
【04】微信支付商户申请下户到配置完整流程-微信开放平台移动APP应用通过-微信商户继续申请-微信开户函-视频声明-以及对公打款验证-申请+配置完整流程-优雅草卓伊凡
302 0
【04】微信支付商户申请下户到配置完整流程-微信开放平台移动APP应用通过-微信商户继续申请-微信开户函-视频声明-以及对公打款验证-申请+配置完整流程-优雅草卓伊凡
|
3月前
|
Web App开发 移动开发 小程序
公众号小程序H5网页像素流送UE5模型的方法分享
本文探讨了如何通过像素流送技术在小程序、公众号等平台展示复杂的3D模型(如UE5引擎开发的楼盘模型、数字孪生展厅)。该技术将GPU和CPU算力需求转移到服务器端,使用户侧无需高性能硬件即可流畅体验。通过Webrtc实现实时云渲染,确保毫秒级响应,且兼容多种浏览器。使用点量云流等产品级软件,老项目只需重新打包为EXE格式,即可轻松嵌入H5网页、小程序或公众号中,支持Unity、WebGL等多种3D应用及传统CAD模型。
108 1
|
4月前
|
小程序 数据安全/隐私保护 开发者
【02】微信支付商户申请下户到配置完整流程-微信开放平台申请APP应用-微信商户支付绑定appid-公众号和小程序分别申请appid-申请+配置完整流程-优雅草卓伊凡
【02】微信支付商户申请下户到配置完整流程-微信开放平台申请APP应用-微信商户支付绑定appid-公众号和小程序分别申请appid-申请+配置完整流程-优雅草卓伊凡
220 3
|
5月前
|
JSON 小程序 UED
微信小程序 app.json 配置文件解析与应用
本文介绍了微信小程序中 `app.json` 配置文件的详细
890 12
|
6月前
|
移动开发 小程序 前端开发
使用php开发圈子系统特点,如何获取圈子系统源码,社交圈子运营以及圈子系统的功能特点,圈子系统,允许二开,免费源码,APP 小程序 H5
开发一个圈子系统(也称为社交网络或社群系统)可以是一个复杂但非常有趣的项目。以下是一些关键特点和步骤,帮助你理解如何开发、获取源码以及运营一个圈子系统。
301 4
|
5月前
|
移动开发 小程序
thinkphp+uniapp开发的多端商城系统源码/H5/小程序/APP支持DIY模板直播分销
thinkphp+uniapp开发的多端商城系统源码/H5/小程序/APP支持DIY模板直播分销
154 0

热门文章

最新文章