小程序踩坑梳理(持续更新)

前短时间公司在探索新的C端产品,在一段艰难的抉择之后,决定先从小程序入手而非app原生开发,毕竟微信自带的流量对我们还是有很大吸引力的,所以我也不得不去踩小程序的坑(是真的坑),至今为止项目已经有20万+的用户,也算可以告一段落,这里准备把最近遇到的坑整理一下,后续如果遇到问题也会持续更新。欢迎大家帮忙补充问题或提出错误~

接下来我会把问题分为以下几大类,控件问题,小程序基本知识和小程序后台管理问题。

控件问题

原生组件

input canvas camera live-player live-pusher map textarea video
以上是原生组件,小程序组件与原生组件有本质区别,原生组件脱离在webview渲染流程外。开发者工具上的原生组件用web组件模拟,所以和真机很多情况不一致,有原生组件的最好使用真机模式调试

原生组件的问题
原生组件层级最高 其他组件z-index不能遮挡原生组件
原生组件不能再 scroll-view swiper picker-view movable-view使用
不能设置css动画
不能设置position:fixed
不能再父节点使用overflow:hidden裁剪原生组件显示区域
原生组件不能使用bind:eventname写法只能bindeventname。也不支持catch和capture绑定
iOS原生组件不能触摸
原生组件能挡住vConsole

cover-view / cover-image

如果我们需要在原生组件上覆盖视图或图片,由于原生组件层级最高的原因,所以我们只能使用提供给我们的cover-view和cover-image
可覆盖在原生组件上,只可cover-view和cover-image互相嵌套,或在cover-view上添加button

scroll-view

小程序给我们提供了一个可以滚动的控件,可对比iOS的UIScrollView和android的ScrollView,可以实现独立的滚动区域,不过遇到一些问题的时候,还是要乖乖使用自带的Page滚动。
scroll-view中不能使用原生组件,如果长页面中有原生组件,还是要使用Page滚动
滚动scroll-view时会阻止页面回弹,所以不能触发onPullDownRefresh
如果想使用下拉刷新(触发onPullDownRefresh),就要使用页面的滚动,page滚动同样可以通过点击顶部状态栏回到页面顶部

下拉刷新

“enablePullDownRefresh”:”true”
onPullDownRefresh:function(){ wx.stopPullDownRefresh() }
这里在特定位置要使用wx.stopPullDownRefresh() 方法停止,否则会一直保持下拉的状态

NavigationBar / TabBar

不支持自定制样式,只能通过创建view的方式模拟,原生颜色只支持纯色,navigationBarTextStyle导航条标题色只能white或black
同样不支持自定制功能,如果转发的小程序路径是二级页面,那么打开的小程序没有返回按钮,如果想把导航条加返回按钮,同样只能通过创建view方式模拟

Page滚动

动态滚动page页面 wx.pageScrollTo({ scrollTop:0 }) //scrollTop表示滚动到顶部的距离

页面跳转

wx.navigateTo等方式进行跳转,重点是如果有页面属于tabBar上,那只能用wx.switchTab跳转到tabBar页面,原本页面会消失同样不会有返回按钮


小程序基本知识

快速新建文件

app.json填写路径保存就可以生成包含四个必要文件的文件夹,例如"pages/index/index"

找不到文件路径

如果发现提示类如 pages/index/index not found类型的提示,表示没有在app.json的page里面添加该文件路径,同上一条,最好使用直接在app.json中填写路径的方式创建文件,快速又不会出错

Pages顺序的问题

首页要写在page的最前面,page第一个下标为第一个加载的页面,顺序也尽量保证二级页面在一级页面后面,避免找不到的问题

boolean类型的标签属性

boolean类型的属性,例如scroll-y,希望生效可以直接用scroll-y或者scroll-y=“xxx” 这里xxx即使是false字符串也一样生效,想不生效可以使用 scroll-y=“” 这里留空 表示false,如果写了值,本人理解为任何有值的字符串其实都为真也就是true,当然默认值为false这里不考虑

wxss

小程序的像素单元可以使用rpx,rpx可以完美解决适配问题
组件和引用组件的页面不支持id选择器#a,属性选择器[a]
使用子元素选择器只能在view标签和子节点中使用

button边框

给button本身设置border无效 button根据::after实现的边框,使用button::after{border:none;}

数据操作

使用this.data.userInfo = xxx; 这种格式不能做到data中数据的修改,要使用this.setData({userInfo:xxx})这种方式

富文本问题

项目中难免会遇到使用富文本,小程序有一套成熟的富文本解析框架:wxParse.js

控件定制问题

不能自定制小程序控件的样式,例如slider不支持纵向样式,即使使用旋转实现样式,但是手势还是横向操作


小程序后台管理问题

AppSecret

生成之后一定保存好,否则重置的话,不止前台对接第三方sdk问题,包括后端的配置都要改,如果漏掉一个忘记修改就会有很大的坑出现,所以还是尽量不要修改

服务器域名配置问题

基本接口api地址域名,上传文件域名,业务域名一定第一时间在小程序后台配置好,否则原本开发测试没问题的项目,发布生产之后就会各种接口突然不能调用了

上线问题

所选分类一定注意,如果分类对应不上小程序的类型,无法审核通过
如果小程序的某些功能如果需要证书(如视频播放),那么请提前办好,否则同样不能审核通过或强制下架

配置修改次数问题

小程序很多设置一定时间段修改次数是有限的,一定要提前注意,否则会造成无法修改信息的情况
小程序发布后每年只能修改2次名称,每月可以修改5次头像
服务器域名和业务域名等也有限制,服务器域名每个月可以修改5次,业务域名每年修改50次

以上遇到的坑是我这段时间亲身经历,后期会持续更新,如果大家有什么遇到的问题,欢迎一起分享。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 给提问的开发者的建议:提问之前先查询 文档、通过社区右上角搜索搜索已经存在的问题。 写一个简明扼要的标题,并且...
    极乐叔阅读 13,733评论 0 3
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,241评论 4 61
  • 走过的,只有漫长的路,留下的,只有放不开回忆,流逝的,只有曾经不太珍惜的时间,而流过的,却只记得破碎的眼泪。 ...
    换个轨迹阅读 276评论 0 1
  • 和谐号过了婺源以后 满座的车厢稀疏了下来 过了上饶 一节车厢 大约也就五六个人了 像是收割后的田野 此时是二十点三...
    武夷闲客阅读 798评论 11 27
  • 通过 Java 封装接口 Filter 能够对前端的网络请求进行拦截。使用 IDEA 编辑器建立 web 应用工...
    uniapp阅读 2,099评论 0 0