"api工厂" 使用手册

api接口开箱即用,云后台管理,助力前端,解放后端开发;

不懂编程也能独立开发应用,小步快跑,快速创业!

旨为更懂你!

号码归属地查询Demo

前言


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


《创建 HelloWorld 项目》

《使用 “apifm-wxapi” 快速开发小程序》


功能说明


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


小程序实现


效果演示



wxml代码


 1<view class="page">
 2  <view class="page__bd">
 3    <view class="weui-cells__title">查归属地</view>
 4    <view class="weui-cells weui-cells_after-title">
 5      <view class="weui-cell ">
 6        <view class="weui-cell__bd">
 7          <input class="weui-input" placeholder="请输入手机号码" value="{{mobile}}" bindinput="mobileChange" />
 8        </view>
 9      </view>
10    </view>
11
12    <view wx:if="{{queryResult}}" class="weui-cells__title">查询结果</view>
13    <view wx:if="{{queryResult}}" class="weui-cells weui-cells_after-title">
14      <view wx:for="{{queryResult}}" wx:key="*this" wx:for-index="key" class="weui-cell">
15        <view class="weui-cell__bd">{{ key }}</view>
16        <view class="weui-cell__ft">{{ item }}</view>
17      </view>
18    </view>
19
20    <view class="weui-btn-area">
21      <button class="weui-btn" type="primary" bindtap="query">查询</button>
22    </view>
23  </view>
24</view>


js代码


 1const WXAPI = require('apifm-wxapi')
 2
 3Page({
 4  data: {
 5    mobile: undefined,
 6    queryResult: undefined,
 7  },
 8  onLoad: function (options) {
 9
10  },
11  onShow: function () {
12
13  },
14  mobileChange(e){
15    this.setData({
16      mobile: e.detail.value,
17      queryResult: null
18    })
19  },
20  query() { // 查询
21    if (!this.data.mobile){
22      wx.showToast({
23        title: '手机号码不能为空',
24        icon: 'none'
25      })
26      return
27    }
28    WXAPI.queryMobileLocation(this.data.mobile).then(res => {
29      console.log(res)
30      if (res.code == 0) {
31        wx.showToast({
32          title: '查询成功',
33          icon: 'success'
34        })
35        this.setData({
36          queryResult: res.data
37        })
38      } else {
39        wx.showToast({
40          title: res.msg,
41          icon: 'none'
42        })
43      }
44    })
45  }
46})


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


《apifm-wxapi使用说明》


本案例Demo代码下载:


《apifm-wxapi使用Demo程序》


期待你的进步!

感谢!