帮我写一个微信小程序课程表
时间: 2024-06-08 07:05:18 浏览: 226
好的,下面是一个简单的微信小程序课程表的代码示例:
1. 在 app.json 中设置页面路径:
```json
{
"pages": [
"pages/index/index",
"pages/schedule/schedule"
]
}
```
2. 在 pages/index/index.wxml 中添加一个按钮,跳转到课程表页面。
```html
<button bindtap="goToSchedulePage">查看课程表</button>
```
3. 在 pages/index/index.js 中添加按钮的点击事件处理函数,并在该函数中进行页面跳转。
```javascript
Page({
goToSchedulePage: function() {
wx.navigateTo({
url: '/pages/schedule/schedule'
})
}
})
```
4. 在 pages/schedule/schedule.wxml 中添加一个表格来展示课程表。
```html
<view class="schedule">
<view class="row">
<view class="cell">时间/星期</view>
<view class="cell">周一</view>
<view class="cell">周二</view>
<view class="cell">周三</view>
<view class="cell">周四</view>
<view class="cell">周五</view>
<view class="cell">周六</view>
<view class="cell">周日</view>
</view>
<view class="row">
<view class="cell">上午</view>
<view class="cell">语文</view>
<view class="cell">数学</view>
<view class="cell">英语</view>
<view class="cell">物理</view>
<view class="cell">化学</view>
<view class="cell"></view>
<view class="cell"></view>
</view>
<view class="row">
<view class="cell">下午</view>
<view class="cell">历史</view>
<view class="cell">地理</view>
<view class="cell">政治</view>
<view class="cell">生物</view>
<view class="cell">体育</view>
<view class="cell"></view>
<view class="cell"></view>
</view>
</view>
```
5. 在 pages/schedule/schedule.wxss 中添加样式来美化表格。
```css
.schedule {
display: flex;
flex-direction: column;
border: 1px solid #ccc;
padding: 10rpx;
}
.row {
display: flex;
flex-direction: row;
border-bottom: 1px solid #ccc;
}
.cell {
display: flex;
justify-content: center;
align-items: center;
flex: 1;
height: 60rpx;
border-right: 1px solid #ccc;
}
```
6. 最后,在 app.wxss 中添加全局样式来调整页面的背景色等属性。
```css
page {
background-color: #f5f5f5;
}
button {
width: 100%;
height: 80rpx;
font-size: 36rpx;
color: #fff;
background-color: #007aff;
border-radius: 10rpx;
margin-top: 50rpx;
border: none;
outline: none;
}
button:active {
background-color: #0066cc;
}
```
这样,一个简单的微信小程序课程表就完成了。当用户点击首页中的按钮时,会跳转到课程表页面,并展示一个基本的表格。你可以根据自己的需求来调整和扩展该程序。
阅读全文