帮我写出一个双页面的注册的微信小程序的代码,要求如下:1.创建stulist页面,以列表形式显示学生学籍信息 2.在index(index是tabbar页面)页面中使用按钮重定向到stulist 3.创建stuedit页面,在此页面中定义学籍信息表单,点击按钮按钮,返回到stulist,并把提交的学籍信息追加到信息stulist页面的列表中 4.在stulist页面中定义新增按钮,点击后转发到stuedit,定义返回按钮,点击后返回到index
时间: 2024-02-19 18:02:23 浏览: 146
微信小程序登陆注册功能的实现代码
5星 · 资源好评率100%
好的,以下是一个简单的双页面的注册微信小程序的代码,仅供参考:
app.json 文件:
```json
{
"pages": [
"pages/index/index",
"pages/stulist/stulist",
"pages/stuedit/stuedit"
],
"tabBar": {
"list": [
{
"pagePath": "pages/index/index",
"text": "首页"
},
{
"pagePath": "pages/stulist/stulist",
"text": "学生列表"
}
]
}
}
```
index/index.wxml 文件:
```html
<view class="container">
<button class="btn" bindtap="redirectToStulist">查看学生列表</button>
</view>
```
index/index.js 文件:
```javascript
Page({
redirectToStulist: function() {
wx.redirectTo({
url: '../stulist/stulist'
})
}
})
```
stulist/stulist.wxml 文件:
```html
<view class="container">
<button class="btn" bindtap="redirectToStuedit">新增学生</button>
<view class="list">
<view class="item" wx:for="{{students}}">
<view class="name">{{item.name}}</view>
<view class="id">{{item.id}}</view>
<view class="major">{{item.major}}</view>
</view>
</view>
</view>
```
stulist/stulist.js 文件:
```javascript
Page({
data: {
students: [
{ name: '小明', id: '20190101', major: '计算机科学' },
{ name: '小红', id: '20190102', major: '软件工程' },
{ name: '小刚', id: '20190103', major: '网络工程' }
]
},
redirectToStuedit: function() {
wx.redirectTo({
url: '../stuedit/stuedit'
})
}
})
```
stuedit/stuedit.wxml 文件:
```html
<view class="container">
<form bindsubmit="onSubmit">
<view class="form-item">
<label class="label">姓名:</label>
<input class="input" name="name" placeholder="请输入姓名" />
</view>
<view class="form-item">
<label class="label">学号:</label>
<input class="input" name="id" placeholder="请输入学号" />
</view>
<view class="form-item">
<label class="label">专业:</label>
<input class="input" name="major" placeholder="请输入专业" />
</view>
<button class="btn">提交</button>
</form>
</view>
```
stuedit/stuedit.js 文件:
```javascript
Page({
onSubmit: function(e) {
var pages = getCurrentPages()
var prevPage = pages[pages.length - 2]
var student = {
name: e.detail.value.name,
id: e.detail.value.id,
major: e.detail.value.major
}
prevPage.setData({
students: prevPage.data.students.concat(student)
})
wx.navigateBack({
delta: 1
})
}
})
```
CSS 文件:
```css
.container {
padding: 20px;
}
.form-item {
display: flex;
align-items: center;
margin-bottom: 20px;
}
.label {
flex-basis: 80px;
font-size: 16px;
}
.input {
flex: 1;
height: 40px;
padding: 0 10px;
border: 1px solid #ccc;
border-radius: 4px;
}
.btn {
display: block;
width: 100%;
height: 40px;
line-height: 40px;
text-align: center;
background-color: #00bfff;
color: #fff;
font-size: 16px;
border-radius: 4px;
}
.list {
margin-top: 20px;
border: 1px solid #ccc;
border-radius: 4px;
}
.item {
display: flex;
align-items: center;
padding: 10px;
border-bottom: 1px solid #ccc;
}
.name {
flex-basis: 80px;
font-size: 16px;
}
.id {
flex: 1;
font-size: 16px;
}
.major {
flex-basis: 120px;
font-size: 16px;
}
```
注意事项:
1. 以上代码仅供参考,具体实现方式可能因项目需求不同而有所差异,需要根据实际情况进行调整。
2. 在实际开发中,需要在微信公众平台上创建小程序并绑定开发者账号,然后在本地使用微信开发者工具进行开发、调试和上传部署。
阅读全文