尾号限行 API 实现微信小程序车辆尾号限行查询功能

不是海碗
• 阅读 324

引言

车辆尾号限行是一个交通出行政策,根据地方交通管理政策,在一周内的某一天,该尾号车辆不允许在规定路段行驶。这种政策不是针对特定道路和特定车辆,是在一定区域内对所有车辆都具有制约能力,而且会不定期调整。

本文将从介绍一下如何用微信小程序实现一个车辆尾号限行查询功能,希望对大家有启发。

实现尾号限行查询功能

尾号限行查询简介

使用所得到的尾号限行 API,我们可以实现一个简单的尾号限行查询应用。用户可以在输入框中输入城市编码信息,点击查询按钮后,应用会向 API 发送请求,获取包含尾号限行信息的响应,然后将尾号限行信息展示给用户。

示例代码

  1. 在微信小程序的页面文件中,创建一个输入框和一个按钮,用于用户输入城市编码信息和触发查询操作。
<!-- index.wxml -->
<view class="container">
  <input class="input" placeholder="请输入城市编码" bindinput="inputChange" />
  <button class="button" bindtap="query">查询</button>
  <view class="result">
    <text>{{result}}</text>
  </view>
</view>
  1. 在页面对应的 JavaScript 文件中,编写相关逻辑代码,包括输入框输入事件、查询按钮点击事件以及请求尾号限行 API 的功能。
// index.js
Page({
  data: {
    cityCode: '',
    result: ''
  },

  inputChange: function(e) {
    this.setData({
      cityCode: e.detail.value
    });
  },

  query: function() {
    var that = this;
    wx.request({
      url: "https://eolink.o.apispace.com/5345645/lives_geo/v001/xianxing",
      method: "GET",
      header: {
        "X-APISpace-Token": "APISpace 提供的 API 密钥",
        "Authorization-Type": "apikey"
      },
      data: {
        days: 1,
        areacode: this.data.cityCode
      },
      success: function(response) {
        that.setData({
          result: response.data
        });
      },
      fail: function(error) {
        console.log(error);
      }
    });
  }
});

注: API 密钥可在 APISpace 登录注册获取

  1. 在微信小程序的样式文件中,可以对页面元素进行样式定义。
/* index.wxss */
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 50px;
}

.input {
  width: 300px;
  height: 40px;
  margin-bottom: 20px;
  border: 1px solid #ccc;
  padding: 0 10px;
}

.button {
  width: 100px;
  height: 40px;
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 4px;
}

.result {
  margin-top: 20px;
}
  1. 在微信小程序的配置文件中,将相应页面路径进行配置。
// app.json
{
  "pages": [
    "pages/index/index"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "尾号限行查询",
    "navigationBarTextStyle": "black"
  },
  "tabBar": {
    "list": [],
    "color": "#333333",
    "selectedColor": "#007bff",
    "backgroundColor": "#ffffff",
    "borderStyle": "black"
  }
}

结语

在小程序运行时,用户输入城市编码后点击查询按钮,应用将向 API 发送请求,并将返回的尾号限行信息显示在页面中。根据需要,你可以对页面的样式进行调整,以满足你的需求。

点赞
收藏
评论区
推荐文章
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为
马丁路德 马丁路德
3年前
小程序静默登录与维护自定义登录态
1.背景在小程序中,openid是一个用户对于一个小程序/公众号的标识,开发者可以通过这个标识识别出用户,就如同你的身份证一样。2.什么是静默登录?在普通的应用中,用户通过表单验证登录建立用户体系,这种常见的登录方式一般是通过登录页面表单进行登录,对用户来说是有感的。在小程序中,由于是基于微信,可以通过微信官方提供的API能力,使我们能够无感知得获取
关于皕杰小程序打开公众号推文
关联公众号1.首先,登录微信公众号的后台,然后找到小程序,并点击小程序管理;其次,在小程序管理中,找到快速注册并认证小程序,点击以后用管理员身份验证一下。然后搜索想要关联的小程序,点击下一步,就关联成功了。2.小程序与公众号关联的时候,有
翼
3年前
前端使用低功耗蓝牙开发的坑2(分包操作之分包发送)
最近用uniapp开发微信小程序的一个项目中用到了低功耗蓝牙,但是其中收包,发包的时候不能超过20字节,所以就需要我们来进行分包操作了以下是对分包发送的一些处理,分包接收操作请看上篇文章说明:我项目中的数据结构中05是帧头,FE是帧尾image.png(https://imghelloworld.osscnbeijing.
梦
3年前
服务号跳转微信小程序的坑
服务号跳转微信小程序一直报错{"errcode":40165,"errmsg":"invalidweapppagepathhint:8yDcBa01023942"}
不是海碗 不是海碗
1年前
借助尾号限行 API 实现限行规则应用的设计思路分析
尾号限行API是一种提供已知所有执行限行政策的城市(如中国大陆等地)未来一段时间内机动车尾号限行数据查询的接口
Easter79 Easter79
3年前
Taro小程序自定义顶部导航栏
微信自带的顶部导航栏是无法支持自定义icon和增加元素的,在开发小程序的时候自带的根本满足不了需求,分享一个封装好的组件,支持自定义icon、扩展dom,适配安卓、ios、h5,全面屏。我用的是京东的Taro多端编译框架写的小程序,原生的也可以适用,用到的微信/taro的api做调整就行,实现效果如下。!在这里插入图片描述(https://i
IMU如何提升自动驾驶定位精度及操作安全性
IMU帮助自动驾驶车辆在没有GNSS信号或失真的情况下导航,例如在隧道和城市峡谷中。自动驾驶汽车的未来基于几项重要传感技术的进展,将实现高安全率和精确定位能力。惯性测量单元()技术的进步可以提高自主车辆的定位精度和运行安全性。自动驾驶汽车的成功所需的最重要
不是海碗 不是海碗
1年前
清明节快到了,车辆尾号限行规则提前看!一文带你了解全国各地的尾号限行规则
清明节快到了,车辆尾号限行规则提前看!一文带你了解全国各地的尾号限行规则
四儿 四儿
1年前
点云标注中的隐私保护和数据安全问题
点云标注过程中涉及到大量的敏感数据和隐私信息,如车辆位置、道路环境等。因此,在点云标注中确保隐私保护和数据安全是非常重要的。首先,隐私保护需要注重数据匿名化和加密技术。通过对点云数据进行匿名处理,如去除位置信息、对数据进行加密等,可以保护车辆和个人的隐私信