首先我们需要申请一个小程序,然后进行appid的设置,进行修改,才可以正式进行代码的编写和运行。
1.先创建目录,然后再创建page,然后自动生成四个文件。然后再xxx.wxml中进行代码的编写
<form bindsubmit='formSubmit'>
<view class='text'>学号</view>
<view class="section">
<input name="no" type="text" placeholder="输入学号" value="1635050527"/>
</view>
<view class='text'>密码</view>
<view class="section">
<input name="pwd" password="true" placeholder="输入密码" value='123456'/>
</view>
<view>
<button formType='submit'>登录</button>
</view>
</form>
2.再xxx.wxss中进行样式的编写
.section{
border: 1px solid #ccc;
margin: 10px 10px;
}
form{
width: 100px;
height: 150px;
margin: 10px auto;
background: white;
}
button{
width: 100px;
height: 30px;
line-height: 30px;
}
.text{
margin: 10px;
color: orange;
}
3.如需深一步操作,则应在xxx.js中进行编写
formSubmit: function (e) {
console.log(e.detail.value),
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': 'application/json' // 默认值
},
success: function (res) {
console.log(res.data);
wx.setStorage({
key: "student",
data: res.data
});
wx.redirectTo({
url: '../teachers/teachers'
})
}
})
4.如果进行总的操作,则应该再app等文件中进行操作。如果进行配置的话需要在app.json中进行全局的配置。