Vol.2 微信小程序之简单页面构建

OK，有了对微信小程序的初步了解，现在直接开始实践到项目中。

我准备用微信小程序实现的项目是我的一个Web项目：学生学习平台。这是一个成熟的Web端项目，前后端分离，小程序可以直接调用其API访问数据。

首先先搞定基本UI。手机端APP的UI呈现思路和PC的Web不太一样，由于屏幕竖直且较小，必须换一种思路展现UI。通过对其他手机APP和小程序的UI设计思路的参考，我使用微信小程序的基本元素构建初代版本。

从官方文档了解到，微信小程序有官方UI框架WeUI，因此就参考官网说明引入并试用了该框架。

有两种方法引入WeUI：

1.通过 useExtendedLib 扩展库 的方式引入

2.通过npm方式下载构建

这里我使用第一种方法引入WeUI。

在页面的Json文件加入usingComponents 配置字段

{
  "usingComponents": {
  	"mp-form": "weui-miniprogram/form/form",
    "mp-cells": "weui-miniprogram/cells/cells",
    "mp-cell": "weui-miniprogram/cell/cell",
    "mp-dialog": "weui-miniprogram/dialog/dialog"
  }
}

接着即可在对应页面的wxml文件中使用声明的控件

<!--index.wxml-->
<view class="container">
  <!-- <view>登录</view> -->
  <view>
  <mp-form models="{{formData}}">
  <mp-cells title="登录">
    <mp-cell prop="username" title="用户名/学号">
      <input bindinput="usernameInput" model:value="{{username}}" data-field="username"  placeholder="请输入用户名/学号"/>
    </mp-cell>
    <mp-cell prop="username" title="密码">
      <input bindinput="passwordInput" model:value="{{password}}" data-field="password" placeholder="请输入密码"/>
    </mp-cell>
    <button loading="{{buttonLoading}}" bindtap="login" disabled="{{loginDisabled}}">登录</button>
  </mp-cells>
  </mp-form>
  </view>
  <mp-dialog  title="登录失败" show="{{showFailDialog}}" bindbuttontap="tapDialogButton" buttons="{{dialogButton}}">请检查用户名密码</mp-dialog>
</view>

最终实现的UI如图：

还可以，勉强过得去。接着实现登录页面的JS逻辑。

微信小程序的页面JS编写和Vue类似，通过Page()声明这一页面的所有逻辑信息，小程序全局信息则由

const app = getApp()

引入。

要进行登录，首先要能够记录用户输入的用户名密码值。通过wxml中的双向绑定model:value可以实现用户每次输入文本到相应输入框，程序中相应字段的值会自动更新。同时，在程序中修改相应字段的值，也可以在输入框内即时更新。

要声明用户名密码值，只需在data中声明即可：

  data: {
      username:undefined,
      password:undefined,
      showFailDialog:false,
      dialogButton:[{
        text:"确定"
      }],
      loginDisabled:true,
      buttonLoading:false
  },

(这里我还声明了其他wxml文件中要用到的变量)

用户名密码值记录完了，接着就是绑定登录按钮点击事件进行登录。这里有两个点需要处理：

1.绑定点击事件

2.发送http请求

第一个需求可以通过wxml中相应按钮声明bindtap="login"，即把该按钮的按下事件绑定至login方法，接着在Js文件Page中声明该方法即可。

第二个需求需要调用微信提供的wx.request方法。它接受一个对象作为参数。我这里用到的具体配置值有url(指定请求发送地址)、method（指定请求发送方式Get\Post...）、header（传递请求头）、data（传递请求数据）、success（指定顺利完成请求后的回调函数）、fail（指定请求发送失败后的回调函数）。

在请求发送成功，且后端验证用户名密码组合正确时，需要进行页面跳转。这里使用微信提供的wx.redirectTo方法进行页面跳转（不加入历史记录栈）

wx.redirectTo({
	url: '../home/home',
})

同时，由于需要保存已登录用户信息，需要写入全局变量

app.globalData.user= userData