前短时间公司在探索新的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次
以上遇到的坑是我这段时间亲身经历,后期会持续更新,如果大家有什么遇到的问题,欢迎一起分享。