安卓开发学习微信小程序二

接上文，我下载了两个开源的小程序的项目。参照着写了自己的第一个小程序。

这篇博客的内容是记录一下，简单的控件使用，还有一些初学者的注意事项。微信小程序初学者易犯的错误，大家可以对比一下。

项目效果如下所示。

简单的登录页面，登录的时候进行手机号还有密码的一个判断，然后显示出相应的提示内容。还有一个就是我想练一下按钮不同状态下不同UI的展示。这篇博客会都展示出来相应的代码。

首先第一步就是页面的布局

每一个页面都会有一个对应的wxss文件，代码如下：

此处有一个需要注意的点就是此处每个名字都与wxml 文件名字保持一致，但是前面都会有一个点，不可以删除或者不写哦。其中这些属性可以参考文档去写，一般也就是宽高，字体大小，颜色等。

重点来了，js文件怎么写，这个可是一不小心小白就会犯错的。

//index.js
//获取应用实例 
const app = getApp()
Page({
  /**
   * 页面的初始数据。
   * 易错点就是data里面设置数据的值，或者是setdata方法里面设置值，
   * 都是以冒号的形式，而且中间间隔用的是逗号。这个很容易犯错，再加上这个开发工具的提示，真的不如AndroidStudio
   * 很容易就是一不小心写错了，但是死活都找不出来哪儿错了。
   */
  data: {
    phone: "",
    pwd: "",
    phoneLength: 0,
    btnOk:false
  },
  handleInput(e) {
    let value = this.validateNumber(e.detail.value)
    this.setData({
      phone: value,
      phoneLength: value.length
    })
  },

  handleInputPwd(e) {
    this.setData({
      pwd:e.detail.value,
    }) 
  },

  //function 代表此处是一个可以调用的方法
loginMethod:function name(params) {
  if (this.data.pwd==""||this.data.phoneLength!=11) {
     this.data. btnOk=false;
    }else{
      this.data. btnOk=true;
    }
    if (this.data. btnOk) {
      //跳转到下个页面 此处需要注意的点就是 ../login/login 不要写成全路径 我已经试过了 就按照这样的写法就好
      wx.navigateTo({
        url: '../login/login',
      })   
    }else {
      //此处是弹出提示跟提示框，大家可以参考官方文档，输入相对应的参数。但是自带的toast应该满足不了大多数的需求，需要自定义
      app.toast({
        title: '请检查输入的手机号或者密码',
        icon: 'fail',
        duration: 1000,
        mask:true
    })
       app.modal({
        title: '提示',
        content: '请检查输入的手机号或者密码',
        success: function (res) {
            if (res.confirm) {
                console.log('用户点击确定')
            }else{
               console.log('用户点击取消')
            }

        }
    })
    }
  },

  validateNumber(val) {
    return val.replace(/\D/g, '')
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },
})

上面注释已经提到了，要注意的就是变量的声明与赋值，赋值的方式在data里面与setdata里面 都是不一样的。这个需要注意。

还有就是变量在全局进行调用的时候，需要用到的是 thi.data.变量名 来进行操作。

还有一点就是js代码中，那些声明的绑定在input控件中的handleInput等，括号里面传递的参数其实就是我们的输入内容，这点需要注意一下。

其实写起来没有多少东西，但是就像是data数据的声明我真的是在踩坑，赋值的方式一直有问题。希望大家可以避免犯这些低级错误。