微信小程序开发基础

刚刚开始接触微信小程序开发，刚开始的基础开发还是比较简单的。

首先我们要安装好微信小程序的开发工具，我们可以快速新建一个项目。创建完项目后会自动生成以下四个不同类型的文件。

微信小程序中有四种类型的文件分别为：

.js----javaScript文件

.json----项目的配置文件

.wxml----类似于HTML文件

.wxss----类似于CSS文件

app.json配置文件

app.json是对当前小程序的全局配置。

app.js

交互逻辑，一个服务器不能只有一个界面的显示，还需要和用户做交互，所以我们就需要用js脚本来和用户做交互。

app.wxml

此文件是用来搭建页面的结构的，但这和我们之前学过的HTML是有一些不同之处的，在HTML文件中我们用div来设置盒子，在我们的wxml中设置盒子的代码就变成了<view></view>

示例代码：

<view class="container">
  <view>
    <text>评教系统-学生端</text>
  </view>
  <form bindsubmit="formSubmit" >
    <view class="section">
      <text>学号：</text>
      <input type="number" name="no" placeholder='请输入学号' value="1635050515" ></input>
    </view>
    <view class="section">
      <text>密码：</text>
      <input password='true' name="pwd" placeholder='请输入密码' value="123456"></input>
    </view>
    <view class="section">
      <button type="primary" form-type="submit">登录</button>
    </view>
  </form>
</view>

app.wxss

此文件是用来设置页面样式的，它和我们之前学过的css差不多，用我们之前学过的css来设置样式就可以了。

用户登录页面的设置

login.wxml的示例代码

<!--pages/login/login.wxml-->
<view class="container">
  <view>
    <text>评教系统-学生端</text>
  </view>
  <form bindsubmit="formSubmit" >
    <view class="section">
      <text>学号：</text>
      <input type="number" name="no" placeholder='请输入学号' value="1635050515" ></input>
    </view>
    <view class="section">
      <text>密码：</text>
      <input password='true' name="pwd" placeholder='请输入密码' value="123456"></input>
    </view>
    <view class="section">
      <button type="primary" form-type="submit">登录</button>
    </view>
  </form>
</view>

login.js示例代码

formSubmit:function(e){
    // console.log(e.detail.value.no);
    wx.request({
      url: "https://www.lishuming.top/pj/index.php/student/api/login", //仅为实例，并非真实的接口地址
      data:{
        username: e.detail.value.no,
        password: e.detail.value.pwd
      },
      header: {
        'content-type':'appliction/json' //默认值
      },
      success: function (res) {
        // console.log(res.data);
        wx.setStorage({
          key: "student",
          data: res.data
        });

        wx.redirectTo({
          url: "../teachers/teachers",
        })
      }
    })
  }

login.wxss样式设计还是很好写的，用我们之前学过的css的知识就可以完成的。