【小程序】写一个手机归属地查询的页面

今天写的效果
今天写一个手机归属地查询的小程序，其中使用的api是易元数据api接口 数据api接口详情

写页面

1. 我们首先需要写一个页面：页面内容包括输入框，按钮和一个数据显示页面
   1.1. 新建一个项目，然后创建相对应的文件夹和文件，并将标题名称navigationBarTitleText改为手机归属地查询
   1.2 在wxml页面添加输入框和按钮，并添加id和class属性，给按钮添加点击事件，在输入框添加文字改变监听事件bindinput

    <input class="express_input" id="express_input" type="text" placeholder="请输入手机号码" bindinput ="onInputTextChange"></input>
    <button class="express_send" type="primary" bindtap="onBtnSearch">点击查询</button>
   

1.3 然后在js文件中声明onBtnSearch（即按钮的点击事件）

    onBtnSearch: function () {｝

1.4 我们先看下api数据返回的json数据类型

json数据 Paste_Image.png

外面由错误码，错误信息等数据组成，而访问正常的时候resultcode会返回200，那么我们写页面的时候，需要写上两个状态，正常和不正常的状态！而一开始加载的时候是什么都没有的，需要隐藏，所以添加一个firstloading关键字来限制！而wx-if和wx-else在昨天已经写了使用方式。通过showresult来判断是否显示。

结果页面这样写：

    <view class="express_datainfo_success" wx:if="{{showResult}}" hidden="{{firstloading}}">
      <view class="express_datainfo_result">
        查询结果--->{{dataInfo}}
      </view>
    </view>

    <view class="express_datainfo_failure" wx:else="" hidden="{{firstloading}}">
      <view class="express_datainfo_error_code">
        错误代码--->{{dataInfo.error_code}}
      </view>
      <view class="express_datainfo_reason">
        错误原因--->{{dataInfo.reason}}
      </view>
    </view>

1.5 添加输入框文字改变的监听事件

    data: {
        dataInfo: '',//获取api数据结果
        showResult: false,//获取api数据成功失败
        firstloading: true,//是否首次进入
        phonenum: 0//手机号码
      }

    onInputTextChange: function (e) {
        console.log(e.detail.value)//获取输入框的数值
        this.setData({
          num: e.detail.value
        })
      },

1.6 发送请求
首先肯定是去看下微信的发送请求是怎样写的

Paste_Image.png

url是用户访问的api接口地址
data，host这些不说,直接上代码

    /**
       * 用户查询点击事件
       */
      onBtnSearch: function () {
        var that = this;
        var phonenum = this.data.num;
        console.log(phonenum)
        wx.request({
          url: 'http://apis.juhe.cn/mobile/get',
          data: {
            phone: phonenum,
            key: '3e60546142b6ff4467a8f9dadb9b'
          },
          header: {
            'content-type': 'application/json'
          },
          success: function (res) {
            console.log(res.data)
            var resData = res.data;
            var isSuccess = resData.resultcode == 200;
            var datainfo;
            if (isSuccess) {
              datainfo = JSON.stringify(resData.result);
            } else {
              datainfo = res.data;
            }

            that.setData({
              showResult: isSuccess,
              dataInfo: datainfo,
              firstloading: false
            })
          }
        })
      }

基本的逻辑其实就上面所写的，在这些基础上我们可以写很多东西！例如写一个查询快递的功能，查询星座信息的功能等等，都很轻松！那么问题来了，里面难点在哪里？其实这些这么基础的东西，是没有其它东西要注意的，如果说一定有东西要留心，那么就好好构思下写代码的逻辑流程吧！