【微信小程序】课程表案例--0基础版

简介: 🔮 效果动图:🍀准备工具🌳准备代码:🌞部署项目🦠修改课程时间🦠修改课程内容🦠修改标题🦠修改底部导航栏🍍项目发布

🔮  效果动图:



🍀准备工具


微信开发者工具:稳定版 Stable Build | 微信开放文档 (qq.com)


根据自己电脑系统下载对应的版本:




🌳准备代码:


🧊完整代码链接:https://pan.baidu.com/s/11Dy2_0MUreyynIeIQNOdsg

提取码:ht8u



🌞部署项目


首先 先把代码的压缩包解压,并记住这个路径。


1.打开微信小程序:


2. 点击黑框:



注意看黑框所包围的东西 这些是重点


这里的目录:就是你刚刚解压文件的路径


后端服务选择腾讯云开发(wx小程序会免费给你送服务器)





3.AppID查看方式:


百度搜索如图文字:




注册一个账号,并登录



登录成功后,在开发设置这里就能找到ID了



🦠修改课程时间


将课程改成属于自己班的: 找到tsj.js并点击打开



黑框是课程时间,对应的代码是:


    course_time:[
      ['8:40',''],
      ['','10:00'],
      ['10:30',''],
      ['','11:50'],
      ['14:00',''],
      ['','15:20'],
      ['15:50',''],
      ['','17:10'],
      ['18:30',''],
      ['','19:50'],
      ['20:00',''],
      ['','21:20'],
  ],

你们上课时间是多少,就把数字改成多少


🦠修改课程内容


id:负责展示的颜色,id不同 颜色不同


isToday:就是代表星期几,1就是代表周一,2代表周二,一次推类。


classNumber:代表占几个课时,说白了就是长方形的高度。


name:课程的名字


address:教室的号码

  [     //第一周 
        { "id":2,"isToday": 1, "jie": 3, "classNumber": 2, "name": "操作系统" ,"address":"5409" },
        { "id":3,"isToday": 1, "jie": 5, "classNumber": 2, "name": "毛概","address":"6202" },
        { "id":4,"isToday": 2, "jie": 1, "classNumber": 2, "name": "Matlab" ,"address":"2306" },
        { "id":2,"isToday": 2, "jie": 5, "classNumber": 2, "name": "操作系统" ,"address":"5409" },
        {"id":7,"isToday": 2, "jie": 3, "classNumber": 2, "name": "数学建模","address":"1215"},
        { "id":6,"isToday": 3, "jie": 1, "classNumber": 2, "name": "计算机网络" ,"address":"5102" },
       { "id":3,"isToday": 3, "jie": 5, "classNumber": 2, "name": "毛概" ,"address":"6202" },
       { "id":5,"isToday": 4, "jie": 5, "classNumber": 2, "name": "数据库原理及应用" ,"address":"2306" },
         { "id":1,"isToday": 5, "jie": 1, "classNumber": 2, "name": "算法设计与分析" ,"address":"5506" },
        { "id":6,"isToday": 5, "jie": 3, "classNumber": 2, "name": "数据库原理及应用" ,"address":"5102" },
   ],
      [      //第二
     { "id":1,"isToday": 1, "jie": 7, "classNumber": 2, "name": "算法设计与分析","address":"2306" },
        { "id":2,"isToday": 1, "jie": 3, "classNumber": 2, "name": "操作系统" ,"address":"5409" },
        { "id":3,"isToday": 1, "jie": 5, "classNumber": 2, "name": "毛概","address":"6202" },
        {"id":7,"isToday": 2, "jie": 3, "classNumber": 2, "name": "数学建模","address":"未知"},
        { "id":4,"isToday": 2, "jie": 1, "classNumber": 2, "name": "Matlab" ,"address":"2306" },
        { "id":2,"isToday": 2, "jie": 5, "classNumber": 2, "name": "操作系统" ,"address":"5409" },
        { "id":6,"isToday": 3, "jie": 1, "classNumber": 2, "name": "计算机网络" ,"address":"5102" },
       { "id":3,"isToday": 3, "jie": 5, "classNumber": 2, "name": "毛概" ,"address":"6202" },
       { "id":5,"isToday": 4, "jie": 5, "classNumber": 2, "name": "计算机网络" ,"address":"2304" },
         { "id":1,"isToday": 5, "jie": 1, "classNumber": 2, "name": "算法设计与分析" ,"address":"5506" },
        { "id":6,"isToday": 5, "jie": 3, "classNumber": 2, "name": "数据库原理及应用" ,"address":"5102" },],

🦠修改标题

如图黑框的就是标题  



 




需要什么内容改一下就行:


🦠修改底部导航栏

 

 

 

🍍项目发布


点击上传按钮:


点击上传即可:


 

打开微信小程序网站:


登录好后,打开版本管理

点击提交审核  



成品如图:

相关文章
|
1天前
|
开发框架 小程序 测试技术
排队免单小程序开发模式案例
排队免单小程序通过线上排队系统,为用户提供便捷的免单机会。主要功能包括用户注册与登录、商家入驻与管理、排队系统、通知与提醒、活动记录与查询。技术实现涉及微信小程序原生开发框架、后端技术、API接口和第三方服务。开发过程还包括全面的测试与优化,确保稳定运行和良好体验。最后,通过提交审核、上线运营和推广策略,吸引更多用户和商家入驻。
|
30天前
|
人工智能 小程序 搜索推荐
成功案例分享|使用AI运动识别插件+微搭,快速搭建AI美体运动小程序
今天给大家分享一个最近使用我们的“AI运动识别小程序插件”+“微搭”搭建小程序的经典案例。
成功案例分享|使用AI运动识别插件+微搭,快速搭建AI美体运动小程序
|
27天前
|
缓存 数据可视化 Serverless
微信小游戏 案例一 像素飞机
微信小游戏 案例一 像素飞机
18 2
|
27天前
|
JavaScript 小程序 前端开发
微信小程序 案例二 飞机大战
微信小程序 案例二 飞机大战
37 0
微信小程序 案例二 飞机大战
|
18天前
|
小程序 搜索推荐 前端开发
短剧小程序开发案例
首先,明确你的短剧平台的目标用户群体和他们的需求。比如,年轻用户可能更倾向于轻松、幽默的短剧内容,而家庭用户则可能更偏爱教育、亲子类的短剧。了解用户需求有助于你设计更符合他们口味的功能和界面
|
1月前
|
人工智能 小程序 Python
Python编程小案例——编一个事件提醒弹窗小程序
Python编程小案例——编一个事件提醒弹窗小程序
|
4月前
|
XML Java 数据格式
支付系统----微信支付20---创建案例项目--集成Mybatis-plus的补充,target下只有接口的编译文件,xml文件了,添加日志的写法
支付系统----微信支付20---创建案例项目--集成Mybatis-plus的补充,target下只有接口的编译文件,xml文件了,添加日志的写法
支付系统----微信支付16----创建案例项目-引入Swagger
支付系统----微信支付16----创建案例项目-引入Swagger
支付系统---微信支付14----创建案例项目---介绍,第二步引入Swagger,接口文档和测试页面生成工具,定义统一结果的目的是让结果变得更加规范,以上就是谷粒项目的几个过程
支付系统---微信支付14----创建案例项目---介绍,第二步引入Swagger,接口文档和测试页面生成工具,定义统一结果的目的是让结果变得更加规范,以上就是谷粒项目的几个过程
|
4月前
|
小程序
【微信小程序】实战案例 -- 向订阅用户发送消息(范例:报名提醒)
【微信小程序】实战案例 -- 向订阅用户发送消息(范例:报名提醒)
244 0