E企盈营销工具技术服务商 热线:4006-838-530

微信小程序开发中遇到的问题与技巧汇总

E企盈直播平台营销卖货系统

从微信小程序发布到现在经手的小程序也有好几个了,开发过程中多少会遇到一些坑,这里汇总一下开发中遇到过的坑与小程序开发技巧。首先我要先吐槽一下mpvue。由于我之前做过的小程序全部都是原生开发,最近的一个项目一开始的选型是准备使用mpvue的,我自己也想尝尝鲜,但是在做完基础准备,开始开发的第三天在写一个带输入框的组件时遇到了严重的bug,以至于所有组件形式的输入框全部都不能使用。在github上看了mpvue dev分支上的提交记录,最近一次是半个月前的,提交了部分代码并添加了数个使用者。还好当时果断放弃mpvue转为原生开发,才使得项目按时上线。在写这篇文章的时候,我又查看了mpvue的提交记录,最近一次为18天前,提交的内容仅仅是添加了readme中的使用者。合着这一个月mpvue正真的代码提交只有一次。感觉美团造了mpvue这个轮子后,对其更新与修复并不是很上心,反观wepy,差距真心大。这里建议大家小程序开发还是使用原生开发的好,mpvue、wepy最好不要使用,wepy虽然有人维护,但其bug也不少,原生开发才是最稳的选择,小程序一旦有任何更新这些框架可不一定来得及作出调整。开发中遇到的问题:1、textarea层级最高的Bug、由于textarea使用的是原生组件,它的层级最高,会产生很多诡异的Bug,具体可以看这里和这里的末尾几行。2、微信小程序码仅仅针对线上,开发版与体验版扫码会提示该小程序未发布。测试小程序码的方法:a.设置编译模式参数测试小程序码如配置url:pages/index/index?scene=6430277129069593265,scene为小程序码B接口所带参数(多参数可自定义符号分割,长度不可超过32个字符)onLoad (options) {  // 这里就可以拿到小程序码中的参数6430277129069593265  console.log(‘二维码进入’, decodeURIComponent(options.scene)}   b.直接将生成的二维码通过开发者工具的‘二维码编译’解析出来(虽然这种方式是最好的选择,但自己尝试解析不出来,全部都跳转了首页)所以不建议在自己所开发的第一个版本小程序就上线小程序码功能,可在第一个版本预留页面,在onLoad中预先写好测试代码,以供后续版本调试小程序码使用,确保下次上线小程序码一次成功。3、iOS端,page中开启了下拉刷新,又使用了 toast / loading,下拉刷新时页面会有一个很大的回弹动作,解决方法为去掉微信的toast / loading或自己写loadinng弹框。4、在组件中使用keyframes 不生效的问题问题代码如下:@-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、 必须设置高度,否则无法监听相关事件。10、不能通过绝对定位,上下左右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’。15、 16、小程序canvas无法直接绘制网络图(开发工具有效,真机无效)需要使用 downloadFile API 下载图片后绘制,且图片地址必须配置在后台的‘downloadFile合法域名中’无效const cardBg = ‘https://image.shanglishi.com/share-BJ.png’ctx.drawImage(cardBg, 0, 0, 250, 200) ctx.draw()有效wx.downloadFile({   url: cardBg ,   success: function (res) {     ctx.drawImage(res.tempFilePath, 0, 0, 250, 200)     ctx.draw()   }})17、canvas绘制圆形图片,开发工具与真机存在差异18、input获得焦点,软键盘弹出,光标与键盘默认距离为0,键盘会遮挡住部分元素,可设置cursor-spacing(int)来设置键盘与光标的距离,以显示完整元素19、小程序view英文数字不换行的问题,添加word-break:break-all;即可小程序开发技巧:1、小程序调用子组件方法countdown id=”countdown”/countdown onReady() {    this.countdown = this.selectComponent(‘#countdown’)    this.countdown.start()}2、直接改动上一个页面的data。const pages = getCurrentPages(); // 当前页面const prevPage = pages[pages.length – 2]; // 上一页prevPage.setData({ // 直接给上一页面赋值  selectCity: info,});3、微信群只显示首字母分享到群的信息只能拿到群ID获取到的又是完整群名只显示首字母有两种方法:足够大的字体与足够大的字间距,只保留第一个字,将其余的字挤下去,父元素溢出隐藏。该方法只支持纯中文或纯英文,中英混杂会出现一个中文和一个英文同时出现的情况。view class=’big-qun-name’  open-data type=”groupName” open-gid=”{{ item.open_gid }}”/open-data/view.test open-data{   width: 100rpx;   height: 100rpx;   line-height: 100rpx;   font-size: 51rpx;   letter-spacing:1px;   display: block;   color: #fff;}设置字体为0,使用css3给首字母设置字体大小。该方法使用起来时好时坏,不太建议使用。view class=”nc-img__text” wx:else  open-data openGid=”{{groupid}}” type=”groupName” /open-data/view.text {    width: 50px;    height: 50px;    border-radius: 50px;    background-color: #b8b8b8;    color: #fff;    font-size: 60rpx;    display: flex;    justify-content: center;    align-items: center;    position: absolute;    left: -1px;    top: -1px;}.text open-data {    width: 50px;    height: 50px;    line-height: 48px;    display: block;    text-align: center;    font-size: 0;}.text open-data::first-letter {    font-size: 60rpx;}可以考虑使用群成员的头像来表示该群。4、去除小程序的默认样式button.remove-btn-style{  outline:none;  border:none;  list-style: none;  border-radius:0;}button.remove-btn-style:after{  outline:none;  border:none;  list-style: none;}注意点:1、正式上线接口需要使用https,接口需在后台配置白名单,白名单一个月只能修改五次,建议一次多配置几个,直接将测试环境与生产环境域名配全,避免多次修改带来的麻烦。2、请求白名单配置有延迟,可能开发工具请求不了手机却可以、等待几分钟后再次尝试即可。3、https可以使用内网穿透到本地。4、上线测试版本需要小程序关联公众号。5、由于微信修改了getUserInfo机制,所以不要在进入小程序调用wx.login之后立刻调用wx.getuerinfo,一方面用户很大概率会点击拒绝授权导致小程序功能无法使用,另一方面由于wx.login已经可以用于用户登录,我们应在需要的时候再调用,详细调整点击这里。6、微信修改了分享机制,导致开发者拿不到任何分享后的回调(成功、失败、完成)对于想要获取分享结果的今后将无法实现;对于想要获取分享信息的,可在分享后点击群内分享消息卡片,在App的onLaunch与onShow(建议在onShow中获取,onLaunch在小程序整个生命周期中只会执行一次)中可获取shareTicket ,用来换取群唯一标识 openGId ,进而显示对应群的相关信息的小程序。

赞(0) 打赏
未经允许不得转载:E企盈小程序开发-热线:4006-838-530 » 微信小程序开发中遇到的问题与技巧汇总
分享到: 更多 (0)
E企盈小程序直播营销卖货系统
E企盈直播平台营销卖货系统

评论 抢沙发

E企盈小程序开发

联系我们联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