前言

本教程是基于 “apifm-wxapi” 模块，教你快速实现小程序开发，所以你可能需要先了解以下知识点：

《创建 HelloWorld 项目》
《使用 “apifm-wxapi” 快速开发小程序》

功能说明

输入任意手机号码，查询该手机号码归属地

小程序实现

效果演示

wxml代码

<view class="page">
  <view class="page__bd">
    <view class="weui-cells__title">查归属地</view>
    <view class="weui-cells weui-cells_after-title">
      <view class="weui-cell ">
        <view class="weui-cell__bd">
          <input class="weui-input" placeholder="请输入手机号码" value="{{mobile}}" bindinput="mobileChange" />
        </view>
      </view>
    </view>
    <view wx:if="{{queryResult}}" class="weui-cells__title">查询结果</view>
    <view wx:if="{{queryResult}}" class="weui-cells weui-cells_after-title">
      <view wx:for="{{queryResult}}" wx:key="*this" wx:for-index="key" class="weui-cell">
        <view class="weui-cell__bd">{{ key }}</view>
        <view class="weui-cell__ft">{{ item }}</view>
      </view>
    </view>
    <view class="weui-btn-area">
      <button class="weui-btn" type="primary" bindtap="query">查询</button>
    </view>
  </view>
</view>

js代码

const WXAPI = require('apifm-wxapi')
Page({
  data: {
    mobile: undefined,
    queryResult: undefined,
  },
  onLoad: function (options) {
  },
  onShow: function () {
  },
  mobileChange(e){
    this.setData({
      mobile: e.detail.value,
      queryResult: null
    })
  },
  query() { // 查询
    if (!this.data.mobile){
      wx.showToast({
        title: '手机号码不能为空',
        icon: 'none'
      })
      return
    }
    WXAPI.queryMobileLocation(this.data.mobile).then(res => {
      console.log(res)
      if (res.code == 0) {
        wx.showToast({
          title: '查询成功',
          icon: 'success'
        })
        this.setData({
          queryResult: res.data
        })
      } else {
        wx.showToast({
          title: res.msg,
          icon: 'none'
        })
      }
    })
  }
})

关于 apifm-wxapi 更多的使用方法：

《apifm-wxapi使用说明》

本案例Demo代码下载：

《apifm-wxapi使用Demo程序》

期待你的进步！
感谢！

若有收获，就点个赞吧

0 人点赞