微信小程序开发中遇到的坑

2,678 阅读6分钟

记录前端小白的成长~
写了好多个小程序,用原生写过,框架写过,当然遇到的坑也不少。
一.微信小程序底部菜单tabBar跳转无法带参数
开发小程序不可避免的会遇到参数传递问题,但是小程序底部菜单跳转的时候,是不能带参数的。
解决办法:把需要传递参数的页面在跳转前将数据添加到全局数据app.js里。需要接受参数的页面在onShow方法接收之前添加到app.js的数据即可

二.小程序https部署以及设置合法域名
这个问题是真真的坑了我一下,小程序开发过程中我自己设置的不校验域名,本地请求接口有数据,打开开发调试也有数据,但是上线后所有的数据全是空的,查了资料才知道是小程序环境没配置好。
解决办法:小程序环境需要https支持,配置合法域名。

三.wxss文件中不支持本地图片
写页面样式时,避免不了添加背景图,按照web开发思维,background:url(本地图片的路径)或者在background-image:中设置本地图片的路径,但是在微信小程序上是行不通的。
解决办法:微信小程序的background-image只支持网络图片。可以把图片放到服务器上,或者用base64转码。

四.微信小程序使用POST方法请求
刚刚开始写小程序的时候,被这个问题坑了一下。微信小程序发起wx.request()方法请求,用get方法请求一般不会有什么问题,但是用post方法请求时,就容易出现问题
解决办法:wx.request()使用post方法请求时,还需要加上header,header[content-type]值为application/x-www-form-urlencoded,否则请求返回失败。(最好是统一封装请求方法)

五.微信小程序中屏幕自适应
在设计wxss样式的时候,尽量使用rpx单位,rpx单位是微信小程序中css的尺寸单位,rpx可以根据屏幕宽度进行自适应。但是也是有特殊情况的,有时候我们就不能使用rpx,比如使用到canvas的时候,那么就只能使用px为单位。
解决办法:使用wx.getSystemInfo这个api来获取到运行手机的屏幕的宽度和高度,然后根据UI的标注图的屏幕宽高换算比例。

六.微信小程序的图片宽度和高度以及图片变形
微信小程序image图片标签中,如果在样式中只设置了图片的宽度,而没设置图片的高度,或者高度设为auto(自动)100%,都会导致图片不显示,必须指定图片的高度才能显示,但是图片设置固定宽高度容易拉伸变形。
解决办法:不过image标签封装了mode属性,可以根据需求自行设置(widthFix,aspectFill,scaleToFill,aspectFit)

七.小程序原生组件——cover-view组件
小程序原生组件cavans,map,vedio等,如果想要在原生组件上覆盖组件的话,添加view,text,button都是行不通的,必须使用cover-view和cover-image组件,具体用法,可以参考微信小程序官方文档。
但是cover-view的坑是真的不少,对css支持真的不太友好,虽然我们设置背景色,字体大小,宽高等都没什么问题,以下问题要注意
1.在web开发中,如果我们想要给文字设置删除线,那么使用text-decoration即可实现,cover-view不支持这个属性。
2.cover-view 中不支持flex布局 文字全居中得使用原始方式 : text-align: center; line-height: 100rpx; 3.不支持除了 cover-view cover-image 嵌套使用 4.style 色值得写全 如 background:#333 必须写成 background:#333333 5. cover-image src 不支持 .svg 文件显示等等~~

八.微信小程序不能操作DOM树
web开发中,可以使用getElementById()访问documnent中的某一个元素,就是通过id来获取元素,但是微信小程序没有windows对象,所以小程序不能直接操作dom树,小程序采用的都是mvvm的设计模式,数据双向绑定。类似于vue.js的写法。

九.上拉加载(onReachBottom)&下拉刷新(onPullDownFresh)
再在需要下拉刷新的页面加上onpulldownfresh函数即可触发注意,不管onpulldownfresh中有没有写过方法,都要加上wx.stopPullDownRefresh()终止下拉刷新,否则真机展示页面不会回弹!

十.使用地图注意事项
微信小程序集成地图功能非常简单,但是需要注意的是我们使用的是腾讯地图,也就是gcj02坐标系,如果后台使用的是其他坐标系,那么我们需要转换。如果需要实现导航功能,那么小程序内的map组件是没有这个能力的,我们需要调用wx.openLocation来实现,其实这个api是打开了微信内置的腾讯地图,这样,就是我们熟悉的微信导航服务了,可以在这里打开手机内的百度地图,高德地图,腾讯地图这些app来进行导航了。

十一.this.setData和直接赋值的区别
这两者都可以造成data里数据的改变,但是this.setData赋值才会造成wxml里面数据的改变,也就是同步更新渲染界面,而直接赋值只会让data里数据发生变化,但是界面并不会改变。

十二.微信小程序wx.navigateTo的5层限制 微信小程序中的页面导航API有3个:wx.navigateTo、wx.redirectTo、wx.navigateBack。 wx.navigateTo和wx.redirectTo打开新的页面,wx.navigateBack用于返回上一个页面(栈里的页面)。
微信小程序为了不让用户在使用小程序时造成困扰,规定页面路径只能是五层,请尽量避免多层级的交互方式。因此,官方在此处有一个限制(最多五级)。不过上述五层的限制只是针对navigateTo,redirectTo则无此限制。
解决办法: 页面栈可以通过getCurrentPages方法获取:getCurrentPages()函数用于获取当前页面栈的实例,以数组形式按栈的顺序给出,第一个元素为首页,最后一个元素为当前页面。 代码例子可以如下: 这样能够使得取得数据但不会增加栈中的元素个数,减少navigateTo的使用

//A界面

Page({
    data: {
        userName: ''
    },

    getBackData: function(name){
        this.setData({
             userName: name
         })
    }
})

//B页面
Page({
    edtinputname: function (e) {
        var name="张三";
        var pagelist = getCurrentPages();
            if(pagelist.length > 1){
                //获取上一个页面实例对象
                var prePage = pagelist[pagelist.length - 2];
                prePage.getBackData(name);

                wx.navigateBack({
                      delta: 1
                })
      }
})

以上就是我作为一个前端小白在开发微信小程序项目中遇到的一些坑和总结出来的一些经验,总结的不全面,也参考了一些大佬的文章,不喜勿喷,手下留情~~