微信小程序注册和制作简单页面

微信小程序可以说现在非常的火热，从刚开始的跳一跳，到现在各种各种各样的小程序深受大家的关注，它可以制作简易游戏，也可以是一种工具，总之现在的小程序种类很多，作为程序员我们也得跟进潮流，开发一个属于自己的小程序。

首先我们需要注册一个小程序，在微信小程序官网下载开发工具，这个开发工具需要appid,appid需要登录微信公众平台在设置里获取，这样就可以使用工具了，在这里面可以设置窗口颜色，和导航颜色：

{
  "pages": [
    "pages/index/index",
    "pages/logs/logs",
    "pages/flex/flex",
    "pages/teacher/teacher",
    "pages/testpaper/testpaper"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#5f9ea0",
    "navigationBarTitleText": "我的小程序",
    "navigationBarTextStyle": "#ccc"
  }
}

这和我们学的html相似但又不同，之前我们用的div在这里都不可以用 ，用view代替，还有之前的浮动在这里都不能用，我们可以参考文档里的组件。

接下来给大家介绍一个登录界面的设计，

新建一大个login文件，然后新建page,这时候就自动生成四个文件，

在login.wxml是主页面，

<!--logs.wxml-->
<view class="form1">
<view class='title'>
  评教系统——学生端
</view>
 <form bindsubmit="formSubmit" bindreset="formReset">
  <view class="section">
    <view class="section__title">学号：</view>
    <input type="input" value="1635050216" name="no" placeholder="请填写学号" />
  </view>
  <view class="section">
    <view class="section__title">密码：</view>
    <input type="password" value="123456" name="pwd" placeholder="请填写密码" />
  </view>
  <view class="sub">
    <button type="primary" formType="submit">登录</button>
  </view>
</form>
</view>

login.wxss是样式表

.form1 {
  height:4700px;
  display: flex;
  flex-direction: column;
  padding: 40rpx;
  background:#f0ffff;
}
.title{
  margin: 0 auto;
}
.log-item {
  margin: 10rpx;
}
input{
  border:1px solid #ccc;
  padding: 3px;
}
.section{
  margin: 30px;
}
.sub{
  margin-top: 10px;
  width: 250px;
  margin: 0 auto;
}

login.js是js文件

//logs.js
const util = require('../../utils/util.js')

Page({
  formSubmit: function (e) {
    console.log(e.detail.value);
    wx.request({
      url: '',
      data: {
        username: e.detail.value.no,
        password: e.detail.value.pwd,
      },
      header: {
        'content-type': 'application/json'
      },
      success: function (res) {
        console.log(res.data);
        //缓存
        wx.setStorage({
          key:"student",
          data:res.data
        });
        //页面跳转
        wx.redirectTo({
          url: "../teacher/teacher"
        })
      }
    })
  }
  
})

以上就是给大家介绍的小程序的注册和一个登录界面的设计，有兴趣的同学可以自己去设计一下。