小程序实例之身份证查询器

话不多说，先附上效果图：

源码

• index.wxml

<!--index.wxml-->
<view class="box">
  <view class="content">
    <view class="location">
      <text>发 证 地:</text>
      <text>{{location}}</text>
    </view>
    <view  class="sex">
      <view class="v_sex_name">
        <text style="letter-spacing: 2em;">性</text><text>别:</text>
      </view>
      <view classs="v_sex_val">
        <text>{{sex}}</text>
      </view>
    </view>

    <view  class="postalCode">
      <view class="v_postalCode_name">
        <text>邮政编码:</text>
      </view>
      <view classs="v_postalCode_val">
        <text>{{postalCode}}</text>
      </view>
    </view>

    <view class="birthday">
      <text>出生日期:</text>
      <text>{{birthday}}</text>
    </view>
  </view>
  <view class="form">
    <form bindsubmit="formSubmit" bindreset="formReset">
      <view class="input">
        <view>
          <text>身份证：</text>
        </view>
        <view >
          <input name="idcard" type="idcard" />
        </view>
      </view>
      <button form-type="submit" class="btn_submit" type="primary">提交</button>
    </form>
  </view>
</view>

• index.wxss

/**index.wxss**/
.box{
  position: relative;
  width: 100%;
}
.content{
  width: 80%;
  height: 400rpx;
  background:silver;
  padding: 20px;
  margin-left: 30rpx;
  border-radius: 10px 10px;
  background-image: url("../images/idcard.png") ;
  background-size: 800rpx 600rpx;
}
.location{
  margin-top: 40rpx;
  font-weight:bold;
}
.postalCode{
  font-weight:bold;
  margin-top: 40rpx;
  display: flex;
  justify-content:flex-start;
}
 /*文字两端对齐*/
.sex{
  font-weight:bold;
  margin-top: 40rpx;
  display: flex;
  justify-content:flex-start;
}
.birthday{
  font-weight:bold;
  margin-top: 40rpx;
}
.btn_submit{
  width: 450rpx;
  height: 100rpx;
}

.input{
  width: 90%;
  height: 60rpx;
  margin-top: 20rpx;
  margin-left: 30rpx;
  margin-bottom: 30rpx;
  padding-left: 10rpx;
  padding-top: 20rpx;
  border-top:1px solid black;
  border-bottom:1px solid black;
  display: flex;
  justify-content:flex-start;
}

• index.js

//index.js
//获取应用实例
var app = getApp()
Page({
  data: {
    location:"",
    sex:"",
    birthday:"",
    postalCode:""
  },
  formSubmit: function(e) {
    var that = this;
    var url = e.detail.value.idcard;

    wx.request({
    url: 'http://api.k780.com:88/?app=idcard.get&idcard='+url+'&appkey=10003&sign=b59bc3ef6191eb9f747dd4e83c99f2a4&format=json', //仅为示例，并非真实的接口地址
    data: {
    },
    header: {
        'content-type': 'application/json'
    },
    success: function(res) {
      console.log(res.data);
      var idcardData = {
                "location":res.data.result.att,
                "sex":res.data.result.sex,
                "birthday":res.data.result.born,
                "postalCode":res.data.result.postno
              };
      that.setData(idcardData);
    }
  })
  },
  onLoad: function () {
  }
})

实例源码

• [百度云]小程序实例之身份证查询器
• [Coding]小程序实例之身份证查询器