吐槽小程序开发踩过的坑,以及一些解决方法

网络请求相关

bug: http状态码不管是什么,一律被解析成200

要真正解决,只能等官方去fix这个bug了.

发出请求需要注意的几个细节

1.header要设置正确:

get请求时为

header:{
“content-type”:’application/json’
},
post请求时为:

header:{
“content-type”:’application/x-www-form-urlencoded’
},
2.header不要写成head.(我之前就是这里写错了,还一直以为是微信的bug….)
3.content-type要小写.

4.参数的拼接

get请求时:
参数要自己变成xx=yyy&hhh=uuu的形式,并自己加问号,拼接在路径后面,然后设置给url.不能直接将参数设置给data.微信是不会自动给你装拼的.

post请求时:分两种情况,
如果服务器api需要的是xx=yyy&hhh=uuu形式(key-value)的参数,那么需要自己拼装成这样的一个字符串,然后设置给data
如果服务器需要的是一个json,那么要将携带参数的对象的value进行urlencode后,将整个json设置给data.
post的两种情况

参数的拼接:
参数的拼接代码.png

公测开放后,强制要求请求全部为https

配置服务器的页面,https是写死的,不可更改

如果用了这个列表以外的域名,直接就被开发工具拦截,请求无法发出去,提示请求不在域名列表中.

解决办法:服务器相关api升级ssl

可以用这个免费的:Let’s Encrypt

图片

没有设置初始图的api,也没有图片缓存,于是,网络不好时,情况是这样的:

没有设置图片加载失败后统一的处理,必须每个image标签都写处理方式

下面两张图片加载失败,于是一片空白.充分感受到api设计人员的业余.

view标签不识别’/n’换行符,text组件可以.但是text组件会不响应margin和padding值.

dialog(modal)的content无法解析换行符:

后来在真机上运行是可以识别js的换行符的,只是在开发工具中不行.

对话框样式太少,可修改的样式太少

看看手机端的常见对话框常用样式有哪些吧

DialogUtil

要弹出其他样式,自定义样式的,怎么办?自己写css吧.拿这个去改改:

.dialogcover {
position: fixed;
font-family: Arial, Helvetica, sans-serif;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.5);
z-index: 9999;}.dialogcover:target {opacity:1;pointer-events: auto;
}.dialogcontainer {width: 80%;position: fixed;margin-left: 5%;margin-right: 5%;margin-top: 40%;padding: 5px 20px 13px 20px;border-radius: 10px;background: #ffffff;z-index: 99999;opacity:1;
}

toast有成功和loading状态,竟然没有失败状态,are you OK?更奇葩的是,它的宽度居然是写死的,字一多就丑得要死

不管有没有,我们自己直接拿成功的toast包装好showFailToast()方法,,到处用着先.
最后如果官方真不提供,自己用css写一个!

点击事件被上层view消费,还会传递到下层

点击了去支付后,不仅会跳到支付页面,还会调用后面整个item的点击事件,跳到订单详情页

注: 评论区提出来了,这个是因为我用bindtap来响应事件时,事件还会一层层往下传,用catchtap就不会了.
事件分为冒泡事件和非冒泡事件：

冒泡事件：当一个组件上的事件被触发后，该事件会向父节点传递
非冒泡事件：当一个组件上的事件被触发后，该事件不会向父节点传递。
bind事件绑定不会阻止冒泡事件向上冒泡，catch事件绑定可以阻止冒泡事件向上冒泡。

navigateTo无法封装到另一个js方法中,只能直接写,而且失败还不走失败的回调

解决办法: 尽量用navigator标签吧.

block的item不能讲iteminfo整个obj传回来,只能传基本数据类型

拿到的是:

通过scrollview来实现上拉加载更多,一直没有触发加载更多的事件

使用竖向滚动时，需要给scroll-view一个固定高度，通过 WXSS 设置 height。
如果scroll-view高度设置为100%,则不能触发上拉刷新和下拉加载事件……

wxml模板不生效

import 写法有坑:

