微信小程序学习之路（一）项目的首页设计与实现

开篇语

本以为自己并不会接触到小程序的项目，结果意外接到一个小程序项目。在此之前，大概看了两天小程序开发文档，以及vue.js的文档，觉得不是很喜欢，所以对其了解不够，并天真的以为自己并不会接触到相关内容。

毕竟是个小菜鸡，目光短浅，在所难免。

而此次项目经历，因为一个人要完成从前端到后端的所有任务，让我觉得，不仅是时间，还有能力，以及对相关技能的把握也有了全新的认识。

另外，度娘真是很好，自己无法解决的问题，除了看文档，问大神以外，真是个不错的选择。

废话少说，正文开始。

正文

项目大致是一个从第三方平台获取相关信息，然后上传相关资料，上传后将信息存入自己服务器数据库，且数据库根据地域划分建设七个子数据库。

先看界面

页面默认选中按钮1，根据切换按钮来显示不同输入框，并且改变相应的样式，最终点击验证进行用户验证

废话不多说，看主要代码

   <view class="switch-type">
      <view class="userinfo" style="margin-right:25px">
        <button class="btn  {{currentSelectTripType == 'insured' ? 'active' : ''}}" data-id='insured' bindtap='Insured'>
          <view class="btninfo">按钮1</view>
        </button>
      </view>
      <view class="userinfo">
        <button class="btn {{currentSelectTripType == 'reporter' ? 'active' : ''}}" data-id='reporter' bindtap='Reporter'>
          <view class="btninfo">按钮2</view>
        </button>
      </view>
    </view>

按钮的切换依靠currentSelectTripType 的值来控制，，按钮也需要自身的id,否则没法控制。

data: {
   currentSelectTripType: 'insured',
  },

当currentSelectTripType的值设置为insured，代表默认按钮1，当然样式也会控制，依靠class中{{currentSelectTripType == 'insured' ? 'active' : ''}}判断currentSelectTripType是否为insured，加上类active

在初始化的时候，按钮都是统一的样式

/*初始样式*/
 .btn{
     height: 40px;
  width: 140px;
  border: 1.5px solid white;
  background-color:#989bc5; 
  }
/*点击后样式*/
.btn.active {
  background-color: #2a35e4;  
}

切换按钮后，如下图所示：

至于切换按钮后，对应的输入框设置思路：刚开始的时候，使用四个输入框，一个按钮分别控制两个输入框，并使用hiddenName去控制显示隐藏，后来经过一个小demo,解决了这个复杂又费劲的写法,那就是直接写两个输入框，placeholder的值为动态的，这样就可以完美解决上述说的麻烦以及麻烦。

<view>
      <view class="section">
        <input  placeholder="{{line1}}" maxlength="11" bindinput="getInputf" value="{{vals1}}" />
      </view>
      <view class="section">
        <input placeholder="{{line2}}" maxlength="11" bindinput="getInputs" value="{{vals2}}" />
      </view>
    </view>
    <view>

 data: {
    line1: '请输入姓名',
    line2: '请输入身份证号',
    vals1: '',
    vals2: ''，
    typecode1:'',
    typecode2: '',
  },

这里的

typecode1:'',

typecode2: '',，是为了给两个按钮做标志区分开，其实想了想，因为已经设置了id,可以根据获取的id，来判断点击的是哪个按钮。

这样就会看到图一的效果。

切换按钮控制输入框的placeholder的值，代码如下

 Insured: function(e) {
    this.setData({
      currentSelectTripType: e.currentTarget.dataset.id,
      line1: '请输入姓名',
      line2: '请输入身份证号'，
      typecode1:1,
      
    });
    this.Clear();
  },
  Reporter: function(e) {
    //控制显示
    this.setData({
      line1: '请输入手机号',
      line2: '请输入身份证号码后四位',
      currentSelectTripType: e.currentTarget.dataset.id，
      typecode2:2,
    });
    app.globalData.currentSelectTripTypes = e.currentTarget.dataset.id;
    this.Clear();
  },
  Clear: function() {
    this.setData({
      vals1: '',
      vals2: ''
    })
  }

