微信小程序 实现功能

2021/7/2 微信小程序

# 学习日志

今天上午我们实现了微信小程序的扫描二维码以及读取快递单号的功能,下午我们实现了将输入结果显示在页面的功能。

# 扫描功能

扫描功能通过对图片设置点击事件,来出发扫描二维码的功能,并将扫描到的结果绑定到快递单号。 在开发过程中,遇到了一个问题就是扫描的图片点击不了,通过老师的解答,我明白了要将扫一扫的父级的view设置为相对布局,再将扫一扫的图片设置为绝对布局,同时调整 z-index 属性来将扫一扫的图片置于父级view的上方。

# 输入框和表单

今天还学习了输入框以及表单的功能: 输入框中的属性:

  • id 输入框的id
  • name 输入框的name
  • placeholder 输入框占位符
  • value 输入框显示的值
  • 表单可以通过绑定提交按钮来转递输入框的值,通过submit属性来提交值

# 实现功能

我们通过老师的教学,一步一步的实现查询快递的功能

  • 1.获取单号和公司名
  • 2.验证数据有效性,是否为空,不合格不提交服务器
  • 3.数据合格提交数据
  • 4.判断数据返回情况
  • 5.正常返回就把结果通过for循环绑定到页面上去

# 优化处理

让我印象最深刻的是老师给我们提出了一个叫代码下行的情况,在以及是错误的情况下,还在继续往下执行。所以添加return来解决这种错误。

  if(myscode==0){
    wx.showModal({
      title:'温馨提示',
      content:'请选择快递公司!',
      cancelColor: 'cancelColor',
    })
    return;
  }
1
2
3
4
5
6
7
8

同时我们也对成功和输入有误或者返回有误的情况进行了用户体验优化,通过showToast以及showModal来进行提示。

# json

老师让我们自己模拟编写一个json格式的代码来体会json的格式,我发现了json是可以在一个数组中同时存在多个集合,也通过json,来编写了一个城市天气的json串。

# 随堂作业

老师让我们制作微信启动页,将启动页放在第一页,使用wx.navigateTo来进行跳转,同时进行延迟跳转处理,就可以实现启动页。

# 收获心得

通过第三天的学习,在上午,我了解了绝对布局的层叠位置,还有输入框和表单的提交功能。在下午,我们一步一步基本实现了查快递的功能。学到了要对异常进行处理,要提升用户体验,对失败和成功的情况都进行提示。同时,学到了如何进行微信启动页的制作。

Last Updated: 2021/12/19上午12:27:30