模板文件名与文件内部的模板名必须一致,否则不生效.这是个大坑,我的之前不显示就是因为pagestate.wxml文件里模板名写成了name=”pageState”
路径(../)代表退出当前文件夹,退两次就到了根目录,然后进入到template/pagestate.wxml这个路径不必写在wxml的最上方,任何地方都可以写,最好就写在用之前的一行.方便到处拷贝.
模板中数据多时,引用时数据应该封装成data中一个字段,用…bean来拆解,自动分发.尤其是一个页面中多次引用这同一个模板时,只需要用bean1,bean2来区分即可,不需要改模板中的字段.所以,不要在模板文件中直接写死.
例子:模板文件pagestate.wxml:

<view class ="empty_view" wx:if="{{!emptyHidden}}"   ><view class="center_wrapper" ><view class="center_child" ><icon type="info" size="45"/><view class="msg"> {{emptyMsg}}</view></view></view>
</view><view class ="error_view" wx:if="{{!errorHidden}}"  ><view class="center_wrapper"><view class="center_child" ><icon type="warn" size="45" /><view class="msg"> {{errorMsg}}</view><button  class = "retrybtn"  type="warn"  loading="{{btnLoading}}"disabled="{{btnDisabled}}" catchtap="onRetry" hover-class="other-button-hover"> 点击重试 </button></view></view>
</view>

例子:模板使用时的格式:

<import src="../../template/pagestate.wxml"/>
<view ><template is="pagestate" data="{{...netStateBean}}"/>
</view>

开发工具更新后

原先height:auto失效,必须指定image的高度为具体数值,不然高度为0.

tab切换

tab切换时,注意wxml里和js里要用同一类型的值来判断当前,比如wxml里用string,那js里就不能用int

Data里,tabIndex的值只能取字符串(用单引号或双引号),不能取int.

吐槽小程序开发踩过的坑,以及一些解决方法相关推荐

【浙政钉】微信-专有钉钉小程序-开发踩坑实记
文章目录 ⭐[浙政钉]微信-专有钉钉小程序-开发踩坑实记 ⭐ 创建项目 ⭐ 转化方案 ⭐ 政务钉钉调试 ⭐ 上传发布 ⭐[浙政钉]微信-专有钉钉小程序-开发踩坑实记最近有个需求,要将微信小程序转为浙 ...
java silk转mp3_微信小程序录音文件格式silk遇到的问题及解决方法
不好意思,误导大家了,这种将silk解密的方式只是在小程序测试的时候可以,上线以后这种方法是不行的,还是需要使用解密转码.参见:https://github.com/kn007/silk-v3-dec ...
微信小程序input组件边框不显示问题的解决方法
问题情景在微信小程序开发中经常用到input组件,但是如果按下面的wxml代码去写,input的边框是不会显示的,只有在鼠标点过去的时候才会有个光标 <view class="set ...
【微信小程序】fail url not in domain list 解决方法
1.uploadFile:fail url not in domain list 图片上传失败分析:正式上传之后,图片上传报错uploadFile:fail url not in domain li ...
微信小程序开发踩坑合集
微信搜索:凯小白学编程回复小程序领取1000套小程序源码本文分享一下开发小程序是遇到的一些问题.展示了曾经开发过的两个小程序中遇到的坑下一篇文章预告:<Maven入门> ...
微信小程序开发踩坑日记
2017.12.29 踩坑记录引用图片名称不要使用中文,尽量使用中文命名,IDE中图片显示无异样,手机上图片可能出现不显示的情况. 2018.1.5 踩坑记录微信小程序设置元素满屏,横向直接w ...
微信小程序开发踩坑经验——小蜗社群
2019独角兽企业重金招聘Python工程师标准>>> 之前遇到并且解决的坑,这边也渐渐忘记了,在这里就不列出来了-- 1.wx.redirectTo和wx.navigateTo ...
微信答题小程序开发遇到过的坑
我在开发答题小程序.考研题库小程序过程中,遇到过的坑以及其解决办法,在此做个笔记. 小程序页面栈最多十层问题:假设小程序内有20个问题页面,答完上一个问题后wx.navigateTo到下一个问题页面 ...
微信小程序开发中遇到的坑
博主也是一个新入坑的萌新,从上个月20多号开始开发微信小程序,总体感觉入手快,门槛低. 开发中使用的办法比较老土. 下面一一介绍下我在开发中遇到的问题与解决方法 1.下拉刷新与上拉加载下拉刷新微信提 ...

吐槽小程序开发踩过的坑,以及一些解决方法

吐槽小程序开发踩过的坑,以及一些解决方法相关推荐

最新文章

热门文章