話不多說，先附上效果圖：

源碼

• 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]小程序實例之身份證查詢器