[学习day1]第一个小项目- 微信小程序开发的经历

本文是作者初次尝试微信小程序开发的学习记录。从注册小程序账号、下载微信开发者工具,到新建项目并理解pages和app.json的配置,详细介绍了小程序开发的初步步骤。在学习过程中,作者探讨了app.json中关于页面路径、界面配置、SDK版本范围以及代码延迟加载等关键设置。
摘要由CSDN通过智能技术生成

    首先,这是我的第一篇博客。由于明年就要进入某211的计算机学硕专业深造学习。最近在练习写一个项目,是以前没有接触过的微信小程序开发。接下来就记录和分享一些自己的学习经历。

第一步:配置环境

    首先,新用户需要去关注“微信公众平台”,进行“注册”,注册类型选择“小程序”类型,接着就是填写相关信息和资料,需要注意的是必须是未注册过的邮箱,且每个邮箱只可以申请一个小程序。激活邮箱以后,选择主体类型为“个人类型”,并按要求进行相关登记即可。

第二步:微信开发者工具

   申请并注册完微信小程序以后,大家就要下载微信开发者工具。链接如下:微信开发者工具

 选择自己的操作系统对应的版本下载并安装即可。

第三步:新建小程序

安装完对应版本的开发工具,大家就可以新建自己的第一个小程序了。新建项目选择小程序项目,选择代码存放的硬盘路径,填入

好的,下面是一个简单的微信小程序大学课程表的代码实现,你可以根据自己的需求进行修改和完善: 1. 在小程序开发者工具中创建一个新项目,选择小程序模板,命名为“课程表”。 2. 在 app.json 文件中添加页面路径和标签栏配置: ``` { "pages": [ "pages/index/index", "pages/course/course" ], "tabBar": { "list": [ { "pagePath": "pages/index/index", "text": "首页" }, { "pagePath": "pages/course/course", "text": "课程表" } ] } } ``` 3. 在 pages/index/index.wxml 中编写首页的布局和样式: ``` <view class="container"> <view class="title">欢迎使用课程表</view> <view class="subtitle">请点击下方按钮开始设置课程表</view> <button class="btn" bindtap="goToCourse">设置课程表</button> </view> ``` ``` .container { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh; } .title { font-size: 28rpx; font-weight: bold; margin-bottom: 10rpx; } .subtitle { font-size: 18rpx; color: #999; margin-bottom: 20rpx; } .btn { width: 200rpx; height: 60rpx; border-radius: 30rpx; background-color: #007aff; color: #fff; font-size: 24rpx; font-weight: bold; border: none; outline: none; } ``` 4. 在 pages/index/index.js 中添加跳转到课程表页面的逻辑: ``` Page({ goToCourse: function() { wx.switchTab({ url: '../course/course', }) } }) ``` 5. 在 pages/course/course.wxml 中编写课程表的布局和样式: ``` <view class="container"> <view class="header"> <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="body"> <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 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 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> </view> ``` ``` .container { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh; } .header { display: flex; flex-direction: row; justify-content: space-around; background-color: #007aff; color: #fff; font-size: 16rpx; font-weight: bold; } .cell { width: 80rpx; height: 40rpx; display: flex; align-items: center; justify-content: center; } .body { display: flex; flex-direction: column; justify-content: space-around; height: 480rpx; } .row { display: flex; flex-direction: row; justify-content: space-around; } .row:nth-child(even) { background-color: #f5f5f5; } ``` 6. 在 pages/course/course.js 中添加课程表数据的存储和显示逻辑: ``` Page({ data: { courses: {} }, onLoad: function () { var courses = wx.getStorageSync('courses') || {}; this.setData({ courses: courses }); }, onShow: function () { var courses = wx.getStorageSync('courses') || {}; this.setData({ courses: courses }); } }) ``` ``` <view class="container"> <view class="header"> <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="body"> <block wx:for="{{[1,2,3,4,5,6,7,8]}}" wx:key="index"> <view class="row"> <view class="cell">{{item}}节</view> <view class="cell">{{courses['1-'+item]}}</view> <view class="cell">{{courses['2-'+item]}}</view> <view class="cell">{{courses['3-'+item]}}</view> <view class="cell">{{courses['4-'+item]}}</view> <view class="cell">{{courses['5-'+item]}}</view> <view class="cell">{{courses['6-'+item]}}</view> <view class="cell">{{courses['7-'+item]}}</view> </view> </block> </view> </view> ``` 7. 在 pages/course/course.js 中添加课程表数据的编辑和保存逻辑: ``` Page({ data: { courses: {} }, onLoad: function () { var courses = wx.getStorageSync('courses') || {}; this.setData({ courses: courses }); }, onShow: function () { var courses = wx.getStorageSync('courses') || {}; this.setData({ courses: courses }); }, editCourse: function(event) { var day = event.currentTarget.dataset.day; var time = event.currentTarget.dataset.time; wx.navigateTo({ url: '../edit/edit?day=' + day + '&time=' + time, }) }, saveCourse: function(data) { var courses = wx.getStorageSync('courses') || {}; courses[data.day + '-' + data.time] = data.name; wx.setStorageSync('courses', courses); this.setData({ courses: courses }); } }) ``` 8. 在 pages/edit/edit.wxml 中编写编辑课程的布局和样式: ``` <view class="container"> <view class="form"> <view class="item"> <view class="label">课程名称:</view> <input type="text" class="input" placeholder="请输入课程名称" bindinput="inputName" value="{{name}}"/> </view> <view class="item"> <button class="btn" bindtap="saveCourse">保存</button> </view> </view> </view> ``` ``` .container { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh; } .form { display: flex; flex-direction: column; align-items: center; justify-content: center; background-color: #fff; padding: 30rpx; border-radius: 10rpx; box-shadow: 0 0 10rpx rgba(0,0,0,.3); } .item { display: flex; flex-direction: row; align-items: center; justify-content: space-between; margin-bottom: 20rpx; } .label { font-size: 20rpx; font-weight: bold; } .input { width: 200rpx; height: 40rpx; border: none; outline: none; background-color: #f5f5f5; border-radius: 5rpx; padding: 5rpx; font-size: 16rpx; } .btn { width: 100rpx; height: 40rpx; border-radius: 20rpx; background-color: #007aff; color: #fff; font-size: 16rpx; font-weight: bold; border: none; outline: none; } ``` 9. 在 pages/edit/edit.js 中添加输入课程名称和保存课程的逻辑: ``` Page({ data: { name: '', day: '', time: '' }, onLoad: function (options) { this.setData({ day: options.day, time: options.time }); }, inputName: function(event) { this.setData({ name: event.detail.value }); }, saveCourse: function() { var pages = getCurrentPages(); var coursePage = pages[pages.length - 2]; coursePage.saveCourse({ day: this.data.day, time: this.data.time, name: this.data.name }); wx.navigateBack(); } }) ``` 以上就是一个简单的微信小程序大学课程表的实现,希望能够对你有所帮助。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值