MENU

小程序开发中遇到的问题与技巧

December 8, 2019 • Read: 383 • 小程序

小程序开发中遇到的问题与技巧

从微信小程序发布到现在经手的小程序也有好几个了,开发过程中多少会遇到一些坑,这里汇总一下开发中遇到过的坑与小程序开发技巧。

首先我要先吐槽一下mpvue。
由于我之前做过的小程序全部都是原生开发,最近的一个项目一开始的选型是准备使用mpvue的,我自己也想尝尝鲜,但是在做完基础准备,开始开发的第三天在写一个带输入框的组件时遇到了严重的bug,以至于所有组件形式的输入框全部都不能使用。
在github上看了mpvue dev分支上的提交记录,最近一次是半个月前的,提交了部分代码并添加了数个使用者。还好当时果断放弃mpvue转为原生开发,才使得项目按时上线。
在写这篇文章的时候,我又查看了mpvue的提交记录,最近一次为18天前,提交的内容仅仅是添加了readme中的使用者。合着这一个月mpvue正真的代码提交只有一次。感觉美团造了mpvue这个轮子后,对其更新与修复并不是很上心,反观wepy,差距真心大。
这里建议大家小程序开发还是使用原生开发的好,mpvue、wepy最好不要使用,wepy虽然有人维护,但其bug也不少,原生开发才是最稳的选择,小程序一旦有任何更新这些框架可不一定来得及作出调整。

开发中遇到的问题:
1、textarea层级最高的Bug、由于textarea使用的是原生组件,它的层级最高,会产生很多诡异的Bug,具体可以看这里和这里的末尾几行。
2、微信小程序码仅仅针对线上,开发版与体验版扫码会提示该小程序未发布。
测试小程序码的方法:

设置编译模式参数测试小程序码
如配置url:pages/index/index?scene=6430277129069593265,scene为小程序码B接口所带参数(多参数可自定义符号分割,长度不可超过32个字符)

onLoad (options) {
  // 这里就可以拿到小程序码中的参数6430277129069593265
  console.log('二维码进入', decodeURIComponent(options.scene)
} 

直接将生成的二维码通过开发者工具的‘二维码编译’解析出来(虽然这种方式是最好的选择,但自己尝试解析不出来,全部都跳转了首页)

所以不建议在自己所开发的第一个版本小程序就上线小程序码功能,可在第一个版本预留页面,在onLoad中预先写好测试代码,以供后续版本调试小程序码使用,确保下次上线小程序码一次成功。

@-webkit-keyframes __spinner-loading {
 from,
 to,
 40% {
  background-color: #888;
 }
 33.333% {
  background-color: red;
 }
}

原因: 33.333% 改为33%即可
5、button有最小尺寸。
6、wxss不支持部分css3选择器。
7、canvas 不支持 overflow:hidden,具体见这里
8、两个canvas叠加在一切,之后进行的一切绘制,dom层级最后的canvas所绘制的东西永远会在最前端,
解决方法:将要放在下层的canvas的wxml写在前面。
9、 <scroll-view>必须设置高度,否则无法监听相关事件。
10、<scroll-view>不能通过绝对定位,上下左右0,来设置全屏铺满,需调用wx.getSystemInfo方法获得屏高,设置style=“height:{{ heightNumber }}px;”
补充:可以在css中为其设置高度为 vh (如:100vh)无需js获取高度也可正常使用。
11、tab页中使用‘wx.getSystemInfo’来获取屏幕高度,真机获取的高度比开发工具少48,这48为tabBar的高度。
12、小程序不能做indexOf以及部分运算,如:{{ useList[index].labIndex.indexOf(lab) > -1 ? 'lab_active' : '' }}
13、小程序不易打开过多页面,目前页面路径最多只能打开十层。
14、小程序测试支付需要扫生成的二维码,而且后台设置金额total_fee单位为分(int),否则报错‘缺少支付total_fee’。

作者:HelloKang
链接:https://www.jianshu.com/p/ba34dd1be0d5
来源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

Archives QR Code Tip
QR Code for this page
Tipping QR Code