微信小程序课程表,微信小程序开发
目录
1.效果图:
2.准备工具:
3.下载代码
4.部署项目
1.打开微信小程序:
2.AppID查看方式:
3.拿出你的小手机扫码、
5.修改课程
6.项目发布
演示:
![](https://img-blog.csdnimg.cn/32833d8c9f7548e2b9e2436a7e2eb297.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5LiA5Liq54Ot54ix57yW56iL55qE5bCP55m955m9,size_5,color_FFFFFF,t_70,g_se,x_16)
1.效果图:
![](https://img-blog.csdnimg.cn/5b12df284caa485fb4e8789e855b48df.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5LiA5Liq54Ot54ix57yW56iL55qE5bCP55m955m9,size_7,color_FFFFFF,t_70,g_se,x_16) ![](https://img-blog.csdnimg.cn/618503c21fd84684ab10af2a172d9bf2.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5LiA5Liq54Ot54ix57yW56iL55qE5bCP55m955m9,size_7,color_FFFFFF,t_70,g_se,x_16)
2.准备工具:
微信开发者工具:微信小程序开发网站
根据自己电脑系统下载对应的版本:
![](https://img-blog.csdnimg.cn/0396b4ab57f241bc9ef88f2ad4f666d1.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5LiA5Liq54Ot54ix57yW56iL55qE5bCP55m955m9,size_14,color_FFFFFF,t_70,g_se,x_16)
3.下载代码
我用夸克网盘分享了「课程表」 链接:https://pan.quark.cn/s/25f7c8da71e8 提取码:nLtn
4.部署项目
首先 先把压缩包解压,记住这个路径。
1.打开微信小程序:
![](https://img-blog.csdnimg.cn/aa4973c4a9ef40379f99b68f082ac15d.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5LiA5Liq54Ot54ix57yW56iL55qE5bCP55m955m9,size_19,color_FFFFFF,t_70,g_se,x_16)
点击黑框:
![](https://img-blog.csdnimg.cn/47449b6f07a24fe5b9cfaaf0ce9e5a5d.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5LiA5Liq54Ot54ix57yW56iL55qE5bCP55m955m9,size_19,color_FFFFFF,t_70,g_se,x_16)
注意看黑框所包围的东西 这些是重点
这里的目录:就是你刚刚解压文件的路径
后端服务选择腾讯云开发(wx小程序会免费给你送服务器)
![](https://img-blog.csdnimg.cn/517e746a9ba744589d8c317945636041.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5LiA5Liq54Ot54ix57yW56iL55qE5bCP55m955m9,size_19,color_FFFFFF,t_70,g_se,x_16)
2.AppID查看方式:
1.百度搜索如图文字:
![](https://img-blog.csdnimg.cn/fbe3b59aaf05423fba85256945e1eeee.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5LiA5Liq54Ot54ix57yW56iL55qE5bCP55m955m9,size_16,color_FFFFFF,t_70,g_se,x_16)
3.拿出你的小手机扫码、
没账号就注册一个(记住是小程序账号)
![](https://img-blog.csdnimg.cn/c5be5ff2daa64451b89a2f7cdf57664e.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5LiA5Liq54Ot54ix57yW56iL55qE5bCP55m955m9,size_20,color_FFFFFF,t_70,g_se,x_16)
3.登录成功后,在开发设置这里就能找到ID了
![](https://img-blog.csdnimg.cn/7d767bcaac8f479484023093a58880a9.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5LiA5Liq54Ot54ix57yW56iL55qE5bCP55m955m9,size_20,color_FFFFFF,t_70,g_se,x_16)
5.修改课程
将课程改成属于自己班的:
找到tsj.js并点击打开
![](https://img-blog.csdnimg.cn/756174946841499eab5d5e682ac210ce.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5LiA5Liq54Ot54ix57yW56iL55qE5bCP55m955m9,size_5,color_FFFFFF,t_70,g_se,x_16)
![](https://img-blog.csdnimg.cn/6082cc04b54e469b8b435abea730604f.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5LiA5Liq54Ot54ix57yW56iL55qE5bCP55m955m9,size_8,color_FFFFFF,t_70,g_se,x_16)
黑框是课程时间,对应的代码是:
你们上课时间是多少,就把数字改成多少
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:教室的号码
![](https://img-blog.csdnimg.cn/456ede2038f04ae294a32fb08bc9aa6d.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5LiA5Liq54Ot54ix57yW56iL55qE5bCP55m955m9,size_7,color_FFFFFF,t_70,g_se,x_16)
[ //第一周
{ "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" },],
修改标题:
如图黑框的就是标题
![](https://img-blog.csdnimg.cn/798f932354f4441f829858223ab166cf.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5LiA5Liq54Ot54ix57yW56iL55qE5bCP55m955m9,size_7,color_FFFFFF,t_70,g_se,x_16)
打开这个文件:
![](https://img-blog.csdnimg.cn/d7f4867774af4b9397adc087a8f2bc12.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5LiA5Liq54Ot54ix57yW56iL55qE5bCP55m955m9,size_5,color_FFFFFF,t_70,g_se,x_16)
需要啥内容改一下就行:
![](https://img-blog.csdnimg.cn/eb5dd57586fe47c6aa60af8d7c8394d2.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5LiA5Liq54Ot54ix57yW56iL55qE5bCP55m955m9,size_11,color_FFFFFF,t_70,g_se,x_16)
修改下图的名称:
![](https://img-blog.csdnimg.cn/216adf224cde46fca79b1cfa4a0e7b3a.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5LiA5Liq54Ot54ix57yW56iL55qE5bCP55m955m9,size_7,color_FFFFFF,t_70,g_se,x_16)
找到黑框的的内容 改一下就行![](https://img-blog.csdnimg.cn/c4c1923fc0584eb6af4807dfcb24c4a6.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5LiA5Liq54Ot54ix57yW56iL55qE5bCP55m955m9,size_20,color_FFFFFF,t_70,g_se,x_16)
6.项目发布
点击上传按钮:
![](https://img-blog.csdnimg.cn/d96d6eb9e555430e8ab1ae168da59731.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5LiA5Liq54Ot54ix57yW56iL55qE5bCP55m955m9,size_20,color_FFFFFF,t_70,g_se,x_16)
点击上传即可:
![](https://img-blog.csdnimg.cn/74eaf8b9f2de4a28ad8ad92946a9a080.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5LiA5Liq54Ot54ix57yW56iL55qE5bCP55m955m9,size_14,color_FFFFFF,t_70,g_se,x_16)
打开微信小程序网站:
登录好后,打开版本管理
![](https://img-blog.csdnimg.cn/0c614be513234b859f2bf1ad5f3a8618.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5LiA5Liq54Ot54ix57yW56iL55qE5bCP55m955m9,size_7,color_FFFFFF,t_70,g_se,x_16)
点击提交审核 ![](https://img-blog.csdnimg.cn/e32698f1c6bb4b4aaccb7782dfbdad7d.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5LiA5Liq54Ot54ix57yW56iL55qE5bCP55m955m9,size_20,color_FFFFFF,t_70,g_se,x_16)
审核成功后点击发布就行
成品如图:
![](https://img-blog.csdnimg.cn/c79076036a8e4b79bf5adba5dca9e724.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5LiA5Liq54Ot54ix57yW56iL55qE5bCP55m955m9,size_20,color_FFFFFF,t_70,g_se,x_16)
如果内容有错误,麻烦大家指出一下,有疑问的可以评论区留言(我会解答)。
觉得挺好的可以点赞和关注,谢谢大家
|