欢迎光临,了解微信小程序开发,就上易用通!

新手常见问题集锦《五》

发布:2018-04-12 10:57浏览: 来源:网络 作者:cola

作者:沃普,来自公众号:宏记;二维码为:新手常见问题集锦《五》(图1)

一:客户端发起调用接口请求wx.request之get/post

get 一般是默认方式,post得进行设置 两者不同其中一个表现为传参不同

如前端发起调用接口请求,后台接口不到,从以下几个方面进行检查:

1.首先确认前端调用方式是get还是post,后台接口相应响应的接口也要对应get或post

2.其次参数是否对应得上,前端封装的参数格式是否符合后台接口接收参数的定义(如下方的参数是否加“data:{}”层)

3.一种调用接口是否通的方式:把后台接口定义为get方式,并在接口函数设置断点,后直接把前端请求的URL复制到浏览器的地址栏中进行访问,即可进行断点调试

(特别要注意变为get方式,浏览器是不支持post方式的)

如 前端调用:

封装函数:

新手常见问题集锦《五》(图2)

传参调用:

新手常见问题集锦《五》(图3)

新手常见问题集锦《五》(图4)

后台接口:

新手常见问题集锦《五》(图5)

后台参数格式:

新手常见问题集锦《五》(图6)

新手常见问题集锦《五》(图7)

新手常见问题集锦《五》(图8)

重度封装:

新手常见问题集锦《五》(图9)

新手常见问题集锦《五》(图10)

 

二:事件触发顺序

事件分类

新手常见问题集锦《五》(图11)

touchstart 手指触摸

touchmove 手指触摸后移动

touchcancel 手指触摸动作被打断,如弹窗和来电提醒

touchend 手指触摸动作结束

tap 手指触摸后离开

longtap 手指触摸后后,超过350ms离开

1.单击

单击事件由touchstart、touchend组成,touchend后触发tap事件。

2.双击

双击事件由两个单击事件组成,两次间隔时间小于300ms认为是双击;微信官方文档没有双击事件,需要开发者自己定义处理。

新手常见问题集锦《五》(图12)

3.长按

长按事件手指触摸后,超过350ms再离开。

新手常见问题集锦《五》(图13)

4.滑动

新手常见问题集锦《五》(图14)

手指触摸屏幕并移动,为了简化起见,下面以水平滑动和垂直滑动为例。 滑动事件由touchstart、touchmove、touchend组成

以屏幕左上角为原点建立直角坐标系。第四象限为手机屏幕,Y轴越往下坐标值越大(注意跟数学象限的区别)。

假设A点为touchstart事件触摸点,坐标为A(ax,ay),然后手指向上滑动到点B(bx,by),就满足条件by < ay;

同理,向右滑动到C(cx,cy),满足cx > ax;向下滑动到D(dx,dy),满足dy > ay;向左移动到E(ex,ey)满足ex < ax.

计算线段AB在Y轴上投影长度为m,在X轴上的投影长度为n

计算r = m/n,如果r > 1,视为向上滑动。

同理计算线段AC,AD,AE在Y轴投影长度与X轴的投影长度之比,得出向右向下向左的滑动。

新手常见问题集锦《五》(图15)

新手常见问题集锦《五》(图16)

 

三:数据驱动

小程序最特殊的一个特点就是数据驱动,即可用后台定义的数据,在页面依据此数据作判断加载处理

要学会灵活使用,此方式可以从根据上解决很多问题,有区别于其传统模式的做法,

 

主流有两种处理方式

1.三元表达式 ?: (条件)?true:false 如 a>1? '审核' : '未审核 '

根据属性值不同加载不同样式

根据属性值不同加载不同图标

2.条件渲染 wx:if

用 wx:if="{{condition}}" 来判断是否需要渲染该代码块

 

  1. <view wx:if="{{condition}}"> True </view>

也可以用 wx:elif 和 wx:else 来添加一个 else 块:

 

  1. <view wx:if="{{length > 5}}"> 1 </view>
  2.  
  3. <view wx:elif="{{length > 2}}"> 2 </view>
  4.  
  5. <view wx:else> 3 </view>
 

 

新手常见问题集锦《五》(图17)






免责声明:本站所有文章和图片均来自用户分享和网络收集,文章和图片版权归原作者及原出处所有,仅供学习与参考,请勿用于商业用途,如果损害了您的权利,请联系网站客服处理。