微信小程序如何实现（收货地址静态界面）

扫一扫以上小程序【许愿灯池】可以查看具体收货地址静态界面

效果图：

核心：直接上代码！！

index.wxml

<view class="container">
<view class="person">
  <text>收货人：</text>
  <input type="text" placeholder="收货人姓名" bindinput="getperson" bindinput="getname" value="{{address.name}}"/>
</view>

<view class="gender">
    <radio checked="{{man}}" bindtap="man">先生</radio>
    <radio checked="{{woman}}" bindtap="woman">女士</radio>
</view>

<view class="phonenumber">
  <text>手机号码：</text>
  <input type="text" placeholder="收件人电话" bindinput="getphonenumber" value="{{address.num}}"/>
</view>

<view class="address">
  <text>收货地址：</text>
  <input type="text" placeholder="您所在的地理位置" bindinput="address" bindinput="getaddress" value="{{address.addressdetail}}"/>
</view>
</view>

<button bindtap="baocun" class="baocun">保存地址</button>
<button bindtap="shanchu" class="shanchu">删除地址</button>

index.wxss

view{
  display: flex;
}
.container{
  padding-bottom:10% ;
}
view{
  position: relative;
  left: -4%;
  margin-top: 55rpx;
}
.person{
  line-height: 37rpx;
}
.person text{
  position: relative;
  left: -4%;
    font-size: 38rpx;
    font-weight:600;
}
.phonenumber{
  line-height: 37rpx;
}
.phonenumber text{
  font-size: 38rpx;
  font-weight:600;
}
.address{
  line-height: 37rpx;
}
.address text{
  font-size: 38rpx;
    font-weight:600;
}

.baocun{
  border-radius: 20px 20px 20px 20px;
  background-color: black;
  color: white;  
}
.shanchu{
  position: relative;
  border-radius: 20px 20px 20px 20px;
  background-color: black;
  color: white;
  margin-top: 20rpx;
}   

总结：通过以上代码可以搭建出和【许愿灯池】一样具有收货地址界面的小程序，如果想知道具体的效果，可以微信搜一搜【许愿灯池】或是二维码扫描：