》》》遇到的坑

（3）註冊頁面的實現
需求：使用者點選註冊按鈕，進入註冊頁面，輸入註冊資訊，完成註冊動作。
動畫演示：

程式碼實現：

register.wxml

<!--註冊第一步-->
<view wx:if="{{step == 1}}" class="container">
  <view class="field">
    <input name="cellphone" bindinput="input_acceptVal" placeholder-class="placeholder" placeholder="輸入手機號/E-mail"
 
 />
  </view>
  <view class="field second_input inputCode">
    <input class='identifyCode' type="number" bindinput="input_identifyCode" placeholder-class="placeholder" placeholder="輸入驗證碼" />
    <view class="view_identifyCode">
      <button bindtap="reqIdentifyCode" disabled
 
="{{identifyCode_btn}}" class="reqIdentifyCode">{{button_reqIdentifyCode}}</button>
    </view>
  </view>
  <view class="text nextStep">如手機獲取不到驗證碼，請用E-mail註冊</view>
  <view class='bottom'>
    <button style="background:black;margin-top:6%;width: 80%;" type="primary"
 
 size="default" bindtap="nextStep_code">下一步</button>
  </view>
  <view class="text login">已經是快拍會員？</view>
  <button style="background:#ff9966;margin-top:5%;width: 80%;" type="primary" size="default" bindtap="login">登入</button>
</view>

<!--註冊第二步-->
<view wx:if="{{step==2}}" class="container">
  <view class="avatar">
    <image src="{{avatarUrl}}" bindtap="chooseAvatar"></image>
  </view>
  <view class="text nextStep">溫馨提示：註冊請先上傳頭像</view>
  <view class="field nickname">
    <input bindchange="input_nickname" placeholder-class="placeholder" placeholder="暱稱" />
  </view>
  <view class="field password">
    <input bindchange="input_password" placeholder-class="placeholder" placeholder="密碼" password/>
  </view>
  <view class="field second_input">
    <input bindchange="input_rePassword" placeholder-class="placeholder" placeholder="確認密碼" password/>
  </view>
  <button style="background:black;margin-top:20%;width: 80%;" type="primary" size="default" bindtap="nextStep_nickname">下一步</button>
</view>

register.js(部分)

data: {
    avatarUrl: '',
    identifyCode_btn: true,
    button_reqIdentifyCode: '獲取驗證碼'
  },
  onLoad: function (options) {
    this.setData({
      step: 1
    })
  },
  // 輸入手機號或郵箱
  input_acceptVal: function (e) {
    acceptVal = e.detail.value;
    if (common.checkIsNotNull(acceptVal)) {
      this.setData({
        acceptVal: acceptVal,
        identifyCode_btn: false
      })
    } else {
      this.setData({
        identifyCode_btn: true
      })
    }
  },

  // 獲取驗證碼按鈕動作
  reqIdentifyCode: function (e) {
    var that = this;
    var countdown = 60;
    var mobile = /^(13[0-9]|15[0-9]|17[0-9]|18[0-9])\d{8}$/;
    var email = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;

    // 校驗手機或郵箱
    if (!mobile.test(acceptVal) && !email.test(acceptVal)) {
      common.showTip("請填寫正確的手機號碼或郵箱", "loading", 1000);
    } else {
      this.setData({
        button_reqIdentifyCode: '傳送中'
      })
      // 獲取驗證碼
      wx.request({
        url: app.globalData.server,
        data: {
            accept: this.data.acceptVal
          }
        },
        method: "POST",
        success: function (res) {
          console.log(res)
          // 結果不為空
          if (common.checkIsNotNull(res)) {
            common.showTip(res.data.msg, "loading", 1000);
            if (res.data.code == 100 && countdown > 0) {
              interval = setInterval(function () {
                that.setData({
                  button_reqIdentifyCode: '重新獲取(' + countdown + 's)'
                });
                countdown--;

                if (countdown <= 0) {
                  countdown = -1
                  that.setData({
                    button_reqIdentifyCode: '獲取驗證碼'
                  });
                  clearInterval(interval)
                }
              }, 1000)
            } else {
              that.setData({
                button_reqIdentifyCode: '獲取驗證碼'
              });
            }
          }
        },
        fail: function () {
          common.showTip("請求失敗", "loading", 1000);
        }
      })
    }
  }

（4）登入功能，後臺獲取openid
需求：使用者授權，獲取使用者資訊及openid；使用者登入後，將微信體系和自身平臺體系的使用者繫結。
參考：微信小程式之使用者資料解密(七)，講的很詳細，分析很到位。
補充：
①在呼叫wx.login介面時，會彈出微信自帶的授權頁面，如果使用者拒絕授權，是獲取不到微信體系的使用者資訊，程式碼實現中預設使用者已授權；
②要獲取unionId，需繫結開放平臺才行。

也可關注我的微信公眾號『TyronToCoder』，一起交流學習。