前短时间公司在探索新的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地址域名，上传文件域名，业务域名一定第一时间在小程序后台配置好，否则原本开发测试没问题的项目，发布生产之后就会各种接口突然不能调用了
上线问题
所选分类一定注意，如果分类对应不上小程序的类型，无法审核通过
如果小程序的某些功能如果需要证书(如视频播放)，那么请提前办好，否则同样不能审核通过或强制下架
以上遇到的坑是我这段时间亲身经历，后期会持续更新，如果大家有什么遇到的问题，欢迎一起分享。
网友评论