为什么要在Insured里还要给line1，line2设置值，是因为，切换两个按钮，会发现，第一次没什么问题，最后会发现，第一个按钮输入框显示的还是第二个输入框的placeholder的值，可以自己试试看。

因为按钮来回切换，所以输入框的值也需要完全清空，清空输入框的值，也就是赋值为空即可。

接下来说验证按钮

  <button class='submit' bindtap='goMyClaimPage' formType="submit">
        验 证
  </button>

如果不考虑按钮别的功能，其实质就是一个跳转页面的功能按钮】

  wx.navigateTo({

            url: '../new/new'
          })

然而，此处，按钮需要经过比对当前按钮下输入框的内容经过验证后，才可以实现跳转

//分别获取输入框的值，
getInputf: function(e) {
    this.setData({
      vals1: e.detail.value
    });
  }, 
  getInputs: function(e) {
    this.setData({
      vals2: e.detail.value,
    })
  },

 goMyClaimPage: function(e) {
//分别定义输入框值的变量，并赋值
    var name;
    var idcard;
    var number;
    var fournumber;
    var typecode;
//根据按钮的id判断选择的按钮是哪个
    if (app.globalData.currentSelectTripTypes == 'insured') {

      name = this.data.vals1;
      idcard = this.data.vals2;
      typecode = this.data.typecode1;
      console.log(typecode);
      if (name == '' && idcard == '') {
        wx.showModal({
          title: '提示',
          content: '请输入姓名及身份证号',

        })
      } else if (name != '' && idcard == '') {
        wx.showModal({
          title: '提示',
          content: '请输入身份证号',

        })
      } else if (name == '' && idcard != '') {
        wx.showModal({
          title: '提示',
          content: '请输入姓名',

        })
      } else {
//模拟验证数据的一致性
        var t1 = '1';
        var t2 = '1'
        if (name == t1 && idcard == t2) {
          wx.navigateTo({

            url: '../new/new'
          })
        } else {
          wx.showModal({
            title: '提示',
            content: '用户不存在',

          });
          this.Clear();
        }


      }

    } else {
      number = this.data.vals1;
      fournumber = this.data.vals2;
      typecode = this.data.typecode2;
      console.log(typecode);
      if (number == '' && fournumber == '') {
        wx.showModal({
          title: '提示',
          content: '请输入手机号及身份证号码后四位',

        })
      } else if (number != '' && fournumber == '') {
        wx.showModal({
          title: '提示',
          content: '请输入身份证号码后四位',

        })
      } else if (number == '' && fournumber != '') {
        wx.showModal({
          title: '提示',
          content: '请输入手机号',

        })
      } else if (number != '' && fournumber != '' && number.lenth < 11) {
        wx.showModal({
          title: '提示',
          content: '请输入11位手机号',

        });

      } else {
        var t1 = '1';
        var t2 = '1'
        if (number == t1 && fournumber == t2) {

          wx.navigateTo({

            url: '../new/new'
          })
        } else {
        
          wx.showModal({
            title: '提示',
            content: '用户不存在',

          });
          this.Clear();


        }

      }
    }

  },

这样，首页的功能已经基本完成了，此外，附加了分享页面的功能

  //转发
  onShareAppMessage: function (res) {
    let users = wx.getStorageSync('user');
    if (res.from === 'button') { }
    return {
      title: '转发',
      path: '/pages/index/index',
      success: function (res) { }
    }
  }

代码可以直接放上去，也可以根据需要修改，这样就可以分享了

最后关于页面最底部的文字设置：

  <view class="usermotto">
      <text class="user-motto">{{motto}}</text>
    </view>
.usermotto {
  position: fixed;
  text-align: center;
  bottom: 30rpx;
  font-size: 12px;
}
data: {
    motto: '文字文字文字'
      }

这样文字，就可以居中且沉底