微信小程序入门（实现登录页面布局）_微信小程序登陆页面设计

系列文章目录

提示：这里可以添加系列文章的所有文章的目录，目录需要自己手动添加
1.默认加载的页需要将其调整到pages中页面列表的第一个

2.

布局组件和图片组件的使用

3.③弹性布局

4. ④通过wx:if属性来控制不同的视图显示

5.

小程序如果需要前台wxml界面和js进行交互，形成动态效果时，需要通过事件驱动

所有微信小程序的事件前面都会有一个关键字bind

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、.默认加载的页需要将其调整到pages中页面列表的第一个。

代码如下（示例）：

  "pages": [

    "pages/login/login",

    "pages/index/index",

    "pages/news/news",

    "pages/case/case",

    "pages/ul/ul"

二、布局组件和图片组件的使用

view组件：等价于之前的div容器，是一个块级元素。可以设置宽和高

image组件：显示图片的组件，src属性是当前的图片路径 mode属性是当前图片的压缩方式

代码如下（示例）：

<view >

  <image src="" mode="" class=""></image>

</view>

三.布局样式

代码如下（示例）：

display: flex;/*弹性布局*/

 flex-direction: row;/*弹性布局的方向 默认是水平方向*/

  justify-content: space-between;/*对齐方式*/

  border-bottom: 2rpx solid gray;/*边框 像素  线型  颜色*/

  align-items:center ; /*交叉轴的终点对齐*/

  line-height: 100rpx;/* 行间距 控制某个区域中行与行之间的距离*/

---

四.通过wx:if属性来控制不同的视图显示

代码演示：

<view wx:if="{{loginMide}}">

<view class="wx">

<image src="/image/chat.png" mode="heightFix"class="chatimg"></image>

</view>

<view class="chattext">

<text>申请获取一下权限</text>

<text>获取你的公开信息（昵称，头像等）</text>

<button type="primary">微信授权登录</button>

</view>

</view>

<!--账号 密码 登录  -->

<view class="formlogin" wx:else>

  <form bindsubmit="uplogin">

    <view>账号</view>

    <view>

      <input type="text" placeholder="请输入账号" name="username" />

    </view>

    <view>密码</view>

    <view>

      <input type="password" placeholder="请输入密码" name="pwd"/>

    </view>

    <view>

      <button type="primary" form-type="">账号登陆</button>

    </view>

  </form>

</view>

五.

小程序如果需要前台wxml界面和js进行交互，形成动态效果时，需要通过事件驱动

所有微信小程序的事件前面都会有一个关键字bind

wxml代码演示：

<!--头部样式-->

<view class="header">

  <image src="/image/logo.jpg" mode="heightFix" class="imgloge"></image>

  <image src="/image/tel.jpg" mode="heightFix" class="imgtel"></image>

</view>

<!--微信授权登录区域开始-->

<view wx:if="{{loginMide}}">

<view class="wx">

<image src="/image/chat.png" mode="heightFix"class="chatimg"></image>

</view>

<view class="chattext">

<text>申请获取一下权限</text>

<text>获取你的公开信息（昵称，头像等）</text>

<button type="primary">微信授权登录</button>

</view>

</view>

<!--账号 密码 登录  -->

<view class="formlogin" wx:else>

  <form bindsubmit="uplogin">

    <view>账号</view>

    <view>

      <input type="text" placeholder="请输入账号" name="username" />

    </view>

    <view>密码</view>

    <view>

      <input type="password" placeholder="请输入密码" name="pwd"/>

    </view>

    <view>

      <button type="primary" form-type="">账号登陆</button>

    </view>

  </form>

</view>

<!-- 登录区域切换-->

<view class="loginxz">

<radio-group  bindchange="loginchange">

<radio checked="true" value="0">微信授权</radio>

<radio class="userLogin" value="1">账号登录</radio>

</radio-group>

</view>

js代码演示：

 data: {

 loginMide:true

  },

  /*function要做的事情 方法定义的语法

  方法的e代表当前选中的控件

  */

loginchange:function(e){

  var rdvalue=e.detail.value;

  //如果选择的是微信授权登录

  if(rdvalue==0){

    //loginMide的值为true//在小程序中要修改初始化date中的值使用//this代表当前页的数据 set设置的意思 重新设置date的值

    this.setData({

      loginMide:true

    })

  }

  //如果选择的是账号登录

  else{

    //loginMide的值为false

    this.setData({

      loginMide:false

    })

  }

},

uplogin:function(e){

  //获取用户名和密码

  var username=e.detail.value.username;

  var pwd=e.detail.value.pwd;

  //判断账户sxl 密码123

  if(username=="sxl" && pwd=="123"){

    wx.redirectTo({

      url: '/pages/ul/ul',

    })

  }

  else{

//否则提示账号密码错误

wx.showToast({

  title: '账号或密码错误',

  icon:"error"

}) 

}

}