仿网易严选小程序

项目截图

前言

学习了几天小程序，这是自己动手做的第一个微信小程序，希望通过这个项目，给学习的小程序的你提供一点帮助。本着学习和分享的目的，来分析小程序中的各个功能，希望能给学习小程序的你带来一点帮助

开发前准备

• VScode代码编辑器。
• 微信开发者工具
• 数据（我的都是自己写的假数据）
• (阿里巴巴矢量图标库)提供一些图标icon
• github完整代码

<view class="newaddress" style="opacity:{{opacity}}">
    <view><input type="text" value="{{myaddress.bindAddress}}" placeholder="省份、城市、区县" disabled="true" bind:tap="hiddenAddress" style="color:{{color}}"/></view>
    <view><input type="text" placeholder="详细地址，如街道、楼牌号等" bindinput="kk"/></view>
    <view><input type="text" placeholder="姓名"  value="{{Pname}}" bindinput="myinput2"/></view>
    <view><input type="text" placeholder="手机号码" value="{{phonenumber}}" bindinput="myinput3"/></view>
  </view>
  <button style="width:90%;border-radius: 50px;" bind:tap="buttonListener">保存</button>

• 这里是新建地址界面的基本布局，包括了省份，详细地址，姓名和手机号码

  <!-- 固定的3/4屏，来获取地址 -->
  <view class="fixedAddress" style="display:{{hiddenMyAddress}}">
    <view class="fixedAddress-title">
      <text>配送至</text>
      <text style="display:inline-block;margin-left:20rpx;">{{addressInformation}}</text>
      <text style="display:inline-block;float:right;padding-right:20rpx;color:{{mychangeColor}}" bind:tap="saveAddress" bind:tap="hiddenAddress">
        确定
      </text>
    </view>
    <view class="fixedAddress-city">
      <scroll-view scroll-y="{{true}}" style="height: 65vh;">
        <!-- 城市 -->
        <view data-index="{{index}}" bind:tap="choseCity" wx:for="{{city}}" wx:key="index" style="display:{{showCity}}">
          <text>{{item.city}}</text>
        </view>
        <view data-index="{{index}}" bind:tap="choseBlock" wx:for="{{blockList}}" data-classify="{{item}}" wx:key="index" style="display:{{showBlock}};color:{{index===myBlockColor?'red':'black'}}">
          <text>{{item}}</text>
        </view>
      </scroll-view>
    </view>
  </view>

• 这里则是点击省份后弹出的半屏，可以选择你的省份和区

  // 页面透明度
 pageopacity(){
   let temp = 0
   let opacity = this.data.opacity
   if(opacity==1){
     temp = 0.5
   }else{
     temp = 1
   }
   this.setData({
     opacity:temp
   })
 },

• 这里是显示城市背景变半透明部分的js实现

  // 按钮携带数据跳转页面
 buttonListener:function(){
   let that = this
   let ADDRESS =  wx.getStorageSync("ADDRESS", ADDRESS)
   console.log(ADDRESS);
   // console.log(that.data.Pname);
   ADDRESS.push(this.data.myaddress)
   that.setData({
     ADDRESS
   })
   wx.setStorageSync("ADDRESS", ADDRESS)

   wx.navigateTo({
     url:'/pages/address/address'
   })
 },

• 点击按钮跳转页面，将本页面的数据传递给另一个页面来使用。这里只是一小部分功能的演示，完整代码请查看我的GitHub