微信小程序实战--开发一个简单的快递单号查询
功能如图:
虽然工作中只负责小程序后台开发,但是还是小程序开发产生了浓厚的兴趣,官方文档也是超级详细了
这里就简单做一个快递单号的查询:
新建一个page:
接着就可以写wxml了.这里用一个简单的input和一个滚动视图:
<!--pages/express/express.wxml-->
<view class='title'><text>快递查询</text>
</view>
<!-- 输入框 -->
<view><input class='input' bindconfirm='query' placeholder="请输入快递单号" type='text' confirm-type="search"/>
</view><!-- 信息展示,滚动视图显示,不滑动页面 -->
<scroll-view style='margin-top:50px' scroll-ystyle="height: 400px;"><view wx:for="{{expressInfo}}"><view class='item'><view><text>【{{item.time}}】:</text></view><view style='margin-left:50px'><text> {{item.context}}</text></view></view></view></scroll-view>
然后是js逻辑部分,这部分应该算是重点了,其中有个很基础的坑,就是this的问题
本着数据页面分离的开发思想,涉及到数据都写在js里面,和vue一模一样了,需要注意一下js的运用就可以了:
data: {//查询接口queryUrl:"http://www.kuaidi100.com/query?type=zhongtong&temp=0.9021720216142217&postid=",postid:null, //输入的快递单号expressInfo:[]},
//快递查询 // event.detail={value:输入的值}query: function(event){console.log("开始查询");console.log("获取input输入值:"+event.detail.value);this.setData({ //赋值输入的快递单号postid: event.detail.value})//发送请求var that = this;//赋值this,解决数据赋值问题wx.request({url: this.data.queryUrl + this.data.postid, data: {},method: "GET",header: {'content-type': 'application/json' // 默认值},success(res) {console.log(res.data)//此处this指wx.request,不能使用thisthat.setData({expressInfo: res.data.data})}})
这里需要注意下的是,如果使用的API是http的,在项目详情里面需要设置不检验证书,开头选择项目的时候
不然API会不通过,我这里使用的是快递100的API,直接F12接口拿来测试一下可用就行了:
然后就是app.json里面page配置成第一个一进去小程序就可以使用了:
最后注意一点的是,转移符的使用,这里如果不处理,有些符号,比如\,是会报错的,使用正则限制一下
或者处理一下就可以了!最后贴一下css吧,个人感觉就是多使用view标签,其实就是div,可以很方便
实现自己想要的布局了:
.title{text-align: center;width:100%;margin-top: 10px;
}
.input{margin-left: 35px;margin-top: 20px;border-radius:4px;border:1px solid #c8cccf;width: 80%;height: 35px;vertical-align:middle;
}
.item{width: 85%;margin-top: 25px;margin-left: 25px;
}
转载于:https://www.cnblogs.com/houzheng/p/10136245.html
微信小程序实战--开发一个简单的快递单号查询相关推荐
- 微信小程序篇】四. 案例:根据单号查询快递编号
快递查询(2020-1-7亲测) 项目准备 创建项目demo4-expressQuery(因为练习取过这个名所以案例里面是demo-expressQuery ) 操作步骤同demo3 不过second ...
- axure 小程序 网盘_万门大学微信小程序实战开发特训班【完结】网盘高清全套最新系列精品课程...
万门大学微信小程序实战开发特训班[完结]网盘高清全套最新系列精品课程 课 程 简介 我买了这个课程,课程很有价值,我们通过链接或百度网盘群的形式在共享资料库中与您共享,需要万门大学微信小程序实战开发特 ...
- 微信小程序实战开发视频
微信小程序实战开发视频: 链接:http://pan.baidu.com/s/1jIAwBLs 密码:ej3b
- 微信小程序云开发增删改查、按条件查询、排序方法实例详解。
前言 身为一个后端程序员却一直对微信小程序云开发很感兴趣,自己也用云开发写了三个开源项目了,主要是不需要配置服务器,减少服务器的花费,钱省下来用来买猪肘子啃不香嘛,不过云开发的数据库是nosql类型, ...
- 如何在微信小程序上开发一个「蚂蚁森林」和「蚂蚁庄园」结合体?
你在蚂蚁森林中种了几棵树? 你在蚂蚁庄园中捐赠了几颗蛋? 「蚂蚁森林」和「蚂蚁庄园」是支付宝分别在 2016 年 8 月和 2017 年 8 月上线的两个网上公益活动,通过游戏互动和激励来培养用户的低 ...
- 微信小程序实战开发要点-立哥技术
-剑气纵横三万里,一剑光寒九百州 前言:小程序开发有自己独特的技术规范和开发要点,但是也不是完全和MVVM前后端开发模式完全不同,仅仅看官方文档并不能解决很多实际中的问题与难点.笔者就结合实际开发经验 ...
- 【微信小程序 | 实战开发】实现ES6转ES5开关
个人名片:
- 【微信小程序 | 实战开发】配置开发环境、生产环境和API
个人名片:
- 【微信小程序 | 实战开发】常用小程序框架介绍
个人名片:
最新文章
- python内置库之学习ctypes库(二)
- Ant编译编译APK、打包打包JS
- 《大话数据结构》第9章 排序 9.2 排序的基本概念与分类
- linux deepin/debian/ubuntu apt查看软件版本 apt安装指定版本的包
- 通过OmniFaces缓存组件以编程方式缓存PrimeFaces图表
- python调用linux命令输出结果,Python-运行shell命令并捕获输出
- Tomcat 比 nio 、aio性能更好的apr介绍
- python做神经网络有什么框架_神经网络与深度学习——基于TensorFlow框架和Python技术实现...
- 前端emojs_Emoji-Chat emoji表情包发送及显示兼容web端、移动端
- android单元测试android环境,基于Robolectric的Android单元测试 —环境搭建与部署运行...
- 安装CLOVER引导器到硬盘EFI分区
- php升序排列,php 基础问题表单里面怎么升序和降序?
- gradient设置上下渐变_CSS3 经典教程系列:CSS3 线性渐变(linear-gradient)
- linux内核源码系统调用有多少个,Linux内核源码目录介绍
- java基础:面向对象编程23-this课后练习boygirl
- 让 ChatGPT 如虎添翼 2.0
- 应用程序如何使用驱动程序
- [渝粤教育] 信阳师范学院 视听语言 参考 资料
- 最早成立的计算机学校,中国最早的四大工学院
- 算法高级(20)-集群容错算法