微信小程序入门(1) 整体结构认识

   哦哦哈哈，我又来了，我的兴趣又跑到微信小程序了啦。所谓的呼吸不止，学习不停。每天进步一点点，总结一点点，最近用hexo搭建了一个自己的博客，有时间也写一篇博客分享给你们啦，大家共同进步学习，我的地址就先放在这里了，嘿嘿

www.zhaolei.site，大家可以去看看赶脚可以刷刷访问量。

 一.认识整体结构

   从github抠出一个小程序的登录页面的代码，看到这四个文件，顾名思义应该能猜到

   .js为后缀主要写逻辑代码，

   .json当前页面配置 标题，主题颜色等

   .wxml布局文件

   .wxss样式文件 偏移位置布局

    就像写html 与 css 样式一样。

 二.布局搭建

  一般都是先布局然后填数据，今天搭建下面这个界面。

先写wxml文件，分析一下布局，按照从上往下的顺序依次是 image，text ，input，input，text，button。

看下代码也是按照一次顺序，和我们Android是差不多的。

input是输入框，binginput是监听他输入的内容，类似android布局文件中定义的onClick方法。

text的bindtab也是监听他点击的函数。

<!--pages/login/login.wxml-->
<view class='login_container'>
  <image class='login_bg' src='../../images/login.png'></image>
  <text>登录</text>
  <input class='text_input' placeholder='请输入用户名' bindinput='inputusername'></input>
  <input class='text_input' placeholder='请输入密码' bindinput='inputpassword' password='true'></input>

  <text class='text_register' bindtap='goRegister'>没有账号?去注册</text>
  <button class='btn_login' bindtap='login'>
    <view>登录</view>
  </button>
</view>

  现在布局文件写完了但是他是没有样式的，就是布局像margin，padding，字体颜色等参数，下面写wxcss文件添加样式。

  display：https://blog.csdn.net/u013673799/article/details/70157294 通俗点来说 就是类似android中的 linearLayout与flutter中  的 colum和row的关系。

   border 是边框先 宽度，实线，黑色。

   border-bottom 底下边框线（注册处底下实线）

   border-radius 是圆角

   height width 高度与宽度

   margin 偏移 padding 内边距

  font-size 字体大小

   

.login_container {
  display: flex; 
  align-items: center;
  flex-direction: column;
}

.login_bg {
  border: 1rpx solid black;
  border-radius: 50%;
  height: 80rpx;
  width: 80rpx;
  margin-top: 60rpx;
  padding: 10rpx;
}

.text_input {
  margin-top: 60rpx;
  width: 80%;
  border-bottom: 1rpx solid black;
  font-size: 16px;
}

.text_register {
  width: 80%;
  align-self:center;
  margin-top: 10rpx;
  text-align: right;
  text-decoration: underline;
  font-size: 14px;
}

.btn_login{
  margin-top: 60rpx;
  background: #1296db;
  width: 60%;
  color: white;
  font-size: 16px;
}

 

三 编写逻辑 .js

// pages/login/login.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    username: "",
    password: "",
  },

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

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function() {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function() {

  },

  //在wxml注册的监听方法
  goRegister: function() {
    //模拟跳转到注册页面
    wx.navigateTo({
      url: '/pages/register/register',
    })
  },
  
  //btn登录按钮的
  login: function() {
    wx.showToast({
      title: '登录',
      icon: 'none',
    })

  },

//输入账号的监听函数
  inputusername: function(e) {
    this.setData({
      username: e.detail.value
    })

  },
//输入密码监听函数
  inputpassword: function(e) {
    this.setData({
      password: e.detail.value
    })
  },

})

点击登录按钮 toast提示