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

前短时间公司在探索新的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次

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 205,132评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 87,802评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,566评论 0 338
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,858评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,867评论 5 368
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,695评论 1 282
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,064评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,705评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 42,915评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,677评论 2 323
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,796评论 1 333
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,432评论 4 322
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,041评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,992评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,223评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,185评论 2 352
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,535评论 2 343

推荐阅读更多精彩内容

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