我爱编程

[小程序]简单上手小程序

2018-06-21  本文已影响0人  Re_Vive

小程序出来应该已经一两年了,但个人一直不算看好,也没去研究。但在生活中,发现很多场景,小程序比普通的网页更为流畅,再依托于平台(微信/支付宝),对开发者来说更容易调用手机的一些接口,比如位置,媒体,以及最麻烦的支付接口。对用户来说,在特定场景下的应用,不需要下载,即开即用,用户体验也比较良好。

1、花了一天时间,主要完成一个注册页面,只是熟悉一些小程序的code风格
2、对每一个input进行验证,不合法时,下方随时出现提示
3、当手机号不符合规则的时候,获取验证码按钮无法使用、获取验证码后进行倒计时
4、点击注册,有不合法的输入时,出现toast进行提示错误信息

注册页

wxml和wxss就不贴了,没什么好记的

data: {
    url: 'https://www.example.com',//获取验证码和注册的接口,微信要求一定要https
    province: ['京', '沪', '津', '冀', '辽', '豫', '鄂',],//车牌省
    index: '0',//车牌省序号
    callnum: '',//电话
    getverify:'',//将获取的验证码填这里
    verifynum:'',//验证码
    carnum:'',//车牌号
    password:'',//密码
    tip:[],//最下方的提示
    isbutton:true,//按钮状态
    countdown:'获取验证码',//倒计时
    cd:''//定时器
  },

👆中了双向绑定的毒,任何状态需要改变的地方都在data里设定了一个数据,可能有些不需要,有待后面研究。
这里注意一点,在方法里声明一个定时器,在另一个方法里去清除,也要将命名在data里

//电话验证
bindcallnum: function (e) {//当input事件时触发
  let call = e.detail.value
  call = call.replace(/[^\d\/]/g, "")//对数字以外的其他字符进行过滤
  let carver = /^1[34578]\d{9}$/;//对电话格式进行过滤
  let isCall = carver.test(call)
  
if(!isCall){
    this.setData({
      tip: '请输入正确的电话',
      isbutton: true
    })
  }else{
    this.setData({
      tip: '',
      isbutton:false
    })
  }
  this.setData({
    callnum: call
  })
},
blurcallnum:function(){//当离开时进行tip提示
  if(this.data.callnum == ""){
    this.setData({
      tip:'请输入手机号',
    })
  }
},

👆每一个input都用了这两种方法的变形,每次输入时进行验证,改变tip的提示,离开时未输入进行提示


其他的也没什么了,语法基本和vue一样,所以熟悉vue的基本可以一天上手小程序。当然仅仅时上手,后面其他的api,都还用到。
(BTW:一些面向企业的api,还是需要认证,300RMB或者对公账户打款验证。还有支付宝小程序没试)

上一篇下一篇

猜你喜欢

热点阅读