工作中微信小程序我遇到的问题和总结

最近，因公司需要做了一款小程序。主要说说我遇到的问题和总结吧.

1.form表单。

这个样子，css部分就不放了。

<form bindsubmit='registerSubmit'>

<view class='form-box'>

<view class='phone-box'>

<view class='icon'>

<image mode='aspectFit' src='../images/icos/phone.png'></image>

</view>

<view class='input'>

<input placeholder='请输入手机号' name='phone' bindinput='phone'></input>

</view>

</view>

<view class='password-box'>

<view class='icon'>

<image mode='aspectFit' src='../images/icos/password.png'></image>

</view>

<view class='input'>

<input placeholder='请输入密码' password="*" name='password' bindinput='password'></input>

</view>

</view>

<view class='forget' bindtap='toFind'>忘记密码？</view>

</view>

<button form-type='submit' bindtap='toLogin'>登录</button>

<button style='margin-top:22rpx' bindtap='toRegister'>注册</button>

</form>

js部分

registerSubmit: function (e) {
    console.log(e); 
    var phone = e.detail.value.phone;
    var password = e.detail.value.password;
    var myreg = /^0?(13[0-9]|14[5-9]|15[012356789]|166|17[0-8]|18[0-9]|19[8-9])[0-9]{8}$/;//正则判断手机号格式是否正确
    var testPhone = myreg.test(phone);
    this.setData({
      phone: phone,
      password: password
    })
    var that = this;
    if (phone == '') {
      var msg = '手机号码不能为空';
      api.toastFun(msg, that);
    } else if (testPhone == false) {
      var msg = '手机号码格式不正确';
      api.toastFun(msg, that);
    } else if (password == '') {
      var msg = '密码不能为空';
      api.toastFun(msg, that);
    }else{
        var mustPostData = {
        MobilePhone: that.data.phone,
        PassWord: that.data.password,
        OpenId: that.data.openid[0],
      };
      console.log(mustPostData);
      wx.request({
        url: baseUrl + 'api/WChart/Home/UserLogin',
        method: 'POST', 
        data: mustPostData,
        header: {
          'content-type': 'application/x-www-form-urlencoded'
        },
        success: function (res) {
          console.log(res.data.Resdatas[0]);
          //根据返回的是true或者false存登录状态
          if (res.data.Rescode == "0000") {
            wx.setStorage({
              key: "loginstate",
              data: "true"
            })
            //wx.setStorageSync('loginstate', 'true');
            //如已登录跳转到哪个页面,此时不能用nativeto,会和app.json里的tabbbar冲突
            wx.switchTab({
              url: '../home/index',
              fail: function () {
                console.info("跳转失败")
              }
            })
          } else {
            var msg = res.data.Resmessage;
            api.toastFun(msg, that);
          }
        }
      })
    }

  },

图中有两个button因是新手并不知道当button form-type='submit' 时才会触发registerSubmt事件，当时在做的时候因为还有个注册功能，所以我把注册那个按钮也设为form-type="submit"

了，导致了很多bug。 在做注册时我在注册那个按钮上又绑了一个事件。两个按钮的功能互不影响

还有就是跳转到tabbar的页面时，不能用native  to，应该用wx.switchtab.to.

2.

做的效果是拖动滑块到最右侧然后发送短信。当时遇到的问题是因为判断不准确（获取不到滑动区域的宽），在不同的手机上这个宽是不一样的。而我当时计算出来的值是固定的，所以导致bug出现。

解决代码

  var that = this
    wx.getSystemInfo({
      success: function (res) {
        console.log('width=' + res.windowWidth);
        var rate = res.windowWidth / 750.0;
        var n = rate * 640;
        var boxn = rate * 120;
        var endn = Math.floor(n - boxn)
        that.setData({
          maxNum: endn,
        })
        console.log(that.data.maxNum);
      }
    })

小程序的单位用的是rpx, rate是rpx换成px的百分比。然后n是换算成px后的滑动区域的宽。然后在判断一下

解决。

3.还有就是

var openid = wx.getStorageSync('openid');

wx.setStorage({

key: "loginstate",

data: "true"

})

两者区别。wx.getStorageSync（）是同步获取。wx.setStorage()是异步获取你存进缓存的东西。

请求接口那个api刚开始是写在wx.getStorage这个api外面的。这就出现了bug,获取不到openId,后来我老大说写在外面的话，异步有可能你请求完接口wx.getStorage这里面的东西还没执行。所以把请求接口那个request写在了wx.getStorage的success里面。解决。这是我对异步和同步的理解。