├── pages ├── mine │ ├── mine.json │ ├── mine.wxml │ ├── mine.wxss │ └── mine.js ├── detail │ ├── detail.json │ ├── detail.wxml │ ├── detail.wxss │ └── detail.js └── index │ ├── index.json │ ├── index.js │ ├── index.wxml │ └── index.wxss ├── images ├── 加载中.gif ├── 加载中.png ├── 已收藏.png ├── 未收藏.png ├── .DS_Store ├── 我的已选中.png ├── 我的未选中.png ├── 课程封面01.png ├── 课程封面02.png ├── 课程封面03.png ├── 课程封面04.png ├── 课程封面05.png ├── 首页已选中.png ├── 首页未选中.png ├── 默认头像.png └── avatar01.png ├── components └── cloudTipModal │ ├── index.json │ ├── index.wxml │ ├── index.js │ └── index.wxss ├── envList.js ├── sitemap.json ├── app.wxss ├── app.json ├── README.md └── app.js /pages/mine/mine.json: -------------------------------------------------------------------------------- 1 | { 2 | "navigationBarTitleText": "个人中心" 3 | } 4 | -------------------------------------------------------------------------------- /pages/detail/detail.json: -------------------------------------------------------------------------------- 1 | { 2 | "navigationBarTitleText": "课程详情" 3 | } 4 | -------------------------------------------------------------------------------- /pages/index/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "navigationBarTitleText": "AI工具课程" 3 | } 4 | -------------------------------------------------------------------------------- /images/加载中.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xw-an/WechatCourse/HEAD/images/加载中.gif -------------------------------------------------------------------------------- /images/加载中.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xw-an/WechatCourse/HEAD/images/加载中.png -------------------------------------------------------------------------------- /images/已收藏.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xw-an/WechatCourse/HEAD/images/已收藏.png -------------------------------------------------------------------------------- /images/未收藏.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xw-an/WechatCourse/HEAD/images/未收藏.png -------------------------------------------------------------------------------- /images/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xw-an/WechatCourse/HEAD/images/.DS_Store -------------------------------------------------------------------------------- /images/我的已选中.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xw-an/WechatCourse/HEAD/images/我的已选中.png -------------------------------------------------------------------------------- /images/我的未选中.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xw-an/WechatCourse/HEAD/images/我的未选中.png -------------------------------------------------------------------------------- /images/课程封面01.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xw-an/WechatCourse/HEAD/images/课程封面01.png -------------------------------------------------------------------------------- /images/课程封面02.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xw-an/WechatCourse/HEAD/images/课程封面02.png -------------------------------------------------------------------------------- /images/课程封面03.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xw-an/WechatCourse/HEAD/images/课程封面03.png -------------------------------------------------------------------------------- /images/课程封面04.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xw-an/WechatCourse/HEAD/images/课程封面04.png -------------------------------------------------------------------------------- /images/课程封面05.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xw-an/WechatCourse/HEAD/images/课程封面05.png -------------------------------------------------------------------------------- /images/首页已选中.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xw-an/WechatCourse/HEAD/images/首页已选中.png -------------------------------------------------------------------------------- /images/首页未选中.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xw-an/WechatCourse/HEAD/images/首页未选中.png -------------------------------------------------------------------------------- /images/默认头像.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xw-an/WechatCourse/HEAD/images/默认头像.png -------------------------------------------------------------------------------- /images/avatar01.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xw-an/WechatCourse/HEAD/images/avatar01.png -------------------------------------------------------------------------------- /components/cloudTipModal/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "usingComponents": {}, 3 | "component": true 4 | } -------------------------------------------------------------------------------- /envList.js: -------------------------------------------------------------------------------- 1 | const envList = []; 2 | const isMac = false; 3 | module.exports = { 4 | envList, 5 | isMac 6 | }; 7 | -------------------------------------------------------------------------------- /sitemap.json: -------------------------------------------------------------------------------- 1 | { 2 | "desc": "关于本文件的更多信息，请参考文档 https://developers.weixin.qq.com/miniprogram/dev/framework/sitemap.html", 3 | "rules": [{ 4 | "action": "allow", 5 | "page": "*" 6 | }] 7 | } -------------------------------------------------------------------------------- /app.wxss: -------------------------------------------------------------------------------- 1 | /**app.wxss**/ 2 | .container { 3 | display: flex; 4 | flex-direction: column; 5 | align-items: center; 6 | box-sizing: border-box; 7 | } 8 | 9 | button { 10 | background: initial; 11 | } 12 | 13 | button:focus{ 14 | outline: 0; 15 | } 16 | 17 | button::after{ 18 | border: none; 19 | } 20 | 21 | page { 22 | background: #f6f6f6; 23 | display: flex; 24 | flex-direction: column; 25 | justify-content: flex-start; 26 | } -------------------------------------------------------------------------------- /components/cloudTipModal/index.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 体验前需部署云资源 6 | 请开启调试器进入终端窗口，复制并运行以下命令 7 | 8 | {{tipText}} 9 | 复制 10 | 11 | 已执行命令 12 | 13 | 14 | -------------------------------------------------------------------------------- /components/cloudTipModal/index.js: -------------------------------------------------------------------------------- 1 | // miniprogram/components/cloudTipModal/index.js 2 | const { isMac } = require('../../envList.js'); 3 | 4 | Component({ 5 | 6 | /** 7 | * 页面的初始数据 8 | */ 9 | data: { 10 | showUploadTip: false, 11 | tipText: isMac ? 'sh ./uploadCloudFunction.sh' : './uploadCloudFunction.bat' 12 | }, 13 | properties: { 14 | showUploadTipProps: Boolean 15 | }, 16 | observers: { 17 | showUploadTipProps: function(showUploadTipProps) { 18 | this.setData({ 19 | showUploadTip: showUploadTipProps 20 | }); 21 | } 22 | }, 23 | methods: { 24 | onChangeShowUploadTip() { 25 | this.setData({ 26 | showUploadTip: !this.data.showUploadTip 27 | }); 28 | }, 29 | 30 | copyShell() { 31 | wx.setClipboardData({ 32 | data: this.data.tipText, 33 | }); 34 | }, 35 | } 36 | 37 | }); 38 | -------------------------------------------------------------------------------- /app.json: -------------------------------------------------------------------------------- 1 | { 2 | "pages": [ 3 | "pages/index/index", 4 | "pages/detail/detail", 5 | "pages/mine/mine" 6 | ], 7 | "window": { 8 | "backgroundColor": "#F6F6F6", 9 | "backgroundTextStyle": "light", 10 | "navigationBarBackgroundColor": "#F6F6F6", 11 | "navigationBarTitleText": "智慧AI谷", 12 | "navigationBarTextStyle": "black" 13 | }, 14 | "sitemapLocation": "sitemap.json", 15 | "style": "v2", 16 | "networkTimeout": { 17 | "request": 10000, 18 | "downloadFile": 10000 19 | }, 20 | "tabBar": { 21 | "color": "#999999", 22 | "selectedColor": "#7cba59", 23 | "backgroundColor": "#FFFFFF", 24 | "borderStyle": "black", 25 | "list": [ 26 | { 27 | "pagePath": "pages/index/index", 28 | "text": "首页", 29 | "iconPath": "images/首页未选中.png", 30 | "selectedIconPath": "images/首页已选中.png" 31 | }, 32 | { 33 | "pagePath": "pages/mine/mine", 34 | "text": "我的", 35 | "iconPath": "images/我的未选中.png", 36 | "selectedIconPath": "images/我的已选中.png" 37 | } 38 | ] 39 | } 40 | } -------------------------------------------------------------------------------- /components/cloudTipModal/index.wxss: -------------------------------------------------------------------------------- 1 | .install_tip_back { 2 | position: fixed; 3 | top: 0; 4 | right: 0; 5 | bottom: 0; 6 | left: 0; 7 | background-color: rgba(0,0,0,0.4); 8 | z-index: 1; 9 | } 10 | 11 | .install_tip_detail { 12 | position: fixed; 13 | background-color: white; 14 | right: 0; 15 | bottom: 0; 16 | left: 0; 17 | top: 60%; 18 | border-radius: 40rpx 40rpx 0 0; 19 | padding: 50rpx; 20 | z-index: 9; 21 | } 22 | 23 | .install_tip_detail_title { 24 | font-weight: 400; 25 | font-size: 40rpx; 26 | text-align: center; 27 | } 28 | 29 | .install_tip_detail_tip { 30 | font-size: 25rpx; 31 | color: rgba(0,0,0,0.4); 32 | margin-top: 20rpx; 33 | text-align: center; 34 | } 35 | 36 | .install_tip_detail_shell { 37 | margin: 70rpx 0; 38 | display: flex; 39 | justify-content: center; 40 | } 41 | 42 | .install_tip_detail_copy { 43 | color: #546488; 44 | margin-left: 10rpx; 45 | } 46 | 47 | .install_tip_detail_button { 48 | color: #07C160; 49 | font-weight: 500; 50 | background-color: rgba(0,0,0,0.1); 51 | width: 60%; 52 | text-align: center; 53 | height: 90rpx; 54 | line-height: 90rpx; 55 | border-radius: 10rpx; 56 | margin: 0 auto; 57 | } -------------------------------------------------------------------------------- /pages/mine/mine.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | {{userInfo.nickName || '游客身份'}} 4 | 5 | 退出登录 6 | 7 | 8 | 17 | 18 | 19 | 我的收藏 20 | 21 | 22 | 23 | {{item.title}} 24 | 25 | 26 | 暂无收藏课程，快去首页寻找喜欢的课程吧~ 27 | 28 | 29 | -------------------------------------------------------------------------------- /pages/index/index.js: -------------------------------------------------------------------------------- 1 | // index.js (续) 2 | Page({ 3 | data: { 4 | loading: true, // 是否显示加载中状态 5 | activeTab: '绘图类', 6 | categories: [ 7 | { 8 | id: "1", 9 | name: "绘图类", 10 | }, 11 | { 12 | id: "2", 13 | name: "编程类", 14 | } 15 | ], 16 | videoList: [], 17 | searchResult: [], // 搜索结果数据 18 | keyword: '' // 搜索关键字 19 | }, 20 | 21 | onLoad() { 22 | // 轮询间隔时间（毫秒） 23 | const interval = 100; 24 | // 定时器ID 25 | let timerId = null; 26 | // 定义轮询函数 27 | const that = this; 28 | const pollStorage = () => { 29 | wx.getStorage({ 30 | key: 'courseList', 31 | success: res => { 32 | const courseList = res.data; 33 | if (courseList) { 34 | clearInterval(timerId); 35 | // 获取到数据后，执行相应的逻辑 36 | that.setData({ 37 | videoList: res.data, // 获取课程列表数据 38 | loading: false 39 | }) 40 | } 41 | }, 42 | fail: () => { 43 | // 如果获取失败，继续轮询 44 | console.log('未获取到 courseList 数据，继续轮询...'); 45 | } 46 | }); 47 | }; 48 | // 开始轮询 49 | timerId = setInterval(pollStorage, interval); 50 | }, 51 | navigateToVideoDetail(event) { 52 | const videoId = event.currentTarget.dataset.videoId; 53 | wx.navigateTo({ 54 | url: `/pages/detail/detail?courseId=${videoId}`, // 跳转到视频详情页面并传递视频 ID 55 | }); 56 | }, 57 | switchTab(event) { 58 | const category = event.currentTarget.dataset.category; 59 | this.setData({ 60 | activeTab: category 61 | }); 62 | }, 63 | onSearchInput(event) { 64 | const keyword = event.detail.value; // 获取搜索框输入的关键字 65 | this.setData({ 66 | keyword: keyword, // 更新搜索关键字 67 | }); 68 | this.updateSearchResult(); // 更新搜索结果数据 69 | }, 70 | updateSearchResult() { 71 | const keyword = this.data.keyword; 72 | // 根据关键字在视频列表数据中进行搜索 73 | const searchResult = this.data.videoList.filter(video => 74 | video.title.includes(keyword) || video.description.includes(keyword) 75 | ); 76 | console.log(searchResult) 77 | this.setData({ 78 | searchResult: searchResult, // 更新搜索结果数据 79 | }); 80 | }, 81 | // 监听页面显示事件 82 | onShow() { 83 | const videoList = wx.getStorageSync('courseList') || []; 84 | this.setData({ 85 | videoList: videoList, // 更新搜索结果数据 86 | }) 87 | } 88 | }) 89 | -------------------------------------------------------------------------------- /pages/index/index.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 正在努力加载中... 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | {{item.name}} 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | {{item.title}} 30 | {{item.description}} 31 | 32 | {{item.applyCount}}人报名 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | {{item.title}} 45 | {{item.description}} 46 | 47 | {{item.applyCount}}人报名 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | -------------------------------------------------------------------------------- /pages/mine/mine.wxss: -------------------------------------------------------------------------------- 1 | .container { 2 | display: flex; 3 | flex-direction: column; 4 | align-items: center; 5 | justify-content: center; 6 | } 7 | 8 | .avatar { 9 | width: 60px; 10 | height: 60px; 11 | border-radius: 50%; 12 | margin-top: 10px; 13 | } 14 | 15 | .nickname { 16 | margin-top:10px; 17 | font-size: 13px; 18 | color: #333; 19 | } 20 | 21 | .login-btn { 22 | display: flex; 23 | justify-content: center; 24 | align-items: center; 25 | padding: 8px 16px; 26 | background-color: #7cba59; 27 | color: #FFFFFF; 28 | border-radius: 20px; 29 | margin-top: 20px; 30 | font-size: 14px; 31 | } 32 | 33 | .logout-btn { 34 | font-size: 14px; 35 | color: #8a8a8a; 36 | /* text-decoration: underline; */ 37 | margin-top: 10px; 38 | } 39 | 40 | .card { 41 | margin-top:20px; 42 | padding: 10px; 43 | border-top: 1rpx solid #ccc; 44 | /* background-color: #fff; */ 45 | /* box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); */ 46 | /* border-radius: 5px; */ 47 | width: 100%; 48 | } 49 | .card-title { 50 | font-size: 14px; 51 | margin-bottom: 10px; 52 | margin-left: 10px; 53 | } 54 | .collect-list { 55 | display: flex; 56 | flex-wrap: wrap; 57 | justify-content: flex-start; 58 | margin-left: 10px; 59 | } 60 | .collect-item { 61 | width: 33.33%; 62 | padding-right: 10px; 63 | box-sizing: border-box; 64 | display: flex; 65 | flex-direction: column; 66 | align-items: center; 67 | } 68 | .item-cover { 69 | width: 100%; 70 | height: 90px; 71 | border-radius: 6px; 72 | object-fit: cover; 73 | } 74 | .item-title { 75 | font-size: 12px; 76 | text-align: center; 77 | display: -webkit-box; 78 | -webkit-line-clamp: 2; 79 | -webkit-box-orient: vertical; 80 | overflow: hidden; 81 | text-overflow: ellipsis; 82 | } 83 | 84 | .no-collect { 85 | margin-top: 20px; 86 | margin-left: 20px; 87 | text-align: center; 88 | color: #999999; 89 | font-size: 14px; 90 | } 91 | 92 | .go-home { 93 | color: #7cba59; 94 | text-decoration: none; 95 | } 96 | 97 | /* 弹层样式 */ 98 | .modal { 99 | position: fixed; 100 | top: 0; 101 | left: 0; 102 | right: 0; 103 | bottom: 0; 104 | background-color: rgba(0, 0, 0, 0.5); 105 | display: flex; 106 | justify-content: center; 107 | align-items: center; 108 | z-index: 999; 109 | } 110 | 111 | .modal-content { 112 | width: 500rpx; 113 | height: 500rpx; 114 | padding: 20rpx; 115 | background-color: #fff; 116 | border-radius: 8rpx; 117 | text-align: center; 118 | border-radius: 5px; 119 | } 120 | .btn-login { 121 | display: flex; 122 | justify-content: center; 123 | align-items: center; 124 | padding: 8px 16px; 125 | background-color: #7cba59; 126 | color: #FFFFFF; 127 | border-radius: 20px; 128 | margin-top: 20px; 129 | font-size: 14px; 130 | } 131 | -------------------------------------------------------------------------------- /pages/detail/detail.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | {{course.title}} 18 | 19 | 25 | 26 | {{course.description}} 27 | 28 | 29 | 开课时间 30 | 31 | {{course.estimatedDate}} 32 | {{course.estimatedDuration}}分钟 33 | 34 | 35 | 36 | 37 | 38 | 39 | {{course.lecturer.name}} 40 | {{course.lecturer.department}} 41 | 42 | 43 | 44 | 45 | 课程章节介绍 46 | 47 | 48 | {{item.title}} 49 | {{item.description}} 50 | 51 | 52 | 53 | 54 | 55 | 56 | {{course.applyCount}} 57 | 人已报名 58 | 59 | 60 | 61 | 62 | 63 | 72 | -------------------------------------------------------------------------------- /pages/index/index.wxss: -------------------------------------------------------------------------------- 1 | /* index.wxss */ 2 | /* 遮罩层样式 */ 3 | .mask { 4 | position: fixed; 5 | top: 0; 6 | left: 0; 7 | width: 100%; 8 | height: 100%; 9 | background-color: rgba(8, 8, 8, 0.31); 10 | display: flex; 11 | align-items: center; 12 | justify-content: center; 13 | z-index: 9999; 14 | } 15 | 16 | /* 加载容器样式 */ 17 | .loading-container { 18 | display: flex; 19 | align-items: center; 20 | justify-content: center; 21 | } 22 | 23 | /* 加载动画样式 */ 24 | .loading-icon { 25 | width: 50px; 26 | height: 50px; 27 | } 28 | 29 | /* 加载文本样式 */ 30 | .loading-text { 31 | margin-left: 10px; 32 | color: #333; /* 字体颜色修改为深色 */ 33 | font-size: 14px; 34 | } 35 | 36 | .container { 37 | padding: 10px; 38 | } 39 | 40 | .header { 41 | display: flex; 42 | align-items: center; 43 | justify-content: space-between; 44 | margin-bottom: 10px; 45 | width: 100%; 46 | } 47 | .search { 48 | width: 100%; 49 | height: 18px; 50 | border: 1px solid #cccccc; 51 | border-radius: 15px; 52 | padding: 5px 10px; 53 | font-size: 13px; 54 | } 55 | 56 | .category-nav { 57 | display: flex; 58 | justify-content: center; 59 | align-items: center; 60 | background-color: #f5f5f5; 61 | height: 100rpx; 62 | width: 100%; 63 | } 64 | 65 | .category-item { 66 | flex: 1; 67 | display: flex; 68 | justify-content: center; 69 | align-items: center; 70 | position: relative; 71 | } 72 | 73 | .category-text { 74 | font-size: 32rpx; 75 | color: #333333; 76 | transition: color 0.3s; 77 | } 78 | 79 | .category-text.active { 80 | color: #07c160; 81 | } 82 | 83 | .category-text.active::after { 84 | content: ""; 85 | position: absolute; 86 | bottom: 0; 87 | left: 50%; 88 | transform: translateX(-50%); 89 | width: 28%; 90 | height: 2rpx; 91 | background-color: #07c160; 92 | } 93 | 94 | .video-list { 95 | display: flex; 96 | flex-direction: column; 97 | gap: 20px; /* 调整视频项之间的间距 */ 98 | width: 100%; 99 | } 100 | 101 | .video-card { 102 | display: flex; 103 | align-items: flex-start; /* 图片和文案顶部对齐 */ 104 | justify-content: center; 105 | margin-bottom: 15rpx; 106 | width: 100%; 107 | } 108 | 109 | .video-cover { 110 | width: 35%; 111 | height: 95px; 112 | object-fit: cover; 113 | border-radius: 10px; 114 | } 115 | 116 | .video-info { 117 | width: 65%; 118 | flex-grow: 1; 119 | margin-left: 10px; 120 | } 121 | 122 | .video-title { 123 | font-size: 28rpx; 124 | font-weight: bold; 125 | margin-bottom: 10rpx; 126 | } 127 | 128 | .video-description { 129 | font-size: 24rpx; 130 | color: #666666; 131 | margin-bottom: 10rpx; 132 | display: -webkit-box; 133 | -webkit-box-orient: vertical; 134 | -webkit-line-clamp: 2; 135 | overflow: hidden; 136 | text-overflow: ellipsis; 137 | } 138 | 139 | .video-stats { 140 | display: flex; 141 | align-items: center; 142 | margin-top: 10rpx; 143 | } 144 | 145 | .apply-count { 146 | font-size: 24rpx; 147 | color: #999999; 148 | margin-right: 10rpx; 149 | flex-grow: 1; 150 | white-space: nowrap; 151 | overflow: hidden; 152 | text-overflow: ellipsis; 153 | } 154 | 155 | .like-button { 156 | font-size: 24rpx; 157 | color: #999999; 158 | background-color: transparent; 159 | border: none; 160 | padding: 0; 161 | outline: none; 162 | } 163 | 164 | 165 | -------------------------------------------------------------------------------- /pages/detail/detail.wxss: -------------------------------------------------------------------------------- 1 | /* pages/detail/detail.wxss */ 2 | .course-detail { 3 | height: 100vh; 4 | } 5 | .scroll-view { 6 | height: calc(100vh - 100rpx); /* 设置 scroll-view 的高度，留出底部的底栏高度，单位为rpx */ 7 | } 8 | .swiper-container { 9 | height: 700rpx; /* 调整图片轮播的高度，单位为rpx */ 10 | } 11 | 12 | .swiper-video, 13 | .swiper-image { 14 | width: 100%; 15 | height: 100%; 16 | object-fit: cover; 17 | } 18 | 19 | .course-title-container { 20 | display: flex; 21 | align-items: center; 22 | width: 100%; 23 | margin-top: 5px; 24 | } 25 | 26 | .course-title { 27 | flex-grow: 1; 28 | font-size: 18px; 29 | font-weight: bold; 30 | white-space: nowrap; 31 | overflow: hidden; 32 | text-overflow: ellipsis; 33 | margin-left: 20px; 34 | width: 75%; 35 | } 36 | 37 | .like-container { 38 | display: flex; 39 | align-items: center; 40 | margin-left: 10px; 41 | width: 25%; 42 | } 43 | 44 | .like-button { 45 | display: flex; 46 | align-items: center; 47 | justify-content: center; 48 | } 49 | 50 | .like-icon { 51 | width: 16px; 52 | height: 16px; 53 | margin-right: 5px; 54 | } 55 | 56 | .like-count { 57 | padding-top:1px; 58 | font-size: 13px; 59 | } 60 | 61 | .course-description { 62 | font-size: 13px; 63 | color: #666; 64 | margin-bottom: 10px; 65 | margin-left: 20px; 66 | margin-right: 5px; 67 | margin-top: 5px; 68 | } 69 | 70 | .time-card { 71 | background-color: #fff; 72 | box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); 73 | border-radius: 5px; 74 | padding: 20px; 75 | margin-bottom: 20px; 76 | display: flex; 77 | align-items: center; 78 | } 79 | 80 | .time-card-title { 81 | font-size: 15px; 82 | font-weight: bold; 83 | color: #666; 84 | flex-grow: 1; 85 | } 86 | 87 | .time-card-content { 88 | display: flex; 89 | flex-direction: row; 90 | align-items: center; 91 | } 92 | 93 | .time-estimated-date { 94 | font-size: 14px; 95 | color: #666; 96 | margin-right: 10px; 97 | } 98 | 99 | .time-estimated-duration { 100 | font-size: 14px; 101 | color: #666; 102 | } 103 | 104 | .lecturer-card { 105 | display: flex; 106 | align-items: center; 107 | padding: 20px; 108 | background-color: #fff; 109 | box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); 110 | border-radius: 5px; 111 | } 112 | .lecturer-avatar { 113 | width: 75px; 114 | height: 70px; 115 | border-radius: 50%; 116 | } 117 | .lecturer-info { 118 | margin-left: 20px; 119 | } 120 | .lecturer-name { 121 | font-size: 18px; 122 | font-weight: bold; 123 | color: #333; 124 | white-space: nowrap; 125 | overflow: hidden; 126 | text-overflow: ellipsis; 127 | } 128 | .lecturer-department { 129 | margin-top: 5px; 130 | font-size: 14px; 131 | color: #999; 132 | white-space: nowrap; 133 | overflow: hidden; 134 | text-overflow: ellipsis; 135 | } 136 | .chapter-card { 137 | background-color: #fff; 138 | border-radius: 8px; 139 | box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); 140 | padding: 20px; 141 | margin-bottom: 20px; 142 | } 143 | .chapter-card-title { 144 | font-size: 18px; 145 | font-weight: bold; 146 | color: #333; 147 | margin-bottom: 10px; 148 | } 149 | .chapter-card-content{ 150 | font-size: 14px; 151 | color: #666; 152 | } 153 | .chapter { 154 | margin-bottom: 20px; 155 | } 156 | .chapter-title { 157 | font-size: 16px; 158 | font-weight: bold; 159 | color: #333; 160 | } 161 | 162 | .chapter-description { 163 | font-size: 14px; 164 | color: #666; 165 | } 166 | 167 | 168 | .footer { 169 | position: fixed; 170 | bottom: 0; 171 | left: 0; 172 | width: 100%; 173 | padding: 10px; 174 | background-color: #fff; 175 | border-top: 1px solid #ccc; 176 | display: flex; 177 | align-items: center; 178 | justify-content: space-between; 179 | height: 110rpx; 180 | } 181 | 182 | .enroll-info { 183 | display: flex; 184 | align-items: center; 185 | margin-left: 10px; 186 | margin-bottom: 10px; 187 | } 188 | 189 | .enroll-count { 190 | font-size: 14px; 191 | color: #65c466; 192 | margin-right: 5px; 193 | } 194 | 195 | .enroll-label { 196 | font-size: 14px; 197 | color: #999; 198 | } 199 | 200 | .enroll-button { 201 | display: block; 202 | /* padding: 10px 10px; */ 203 | margin-bottom: 10px; 204 | background-color: #65c466; 205 | color: #fff; 206 | font-size: 16px; 207 | text-align: center; 208 | border-radius: 20px; 209 | } 210 | 211 | /* 弹层样式 */ 212 | .modal { 213 | position: fixed; 214 | top: 0; 215 | left: 0; 216 | right: 0; 217 | bottom: 0; 218 | background-color: rgba(0, 0, 0, 0.5); 219 | display: flex; 220 | justify-content: center; 221 | align-items: center; 222 | z-index: 999; 223 | } 224 | 225 | .modal-content { 226 | width: 500rpx; 227 | height: 500rpx; 228 | padding: 20rpx; 229 | background-color: #fff; 230 | border-radius: 8rpx; 231 | text-align: center; 232 | border-radius: 5px; 233 | } 234 | .btn-login { 235 | display: flex; 236 | justify-content: center; 237 | align-items: center; 238 | padding: 8px 16px; 239 | background-color: #7cba59; 240 | color: #FFFFFF; 241 | border-radius: 20px; 242 | margin-top: 20px; 243 | font-size: 14px; 244 | } 245 | .avatar { 246 | width: 60px; 247 | height: 60px; 248 | border-radius: 50%; 249 | margin-top: 10px; 250 | } 251 | 252 | .nickname { 253 | margin-top:10px; 254 | font-size: 13px; 255 | color: #333; 256 | } 257 | -------------------------------------------------------------------------------- /pages/mine/mine.js: -------------------------------------------------------------------------------- 1 | Page({ 2 | data: { 3 | isLogged: false, 4 | userInfo: {}, 5 | collectList: [], 6 | isShowModal: false, 7 | avatarUrl:'/images/默认头像.png', 8 | nickName: '' 9 | }, 10 | 11 | onLoad() { 12 | // 从本地存储中获取用户信息 13 | const userInfo = wx.getStorageSync('userInfo'); 14 | // console.log('获取userInfo',userInfo) 15 | if (userInfo) { 16 | this.setData({ 17 | isLogged: true, 18 | userInfo, 19 | nickName: this.data.userInfo.nickName, 20 | avatarUrl: this.data.userInfo.avatarUrl 21 | }); 22 | // 获取收藏列表数据 23 | this.getCollectList(); 24 | } 25 | }, 26 | // 监听页面显示事件 27 | onShow() { 28 | // 从本地存储中获取用户信息 29 | const userInfo = wx.getStorageSync('userInfo'); 30 | if (userInfo) { 31 | this.setData({ 32 | isLogged: true, 33 | userInfo, 34 | nickName: this.data.userInfo.nickName, 35 | avatarUrl: this.data.userInfo.avatarUrl 36 | }); 37 | // 获取收藏列表数据 38 | this.getCollectList(); 39 | } 40 | }, 41 | // 点击课程，跳转到课程详情页 42 | gotoDetail(event) { 43 | const index = event.currentTarget.dataset.index; 44 | const courseId = this.data.collectList[index].id; 45 | wx.navigateTo({ 46 | url: '/pages/detail/detail?courseId=' + courseId, 47 | }); 48 | }, 49 | // 点击首页，跳转到首页 50 | goHome () { 51 | wx.switchTab({ 52 | url: '/pages/index/index', 53 | }); 54 | }, 55 | // 从storage中获取收藏列表数据 56 | getCollectList() { 57 | if(this.data.userInfo.nickName) { 58 | // 假设从服务器获取的收藏列表数据 59 | const likeCourses = wx.getStorageSync('likeCourses')||[]; 60 | // 从likeCourses中，根据nickName获取用户收藏的courseIds信息 61 | if(likeCourses){ 62 | likeCourses.forEach(element => { 63 | if(element.nickName === this.data.userInfo.nickName){ 64 | this.setData({ collectList: element.collectList }); 65 | return; 66 | } 67 | }); 68 | } 69 | } 70 | }, 71 | 72 | // 点击登录按钮，显示弹窗 73 | showLoginModal() { 74 | this.setData({ 75 | isShowModal: true, 76 | }); 77 | }, 78 | // 点击 modal 背景时关闭弹层 79 | handleModalTap(e) { 80 | if (e.target.dataset.modal === 'background') { 81 | this.setData({ 82 | isShowModal: false, 83 | }); 84 | } 85 | }, 86 | // 微信获取头像 87 | onChooseAvatar(e) { 88 | const { avatarUrl } = e.detail 89 | this.setData({ 90 | avatarUrl, 91 | }) 92 | }, 93 | // 微信登录获取头像和昵称 94 | login() { 95 | const nickName = this.data.nickName 96 | const avatarUrl= this.data.avatarUrl 97 | if (nickName) { 98 | // 从cos中获取所有注册用户数据 99 | const cosJsonUrl = '自己cos的服务域名地址/jsonData/loginUser.json'; 100 | wx.request({ 101 | url: cosJsonUrl, 102 | method: 'GET', 103 | success: (res) => { 104 | const userList = res.data; // 从响应中获取 JSON 数据 105 | // 根据昵称判断用户是否存在 106 | const user = userList.find(user => user.nickName === nickName); 107 | if (user) { 108 | // 用户已存在，更新用户信息 109 | this.setData({ 110 | avatarUrl: user.avatarUrl, 111 | userInfo: user, 112 | isShowModal: false, 113 | isLogged: true, 114 | }); 115 | // 保存用户信息到 Storage 中 116 | wx.setStorageSync('userInfo', user); 117 | console.log('登录成功') 118 | this.getCollectList() 119 | wx.showToast({ 120 | title: '登录成功', 121 | icon: 'success', 122 | }); 123 | } else { 124 | // 请求这个URL获取图片，上传到cos中 125 | console.log('头像的url',avatarUrl) 126 | this.uploadImageToCos(avatarUrl).then((cosFileUrl) => { 127 | // 文件上传成功，可以进行后续操作，如保存到用户信息中 128 | // 用户不存在，需要插入新的用户信息 129 | const newUser = { nickName, avatarUrl: cosFileUrl}; 130 | userList.push(newUser); 131 | // 更新 COS 的 JSON 文件 132 | wx.request({ 133 | url: cosJsonUrl, // 替换为 COS 的 JSON 文件的访问链接 134 | method: 'PUT', 135 | headers: { 136 | 'Content-Type': 'application/json', // 设置请求头中的 Content-Type 137 | }, 138 | data: JSON.stringify(userList), 139 | success: (res) => { 140 | // 更新用户信息 141 | this.setData({ 142 | avatarUrl: cosFileUrl, 143 | userInfo: newUser, 144 | isShowModal: false, 145 | isLogged: true, 146 | }); 147 | // 保存用户信息到 Storage 中 148 | wx.setStorageSync('userInfo', newUser); 149 | console.log('注册成功') 150 | wx.showToast({ 151 | title: '注册成功', 152 | icon: 'success', 153 | }); 154 | this.getCollectList() 155 | }, 156 | fail: (error) => { 157 | console.error('注册失败', error); 158 | } 159 | }); 160 | }) 161 | .catch((error) => { 162 | // 文件上传失败，处理错误情况 163 | console.log('文件上传失败', error); 164 | }); 165 | } 166 | }, 167 | fail: (error) => { 168 | console.log('获取数据失败', error); 169 | } 170 | }); 171 | }else{ 172 | wx.showToast({ 173 | title: '请输入昵称', 174 | icon: 'error', 175 | }); 176 | } 177 | }, 178 | 179 | uploadImageToCos(filePath) { 180 | return new Promise((resolve, reject) => { 181 | const fileName = `${Date.now()}_${Math.floor(Math.random() * 100000)}`; 182 | const cosFilePath = `/images/userAvatar/${fileName}.png`; // 设置图片的存储路径和文件名，这里假设上传的是 PNG 格式的图片 183 | wx.uploadFile({ 184 | url: '自己cos的服务域名地址', // 替换为您的上传接口 URL 185 | filePath: filePath, 186 | name: 'file', 187 | formData: { 188 | key: cosFilePath, // 上传到 COS 的文件路径 189 | }, 190 | success: (res) => { 191 | console.log(res) 192 | if (res.statusCode === 204) { 193 | const cosFileUrl = res.header.Location; // 上传成功后返回的 COS 文件 URL 194 | resolve(cosFileUrl); 195 | } else { 196 | reject(new Error('图片上传失败')); 197 | } 198 | }, 199 | fail: (error) => { 200 | reject(error); 201 | }, 202 | }); 203 | }); 204 | }, 205 | 206 | // 退出登录 207 | logout() { 208 | // 清除本地存储的用户信息 209 | wx.removeStorageSync('userInfo'); 210 | this.setData({ 211 | isLogged: false, 212 | userInfo: {}, 213 | collectList: [], 214 | avatarUrl:'/images/默认头像.png', 215 | nickName: '' 216 | }); 217 | }, 218 | 219 | // uploadAvatarToCos(tempUrl) { 220 | // return new Promise((resolve, reject) => { 221 | // wx.downloadFile({ 222 | // url: tempUrl, 223 | // success: (res) => { 224 | // console.log('下载到本地临时文件',res) 225 | // if (res.statusCode === 200) { 226 | // const tempFilePath = res.tempFilePath; 227 | // console.log('本地临时文件地址',tempFilePath) 228 | // this.uploadImageToCos(tempFilePath) 229 | // .then((cosFileUrl) => { 230 | // resolve(cosFileUrl); 231 | // }) 232 | // .catch((error) => { 233 | // reject(error); 234 | // }); 235 | // } else { 236 | // reject(new Error('头像下载失败')); 237 | // } 238 | // }, 239 | // fail: (error) => { 240 | // reject(error); 241 | // } 242 | // }); 243 | // }); 244 | // }, 245 | }); -------------------------------------------------------------------------------- /pages/detail/detail.js: -------------------------------------------------------------------------------- 1 | // pages/detail/detail.js 2 | Page({ 3 | /** 4 | * 页面的初始数据 5 | */ 6 | data: { 7 | autoplay: true, 8 | courseId: 0, 9 | course: null, // 课程数据 10 | courseList: [], 11 | liked: false, // 是否已收藏 12 | isShowModal: false, 13 | avatarUrl:'/images/默认头像.png', 14 | nickName: '' 15 | }, 16 | /** 17 | * 生命周期函数--监听页面加载 18 | */ 19 | onLoad(options) { 20 | // 从全局课程列表中获取当前课程的数据 21 | const courseId = options.courseId; 22 | const courseList = wx.getStorageSync('courseList') || []; 23 | const course = courseList.find((item) => { 24 | return item.id === Number(courseId); 25 | }); 26 | this.setData({ 27 | course: course, 28 | courseList: courseList, 29 | courseId: Number(courseId), 30 | nickName: wx.getStorageSync('userInfo').nickName, 31 | avatarUrl: wx.getStorageSync('userInfo').avatarUrl 32 | }); 33 | // 判断当前用户是否已经收藏过该课程 34 | const likeCourses = wx.getStorageSync('likeCourses') || []; 35 | if(this.data.nickName){ 36 | if (likeCourses) { 37 | likeCourses.forEach(element => { 38 | if(element.nickName === this.data.nickName){ 39 | element.collectList.forEach(item => { 40 | if(item.id === Number(this.data.courseId)){ 41 | this.setData({liked:true}) 42 | return 43 | } 44 | }) 45 | } 46 | }); 47 | } 48 | }else { 49 | // 未登录状态下，不展示收藏功能按钮 50 | } 51 | }, 52 | // 点击立即报名按钮的事件处理函数 53 | handleSignup() { 54 | let that = this 55 | let courseId = this.data.courseId; 56 | let course = this.data.course; 57 | let courseList = this.data.courseList; 58 | if (course) { 59 | // 判断当前的userInfo中是否存在数据，如果有直接获取nickName 60 | const userInfo = wx.getStorageSync('userInfo'); 61 | if (userInfo && userInfo.nickName) { 62 | this.setData({ 63 | nickName: userInfo.nickName, 64 | }) 65 | this.handleApply() 66 | } else { 67 | // 不存在，则弹出弹层自己登录 68 | this.setData({ 69 | isShowModal: true, 70 | }); 71 | } 72 | } 73 | }, 74 | 75 | // 收藏/取消收藏操作 76 | handleLikeButtonClick() { 77 | let course = this.data.course; 78 | let courseList = this.data.courseList; 79 | if (course && this.data.nickName) { 80 | this.data.liked?course.likes--:course.likes++; 81 | // 更新全局课程列表中对应课程的报名人数 82 | courseList.forEach((item)=> { 83 | if (item.id === course.id) { 84 | item.likes = course.likes; 85 | } 86 | }); 87 | this.setData({ 88 | course: course, 89 | courseList: courseList, 90 | }); 91 | // 根据收藏/取消收藏，将数据更新到storage的likeCourses中 92 | const likeCourses = wx.getStorageSync('likeCourses') || []; 93 | if (likeCourses&&likeCourses.length) { 94 | // 如果likeCourses不为空，则判断当前用户是否已经收藏过其他课程 95 | let flag = false 96 | likeCourses.forEach(element => { 97 | if (element.nickName === this.data.nickName){ 98 | flag = true 99 | if (this.data.liked) { 100 | // 如果已经收藏过，则取消收藏 101 | console.log('如果已经收藏过，则取消收藏') 102 | element.collectList.forEach((item,index) => { 103 | if(item.id === Number(this.data.courseId)){ 104 | element.collectList.splice(index,1) 105 | return 106 | } 107 | }) 108 | } else{ 109 | // 如果没有收藏过，则添加收藏 110 | element.collectList.push(this.data.course) 111 | console.log('如果没有收藏过，则添加收藏') 112 | } 113 | } 114 | }) 115 | if(!flag){ 116 | // 如果当前用户没有收藏过其他课程，则直接将当前课程添加到likeCourses中 117 | console.log('如果当前用户没有收藏过其他课程，则直接将当前课程添加到likeCourses中') 118 | likeCourses.push({nickName:this.data.nickName,collectList:[this.data.course]}) 119 | } 120 | } else { 121 | // 如果likeCourses为空，则直接将当前课程添加到likeCourses中 122 | console.log('如果likeCourses为空，则直接将当前课程添加到likeCourses中') 123 | likeCourses.push({nickName:this.data.nickName,collectList:[this.data.course]}) 124 | } 125 | //将数据保存到cos的文件中 126 | const cosJsonUrl = '自己cos的服务域名地址/jsonData/course.json'; 127 | // 先从cos中获取文件内容，然后再将最新内容更更新到cos中 128 | wx.request({ 129 | url: cosJsonUrl, 130 | method: 'GET', 131 | success: (res)=> { 132 | const jsonData = res.data; 133 | jsonData.likeInfo.likeCourses = likeCourses 134 | jsonData.likeInfo.likeCounts = courseList.map(course=>{return {"id":Number(course.id),"likeCount":course.likes}}) 135 | // 将最新数据jsonData更新到cos中 136 | wx.request({ 137 | url: '自己cos的服务域名地址/jsonData/course.json', // 替换为 COS 的 JSON 文件的访问链接 138 | method: 'PUT', 139 | headers: { 140 | 'Content-Type': 'application/json', // 设置请求头中的 Content-Type 141 | }, 142 | data: JSON.stringify(jsonData), 143 | success: (res) => { 144 | wx.setStorageSync('likeCourses', likeCourses); 145 | console.log('成功更新数据',likeCourses); 146 | wx.setStorageSync('courseList', courseList); 147 | // 更新数据并存储到本地 148 | this.setData({ 149 | liked: !this.data.liked 150 | }); 151 | }, 152 | fail: (error) => { 153 | console.error('Failed to update COS JSON file:', error); 154 | } 155 | }); 156 | }, 157 | fail: (error) => { 158 | console.error('Failed to fetch COS JSON file:', error); 159 | } 160 | }) 161 | } 162 | }, 163 | 164 | // 轮播视频播放功能 165 | onVideoPlay() { 166 | const videoContext = wx.createVideoContext('videoPlayer'); 167 | videoContext.play(); 168 | this.setData({ 169 | autoplay: false 170 | }); 171 | }, 172 | 173 | // 轮播视频暂停功能 174 | onVideoPause() { 175 | const videoContext = wx.createVideoContext('videoPlayer'); 176 | videoContext.pause(); 177 | this.setData({ 178 | autoplay: true 179 | }); 180 | }, 181 | 182 | // 点击 modal 背景时关闭弹层 183 | handleModalTap(e) { 184 | if (e.target.dataset.modal === 'background') { 185 | this.setData({ 186 | isShowModal: false, 187 | }); 188 | } 189 | }, 190 | // 微信获取头像 191 | onChooseAvatar(e) { 192 | const { avatarUrl } = e.detail 193 | this.setData({ 194 | avatarUrl, 195 | }) 196 | }, 197 | // 微信登录获取头像和昵称 198 | login() { 199 | const avatarUrl=this.data.avatarUrl 200 | const nickName = this.data.nickName 201 | if (nickName) { 202 | // 从cos中获取所有注册用户数据 203 | const cosJsonUrl = '自己cos的服务域名地址/jsonData/loginUser.json'; 204 | wx.request({ 205 | url: cosJsonUrl, 206 | method: 'GET', 207 | success: (res) => { 208 | const userList = res.data; // 从响应中获取 JSON 数据 209 | // 根据昵称判断用户是否存在 210 | const user = userList.find(user => user.nickName === nickName); 211 | if (user) { 212 | // 用户已存在，更新用户信息 213 | this.setData({ 214 | avatarUrl: user.avatarUrl, 215 | userInfo: user, 216 | isShowModal: false, 217 | isLogged: true, 218 | }); 219 | // 保存用户信息到 Storage 中 220 | wx.setStorageSync('userInfo', user); 221 | // wx.showToast({ 222 | // title: '登录成功', 223 | // icon: 'success', 224 | // }); 225 | } else { 226 | // 请求这个URL获取图片，上传到cos中 227 | console.log('头像的url',avatarUrl) 228 | this.uploadImageToCos(avatarUrl).then((cosFileUrl) => { 229 | // 文件上传成功，可以进行后续操作，如保存到用户信息中 230 | // 用户不存在，需要插入新的用户信息 231 | const newUser = { nickName, avatarUrl: cosFileUrl}; 232 | userList.push(newUser); 233 | // 更新 COS 的 JSON 文件 234 | wx.request({ 235 | url: cosJsonUrl, // 替换为 COS 的 JSON 文件的访问链接 236 | method: 'PUT', 237 | headers: { 238 | 'Content-Type': 'application/json', // 设置请求头中的 Content-Type 239 | }, 240 | data: JSON.stringify(userList), 241 | success: (res) => { 242 | // 更新用户信息 243 | this.setData({ 244 | avatarUrl: cosFileUrl, 245 | userInfo: newUser, 246 | isShowModal: false, 247 | isLogged: true, 248 | }); 249 | // 保存用户信息到 Storage 中 250 | wx.setStorageSync('userInfo', newUser); 251 | }, 252 | fail: (error) => { 253 | console.error('注册失败', error); 254 | } 255 | }); 256 | }) 257 | .catch((error) => { 258 | // 文件上传失败，处理错误情况 259 | console.log('文件上传失败', error); 260 | }); 261 | } 262 | // 登录成功之后，走报名逻辑 263 | this.handleApply() 264 | }, 265 | fail: (error) => { 266 | console.log('获取数据失败', error); 267 | } 268 | }); 269 | }else{ 270 | wx.showToast({ 271 | title: '请输入昵称', 272 | icon: 'error', 273 | }); 274 | } 275 | }, 276 | 277 | // 上传图片到cos中 278 | uploadImageToCos(filePath) { 279 | return new Promise((resolve, reject) => { 280 | const fileName = `${Date.now()}_${Math.floor(Math.random() * 100000)}`; 281 | const cosFilePath = `/images/userAvatar/${fileName}.png`; // 设置图片的存储路径和文件名，这里假设上传的是 PNG 格式的图片 282 | wx.uploadFile({ 283 | url: '自己cos的服务域名地址', // 替换为您的上传接口 URL 284 | filePath: filePath, 285 | name: 'file', 286 | formData: { 287 | key: cosFilePath, // 上传到 COS 的文件路径 288 | }, 289 | success: (res) => { 290 | console.log(res) 291 | if (res.statusCode === 204) { 292 | const cosFileUrl = res.header.Location; // 上传成功后返回的 COS 文件 URL 293 | resolve(cosFileUrl); 294 | } else { 295 | reject(new Error('图片上传失败')); 296 | } 297 | }, 298 | fail: (error) => { 299 | reject(error); 300 | }, 301 | }); 302 | }); 303 | }, 304 | // 报名相关后续操作 305 | handleApply() { 306 | let nickName = this.data.nickName; 307 | let courseId = this.data.courseId; 308 | let course = this.data.course; 309 | let courseList = this.data.courseList; 310 | let that = this; 311 | if (nickName) { 312 | wx.request({ 313 | url: '自己cos的服务域名地址/jsonData/course.json', 314 | method: 'GET', 315 | success: (res) => { 316 | const jsonData = res.data; 317 | // 查找用户对象 318 | const currentUser = jsonData.applyInfo.applyCourses.find(item => item.nickName === nickName); 319 | if (currentUser) { 320 | // 用户已经存在 321 | const isSignedUp = currentUser.courseIds.includes(courseId); 322 | if (isSignedUp) { 323 | // 用户已经报名过，给出相应提示 324 | wx.showToast({ 325 | title: '您已报名过该课程', 326 | icon: 'none' 327 | }); 328 | } else { 329 | // 用户未报名过，执行报名操作 330 | currentUser.courseIds.push(courseId); 331 | // 更新报名人数 332 | const appliedCourse = jsonData.applyInfo.applyCounts.find(course => course.id === courseId); 333 | appliedCourse.applyCount += 1; 334 | // 更新 COS 的 JSON 文件 335 | wx.request({ 336 | url: '自己cos的服务域名地址/jsonData/course.json', // 替换为 COS 的 JSON 文件的访问链接 337 | method: 'PUT', 338 | headers: { 339 | 'Content-Type': 'application/json', // 设置请求头中的 Content-Type 340 | }, 341 | data: JSON.stringify(jsonData), 342 | success: (res) => { 343 | // 更新当前课程的报名人数 344 | course.applyCount++; 345 | // 更新全局课程列表中对应课程的报名人数 346 | courseList.forEach(function(item) { 347 | if (item.id === course.id) { 348 | item.applyCount = course.applyCount; 349 | } 350 | }); 351 | // 更新数据并存储到本地 352 | that.setData({ 353 | course: course, 354 | courseList: courseList, 355 | }); 356 | wx.setStorageSync('courseList', courseList); 357 | wx.showToast({ 358 | title: '报名成功', 359 | icon: 'success', 360 | duration: 1000, 361 | success: () => { 362 | // 报名成功提示框显示后，跳转到首页 363 | setTimeout(() => { 364 | wx.reLaunch({ 365 | url: '/pages/index/index' // 首页的路径 366 | }); 367 | }, 1000); 368 | } 369 | }); 370 | }, 371 | fail: function (error) { 372 | console.error('Failed to update COS JSON file:', error); 373 | } 374 | }); 375 | } 376 | } else { 377 | // 用户不存在，创建新用户并执行报名操作 378 | const newUser = { 379 | nickName: nickName, 380 | courseIds: [courseId] // 替换为实际的课程ID 381 | }; 382 | jsonData.applyInfo.applyCourses.push(newUser); 383 | // 更新报名人数 384 | const appliedCourse = jsonData.applyInfo.applyCounts.find(course => course.id === courseId); 385 | appliedCourse.applyCount += 1; 386 | // 更新 COS 的 JSON 文件 387 | wx.request({ 388 | url: '自己cos的服务域名地址/jsonData/course.json', // 替换为 COS 的 JSON 文件的访问链接 389 | method: 'PUT', 390 | data: JSON.stringify(jsonData), 391 | header: { 392 | 'Content-Type': 'application/json', 393 | }, 394 | success: (res) => { 395 | // 更新当前课程的报名人数 396 | course.applyCount++; 397 | // 更新全局课程列表中对应课程的报名人数 398 | courseList.forEach(function(item) { 399 | if (item.id === course.id) { 400 | item.applyCount = course.applyCount; 401 | } 402 | }); 403 | // 更新数据并存储到本地 404 | that.setData({ 405 | course: course, 406 | courseList: courseList, 407 | }); 408 | wx.setStorageSync('courseList', courseList); 409 | wx.showToast({ 410 | title: '报名成功', 411 | icon: 'success', 412 | duration: 1000, 413 | success: () => { 414 | // 报名成功提示框显示后，跳转到首页 415 | setTimeout(() => { 416 | wx.reLaunch({ 417 | url: '/pages/index/index' // 首页的路径 418 | }); 419 | }, 1000); 420 | } 421 | }); 422 | }, 423 | fail: (error) => { 424 | console.error('Failed to update COS JSON file:', error); 425 | } 426 | }); 427 | } 428 | }, 429 | fail: (error) => { 430 | console.error('Failed to fetch COS JSON file:', error); 431 | } 432 | }); 433 | } 434 | } 435 | }) -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # 项目名称： WechatCourse 2 | 一个微信小程序，旨在提供一个课程学习平台，用户可以浏览不同的课程资料、查看课程详情、登录/注册账号、报名课程和收藏感兴趣的课程。同时，用户还可以在个人中心页管理自己的账号信息和查看已收藏的课程。 3 | 4 | ## 功能特点 5 | 6 | - 首页：展示所有课程资料，用户可以点击进入详情页查看更多信息。 7 | - 课程详情页：展示特定课程的详细资料，包括标题、封面、描述等。 8 | - 登录/注册功能：支持用户登录和注册账号，登录后可以享受更多功能。 9 | - 报名功能：登录用户可以报名感兴趣的课程，参与学习。 10 | - 收藏功能：登录用户可以收藏自己喜欢的课程，方便以后查看。 11 | - 个人中心页：展示用户的个人信息和已收藏的课程，支持修改个人信息和退出登录。 12 | 13 | ## 技术栈 14 | 15 | - 前端：微信小程序框架、HTML、CSS、JavaScript 16 | - 后台数据：文件存储 COS（腾讯云对象存储） 17 | 18 | ## 开始使用 19 | 20 | 1. 克隆本项目到本地或下载源代码。 21 | 2. 使用微信开发者工具打开项目目录。 22 | 3. 配置微信开发者工具的 AppID（需要提前注册微信小程序账号）。 23 | 4. 配置项目中的文件存储 COS，包括设置存储桶名称、地域、秘钥等信息。 24 | （需要将项目中所有的“自己cos的服务域名地址“替换成自己的cos路径比如：https://wechatapp-xxxxxx.cos.ap-shanghai.myqcloud.com） 25 | 6. 运行项目并在微信开发者工具中预览效果。 26 | 27 | ## 目录结构 28 | 29 | - `pages/`：存放各个页面的目录 30 | - `home/`：首页相关的页面文件 31 | - `detail/`：课程详情页相关的页面文件 32 | - `mine/`：个人中心页相关的页面文件 33 | - `app.js`：小程序的入口文件 34 | - `app.json`：小程序的配置文件 35 | - `app.wxss`：小程序的全局样式文件 36 | 37 | ## 腾讯cos文件目录 38 | 39 | - images/目录下放置所需图片 40 | - jsondata目录下的2个json数据，loginUser.json、course.json用来保存登录信息和报名点赞数 41 | - course.json的文件内容： 42 | ```json 43 | { 44 | "applyInfo": { 45 | "applyCounts": [ 46 | { 47 | "id": 1, 48 | "applyCount": 3 49 | }, 50 | { 51 | "id": 2, 52 | "applyCount": 3 53 | }, 54 | { 55 | "id": 3, 56 | "applyCount": 2 57 | }, 58 | { 59 | "id": 4, 60 | "applyCount": 3 61 | }, 62 | { 63 | "id": 5, 64 | "applyCount": 2 65 | }, 66 | { 67 | "id": 6, 68 | "applyCount": 0 69 | }, 70 | { 71 | "id": 7, 72 | "applyCount": 1 73 | }, 74 | { 75 | "id": 8, 76 | "applyCount": 0 77 | }, 78 | { 79 | "id": 9, 80 | "applyCount": 0 81 | }, 82 | { 83 | "id": 10, 84 | "applyCount": 0 85 | } 86 | ], 87 | "applyCourses": [ 88 | { 89 | "nickName": "张三", 90 | "courseIds": [ 91 | 2, 92 | 3, 93 | 4, 94 | 1, 95 | 7, 96 | 5 97 | ] 98 | }, 99 | { 100 | "nickName": "123", 101 | "courseIds": [ 102 | 4, 103 | 2, 104 | 3, 105 | 1 106 | ] 107 | }, 108 | { 109 | "nickName": "232", 110 | "courseIds": [ 111 | 2, 112 | 1 113 | ] 114 | }, 115 | { 116 | "nickName": "2233", 117 | "courseIds": [ 118 | 4, 119 | 5 120 | ] 121 | } 122 | ] 123 | }, 124 | "likeInfo": { 125 | "likeCounts": [ 126 | { 127 | "id": 1, 128 | "likeCount": 2 129 | }, 130 | { 131 | "id": 2, 132 | "likeCount": 2 133 | }, 134 | { 135 | "id": 3, 136 | "likeCount": 1 137 | }, 138 | { 139 | "id": 4, 140 | "likeCount": 1 141 | }, 142 | { 143 | "id": 5, 144 | "likeCount": 2 145 | }, 146 | { 147 | "id": 6, 148 | "likeCount": 2 149 | }, 150 | { 151 | "id": 7, 152 | "likeCount": 0 153 | }, 154 | { 155 | "id": 8, 156 | "likeCount": 1 157 | } 158 | ], 159 | "likeCourses": [ 160 | { 161 | "nickName": "张三", 162 | "collectList": [ 163 | { 164 | "id": 1, 165 | "category": "绘图类", 166 | "title": "AI绘图工具入门教程", 167 | "description": "探索MidJourney的基本功能和界面，快速上手绘图工具，为你的创作之旅打下坚实基础。", 168 | "coverUrl": "/images/课程封面01.png", 169 | "images": [ 170 | "/images/课程封面01.png" 171 | ], 172 | "applyCount": 1, 173 | "likes": 2, 174 | "lecturer": { 175 | "avatar": "/images/avatar01.png", 176 | "name": "amy.xue", 177 | "department": "AI工具探索者" 178 | }, 179 | "chapterList": [ 180 | { 181 | "title": "第一章：介绍MidJourney", 182 | "description": "课程概述：了解课程内容和学习目标。" 183 | }, 184 | { 185 | "title": "第二章：安装和入门", 186 | "description": "1、指导学员如何下载和安装MidJourney应用程序。\n2、注册和登录：详细说明注册和登录MidJourney账号的步骤和方法。\n3、界面导览：介绍MidJourney的主要界面和功能区域。" 187 | }, 188 | { 189 | "title": "第三章：基本绘图工具", 190 | "description": "1、绘图基础知识：回顾绘图的基本概念和技巧。\n2、绘图工具概览：介绍MidJourney中常用的绘图工具和功能。\n3、图层管理：学习如何创建、编辑和管理图层，实现绘图的分层效果。" 191 | }, 192 | { 193 | "title": "第四章：图像处理和效果", 194 | "description": "1、调整图像参数：学习如何使用MidJourney的调整功能对图像进行亮度、对比度、饱和度等参数的调整。\n2、滤镜和特效：探索MidJourney中的滤镜和特效功能，为图像添加艺术效果和风格。\n3、文本和标注：学习如何在图像上添加文本、标注和说明，增强图像的表达力和可读性。" 195 | }, 196 | { 197 | "title": "第五章：导出和分享作品", 198 | "description": "1、图像导出：教授学员如何导出和保存绘制的图像，选择合适的格式和质量设置。\n2、分享和展示：介绍将作品分享到社交媒体平台、博客或在线画廊的方法，展示自己的创作成果。" 199 | } 200 | ], 201 | "estimatedDate": "日期待定", 202 | "estimatedDuration": 30 203 | } 204 | ] 205 | }, 206 | { 207 | "nickName": "123", 208 | "collectList": [ 209 | { 210 | "id": 2, 211 | "category": "绘图类", 212 | "title": "AI换脸艺术", 213 | "description": "利用MidJourney的AI换脸功能，学习如何将自己或他人的脸部特征与名人、艺术作品等进行融合。", 214 | "coverUrl": "自己cos的服务域名地址/images/course02/%E6%8D%A2%E8%84%B8%E5%B0%81%E9%9D%A2.png", 215 | "images": [ 216 | "自己cos的服务域名地址/images/course02/%E6%8D%A2%E8%84%B8%E5%B0%81%E9%9D%A2.png", 217 | "自己cos的服务域名地址/images/course02/%E6%8D%A2%E8%84%B8%E8%BD%AE%E6%92%AD%E5%9B%BE01.png" 218 | ], 219 | "applyCount": 3, 220 | "likes": 2, 221 | "lecturer": { 222 | "avatar": "自己cos的服务域名地址/images/avatar01.png", 223 | "name": "amy.xue", 224 | "department": "AI工具探索者" 225 | }, 226 | "chapterList": [ 227 | { 228 | "title": "第一章：介绍", 229 | "description": "了解课程的概述和学习目标" 230 | }, 231 | { 232 | "title": "第二章：基础知识", 233 | "description": "掌握AI换脸的基本原理和相关技术" 234 | }, 235 | { 236 | "title": "第三章：MidJourney工具介绍", 237 | "description": "学习MidJourney工具的功能和界面" 238 | }, 239 | { 240 | "title": "第四章：准备工作", 241 | "description": "了解进行AI换脸艺术所需的前期准备" 242 | }, 243 | { 244 | "title": "第五章：人脸特征提取", 245 | "description": "学习如何提取自己或他人的人脸特征" 246 | }, 247 | { 248 | "title": "第六章：选择换脸素材", 249 | "description": "探索选择合适的名人或艺术作品作为换脸素材" 250 | }, 251 | { 252 | "title": "第七章：融合人脸特征", 253 | "description": "学习将人脸特征与素材进行融合的技巧和方法" 254 | }, 255 | { 256 | "title": "第八章：调整与优化", 257 | "description": "掌握调整换脸效果和优化艺术效果的技巧" 258 | }, 259 | { 260 | "title": "第九章：创作实践", 261 | "description": "实践应用所学知识，创作个性化的AI换脸作品" 262 | }, 263 | { 264 | "title": "第十章：作品分享与展示", 265 | "description": "分享和展示自己的AI换脸艺术作品" 266 | } 267 | ], 268 | "estimatedDate": "日期待定", 269 | "estimatedDuration": 30 270 | } 271 | ] 272 | }, 273 | { 274 | "nickName": "456", 275 | "collectList": [ 276 | { 277 | "id": 3, 278 | "category": "绘图类", 279 | "title": "创意海报设计", 280 | "description": "探索MidJourney的设计工具和素材库，学习如何利用AI工具设计令人印象深刻的海报，为你的品牌、活动或个人展示增添创意。", 281 | "coverUrl": "/images/课程封面03.png", 282 | "images": [ 283 | "/images/课程封面03.png" 284 | ], 285 | "applyCount": 2, 286 | "likes": 3, 287 | "lecturer": { 288 | "avatar": "/images/avatar01.png", 289 | "name": "amy.xue", 290 | "department": "AI工具探索者" 291 | }, 292 | "chapterList": [ 293 | { 294 | "title": "第一章：认识MidJourney", 295 | "description": "介绍MidJourney工具的概述和功能，了解如何开始使用该工具进行创意海报设计。" 296 | }, 297 | { 298 | "title": "第二章：海报设计基础", 299 | "description": "学习海报设计的基本原理和要素，包括色彩搭配、排版技巧、字体选择等，为创作令人印象深刻的海报打下基础。" 300 | }, 301 | { 302 | "title": "第三章：MidJourney工具介绍", 303 | "description": "深入了解MidJourney工具的各项功能和操作，包括素材库的使用、图层管理、图像处理等，掌握如何利用工具进行海报设计。" 304 | }, 305 | { 306 | "title": "第四章：创意海报构思", 307 | "description": "学习如何进行创意海报的构思和策划，包括目标受众分析、主题选择、创意发散等，为设计出独特和有吸引力的海报奠定基础。" 308 | }, 309 | { 310 | "title": "第五章：海报设计实践", 311 | "description": "通过实际案例演练，掌握如何使用MidJourney工具进行海报设计，包括添加图像、调整图层、应用特效等技巧和操作。" 312 | }, 313 | { 314 | "title": "第六章：创意海报优化", 315 | "description": "学习如何优化和完善创意海报，包括颜色调整、细节修饰、效果增强等，提升海报的吸引力和表现力。" 316 | }, 317 | { 318 | "title": "第七章：海报输出与分享", 319 | "description": "了解海报的输出格式和要求，学习如何导出高质量的海报文件，并掌握分享海报的方式和渠道，让你的创作得到更多的关注和赞赏。" 320 | }, 321 | { 322 | "title": "第八章：海报案例解析", 323 | "description": "分析和解读一些优秀的创意海报案例，探讨其设计思路和技巧，启发你在海报设计中的创意和灵感。" 324 | }, 325 | { 326 | "title": "第九章：品牌展示与个人推广", 327 | "description": "学习如何利用创意海报为品牌、活动或个人进行展示和推广，包括在社交媒体上发布、制作印刷品等方式，打造个性化的形象和品牌价值。" 328 | }, 329 | { 330 | "title": "第十章：创意海报设计进阶", 331 | "description": "进一步探索创意海报设计的高级技巧和趋势，了解最新的设计潮流和应用场景，为你的创作之路开拓更广阔的可能性。" 332 | } 333 | ], 334 | "estimatedDate": "日期待定", 335 | "estimatedDuration": 30 336 | }, 337 | { 338 | "id": 8, 339 | "category": "编程类", 340 | "title": "使用ChatGPT从0-1搭建微信小程序", 341 | "description": "学习如何利用ChatGPT和微信小程序开发框架，从项目规划、界面设计、逻辑实现到发布上线的全流程，掌握微信小程序的开发要点和技巧。", 342 | "coverUrl": "自己cos的服务域名地址/images/course08/%E5%B0%8F%E7%A8%8B%E5%BA%8F%E5%B0%81%E9%9D%A2.png", 343 | "images": [ 344 | "自己cos的服务域名地址/images/course08/%E5%B0%8F%E7%A8%8B%E5%BA%8F%E5%B0%81%E9%9D%A2.png" 345 | ], 346 | "applyCount": 0, 347 | "likes": 1, 348 | "lecturer": { 349 | "avatar": "/images/avatar01.png", 350 | "name": "amy.xue", 351 | "department": "AI工具探索者" 352 | }, 353 | "chapterList": [ 354 | { 355 | "title": "第一章：课程介绍", 356 | "description": "了解课程的概述和学习目标" 357 | }, 358 | { 359 | "title": "第二章：微信小程序开发入门", 360 | "description": "学习微信小程序的基本概念和开发环境的搭建" 361 | }, 362 | { 363 | "title": "第三章：界面设计与布局", 364 | "description": "探索微信小程序界面设计的基本原则和布局方法" 365 | }, 366 | { 367 | "title": "第四章：逻辑实现与数据交互", 368 | "description": "学习微信小程序逻辑实现和与后端数据交互的方法" 369 | }, 370 | { 371 | "title": "第五章：小程序发布与上线", 372 | "description": "了解微信小程序的发布流程和上线注意事项" 373 | }, 374 | { 375 | "title": "第六章：小程序优化与调试", 376 | "description": "学习微信小程序的性能优化和调试技巧" 377 | }, 378 | { 379 | "title": "第七章：小程序商业化变现", 380 | "description": "探索如何利用微信小程序进行商业化变现和推广" 381 | } 382 | ], 383 | "estimatedDate": "日期待定", 384 | "estimatedDuration": 30 385 | } 386 | ] 387 | }, 388 | { 389 | "nickName": "2233", 390 | "collectList": [ 391 | { 392 | "id": 4, 393 | "category": "绘图类", 394 | "title": "AI卡通形象创作", 395 | "description": "使用MidJourney的AI技术，学习如何将照片或人物形象转化为可爱的卡通形象，为个人品牌、社交媒体等打造独特形象。", 396 | "coverUrl": "自己cos的服务域名地址/images/course04/%E5%8D%A1%E9%80%9A%E4%BA%BA%E7%89%A9%E5%B0%81%E9%9D%A2.png", 397 | "images": [ 398 | "自己cos的服务域名地址/images/course04/%E5%8D%A1%E9%80%9A%E4%BA%BA%E7%89%A9%E5%B0%81%E9%9D%A2.png", 399 | "自己cos的服务域名地址/images/course04/%E5%8D%A1%E9%80%9A%E4%BA%BA%E7%89%A9%E8%BD%AE%E6%92%AD%E5%9B%BE01.png", 400 | "自己cos的服务域名地址/images/course04/%E5%8D%A1%E9%80%9A%E4%BA%BA%E7%89%A9%E8%BD%AE%E6%92%AD%E5%9B%BE02.png", 401 | "自己cos的服务域名地址/images/course04/%E5%8D%A1%E9%80%9A%E4%BA%BA%E7%89%A9%E8%BD%AE%E6%92%AD%E5%9B%BE03.png" 402 | ], 403 | "applyCount": 2, 404 | "likes": 1, 405 | "lecturer": { 406 | "avatar": "自己cos的服务域名地址/images/avatar01.png", 407 | "name": "amy.xue", 408 | "department": "AI工具探索者" 409 | }, 410 | "chapterList": [ 411 | { 412 | "title": "第一章：课程介绍", 413 | "description": "了解课程的概述和学习目标" 414 | }, 415 | { 416 | "title": "第二章：卡通形象的特点", 417 | "description": "探索卡通形象的基本特点和设计原则" 418 | }, 419 | { 420 | "title": "第三章：MidJourney工具介绍", 421 | "description": "学习MidJourney工具的功能和界面" 422 | }, 423 | { 424 | "title": "第四章：准备工作", 425 | "description": "了解进行AI卡通形象创作所需的前期准备" 426 | }, 427 | { 428 | "title": "第五章：选择素材照片", 429 | "description": "学习如何选择适合的照片作为卡通形象的基础" 430 | }, 431 | { 432 | "title": "第六章：形象转化", 433 | "description": "掌握将照片转化为卡通形象的技巧和方法" 434 | }, 435 | { 436 | "title": "第七章：特征调整与个性化", 437 | "description": "学习调整卡通形象特征和个性化定制的技巧" 438 | }, 439 | { 440 | "title": "第八章：表情和动作设计", 441 | "description": "探索为卡通形象设计表情和动作的创意方法" 442 | }, 443 | { 444 | "title": "第九章：配色和风格化", 445 | "description": "学习如何为卡通形象选择合适的配色和风格化处理" 446 | }, 447 | { 448 | "title": "第十章：应用和展示", 449 | "description": "实践应用所学知识，展示个人卡通形象的应用场景" 450 | } 451 | ], 452 | "estimatedDate": "日期待定", 453 | "estimatedDuration": 30 454 | }, 455 | { 456 | "id": 5, 457 | "category": "绘图类", 458 | "title": "电商模块图设计", 459 | "description": "学习如何使用MidJourney的工具和功能，设计吸引人的电商模块图，提升产品在电商平台上的吸引力和销售效果。", 460 | "coverUrl": "自己cos的服务域名地址/images/course05/%E7%94%B5%E5%95%86%E6%A8%A1%E7%89%B9%E5%B0%81%E9%9D%A2.png", 461 | "images": [ 462 | "自己cos的服务域名地址/images/course05/%E7%94%B5%E5%95%86%E6%A8%A1%E7%89%B9%E5%B0%81%E9%9D%A2.png", 463 | "自己cos的服务域名地址/images/course05/%E7%94%B5%E5%95%86%E6%A8%A1%E7%89%B9%E8%BD%AE%E6%92%AD%E5%9B%BE01.png", 464 | "自己cos的服务域名地址/images/course05/%E7%94%B5%E5%95%86%E6%A8%A1%E7%89%B9%E8%BD%AE%E6%92%AD%E5%9B%BE02.png", 465 | "自己cos的服务域名地址/images/course05/%E7%94%B5%E5%95%86%E6%A8%A1%E7%89%B9%E8%BD%AE%E6%92%AD%E5%9B%BE03.png" 466 | ], 467 | "applyCount": 1, 468 | "likes": 2, 469 | "lecturer": { 470 | "avatar": "自己cos的服务域名地址/images/avatar01.png", 471 | "name": "amy.xue", 472 | "department": "AI工具探索者" 473 | }, 474 | "chapterList": [ 475 | { 476 | "title": "第一章：课程介绍", 477 | "description": "了解课程的概述和学习目标" 478 | }, 479 | { 480 | "title": "第二章：电商模块图概述", 481 | "description": "探索电商模块图的基本概念和设计原则" 482 | }, 483 | { 484 | "title": "第三章：MidJourney工具介绍", 485 | "description": "学习MidJourney工具的功能和界面" 486 | }, 487 | { 488 | "title": "第四章：电商平台分析", 489 | "description": "了解各种电商平台的特点和需求" 490 | }, 491 | { 492 | "title": "第五章：模块图设计要素", 493 | "description": "学习电商模块图的设计要素和注意事项" 494 | }, 495 | { 496 | "title": "第六章：产品展示模块", 497 | "description": "掌握设计吸引人的产品展示模块的技巧和方法" 498 | }, 499 | { 500 | "title": "第七章：导航和分类模块", 501 | "description": "学习设计清晰的导航和分类模块以提升用户体验" 502 | }, 503 | { 504 | "title": "第八章：推广和促销模块", 505 | "description": "探索设计引人注目的推广和促销模块的创意方法" 506 | }, 507 | { 508 | "title": "第九章：购物流程模块", 509 | "description": "学习设计简洁流畅的购物流程模块以提升转化率" 510 | }, 511 | { 512 | "title": "第十章：响应式设计与适配", 513 | "description": "了解如何设计响应式的电商模块图并适配不同设备" 514 | } 515 | ], 516 | "estimatedDate": "日期待定", 517 | "estimatedDuration": 30 518 | } 519 | ] 520 | } 521 | ] 522 | } 523 | } 524 | ``` 525 | - loginUser.json的文件内容： 526 | ```json 527 | [ 528 | { 529 | "nickName": "amy", 530 | "avatarUrl": [ 531 | "自己cos的服务域名地址/images/userAvatar/1687877068798_33381.png" 532 | ] 533 | }, 534 | { 535 | "nickName": "xue", 536 | "avatarUrl": [ 537 | "自己cos的服务域名地址/images/userAvatar/1687919134978_21958.png" 538 | ] 539 | }, 540 | { 541 | "nickName": "123", 542 | "avatarUrl": [ 543 | "自己cos的服务域名地址/images/userAvatar/1688092062511_43012.png" 544 | ] 545 | }, 546 | { 547 | "nickName": "2233", 548 | "avatarUrl": [ 549 | "自己c'o's/images/userAvatar/1688092305243_77783.png" 550 | ] 551 | }, 552 | { 553 | "nickName": "232", 554 | "avatarUrl": "自己cos的服务域名地址/images/userAvatar/1688094743409_58568.png" 555 | } 556 | ] 557 | ``` 558 | 559 | ## 成果展示 560 | image 561 | image 562 | image 563 | image 564 | 565 | https://github.com/xw-an/WechatCourse/assets/9762767/63b2cb80-4efe-421e-b780-b0811208a859 566 | 567 | ## 小程序入口 568 | image 569 | 570 | 571 | ## 参与贡献 572 | 573 | - 如果您发现问题或有任何建议，请提交 Issue。 574 | - 如果您想要贡献代码，请 Fork 本项目并提交 Pull Request。 575 | -------------------------------------------------------------------------------- /app.js: -------------------------------------------------------------------------------- 1 | // app.js 2 | App({ 3 | globalData:{ 4 | // data: [ 5 | // { 6 | // "id": 1, 7 | // "category": "绘图类", 8 | // "title": "AI绘图工具入门教程", 9 | // "description": "探索MidJourney的基本功能和界面，快速上手绘图工具，为你的创作之旅打下坚实基础。", 10 | // "coverUrl": "/images/课程封面01.png", 11 | // "images": [ 12 | // "/images/课程封面01.png", 13 | // ], 14 | // "applyCount": 10, 15 | // "likes": 20, 16 | // "lecturer": { 17 | // "avatar": "/images/avatar01.png", 18 | // "name": "amy.xue", 19 | // "department": "AI工具探索者" 20 | // }, 21 | // "chapterList": [ 22 | // { 23 | // "title": "第一章：介绍MidJourney", 24 | // "description": "课程概述：了解课程内容和学习目标。" 25 | // }, 26 | // { 27 | // "title": "第二章：安装和入门", 28 | // "description": "1、指导学员如何下载和安装MidJourney应用程序。\n2、注册和登录：详细说明注册和登录MidJourney账号的步骤和方法。\n3、界面导览：介绍MidJourney的主要界面和功能区域。" 29 | // }, 30 | // { 31 | // "title": "第三章：基本绘图工具", 32 | // "description": "1、绘图基础知识：回顾绘图的基本概念和技巧。\n2、绘图工具概览：介绍MidJourney中常用的绘图工具和功能。\n3、图层管理：学习如何创建、编辑和管理图层，实现绘图的分层效果。" 33 | // }, 34 | // { 35 | // "title": "第四章：图像处理和效果", 36 | // "description": "1、调整图像参数：学习如何使用MidJourney的调整功能对图像进行亮度、对比度、饱和度等参数的调整。\n2、滤镜和特效：探索MidJourney中的滤镜和特效功能，为图像添加艺术效果和风格。\n3、文本和标注：学习如何在图像上添加文本、标注和说明，增强图像的表达力和可读性。" 37 | // }, 38 | // { 39 | // "title": "第五章：导出和分享作品", 40 | // "description": "1、图像导出：教授学员如何导出和保存绘制的图像，选择合适的格式和质量设置。\n2、分享和展示：介绍将作品分享到社交媒体平台、博客或在线画廊的方法，展示自己的创作成果。" 41 | // } 42 | // ], 43 | // "estimatedDate": "日期待定", 44 | // "estimatedDuration": 30 45 | // }, 46 | // { 47 | // "id": 2, 48 | // "category": "绘图类", 49 | // "title": "AI换脸艺术", 50 | // "description": "利用MidJourney的AI换脸功能，学习如何将自己或他人的脸部特征与名人、艺术作品等进行融合。", 51 | // "coverUrl": "/images/课程封面02.png", 52 | // "images": [ 53 | // "/images/课程封面02.png" 54 | // ], 55 | // "applyCount": 0, 56 | // "likes": 0, 57 | // "lecturer": { 58 | // "avatar": "/images/avatar01.png", 59 | // "name": "amy.xue", 60 | // "department": "AI工具探索者" 61 | // }, 62 | // "chapterList": [ 63 | // { 64 | // "title": "第一章：介绍", 65 | // "description": "了解课程的概述和学习目标" 66 | // }, 67 | // { 68 | // "title": "第二章：基础知识", 69 | // "description": "掌握AI换脸的基本原理和相关技术" 70 | // }, 71 | // { 72 | // "title": "第三章：MidJourney工具介绍", 73 | // "description": "学习MidJourney工具的功能和界面" 74 | // }, 75 | // { 76 | // "title": "第四章：准备工作", 77 | // "description": "了解进行AI换脸艺术所需的前期准备" 78 | // }, 79 | // { 80 | // "title": "第五章：人脸特征提取", 81 | // "description": "学习如何提取自己或他人的人脸特征" 82 | // }, 83 | // { 84 | // "title": "第六章：选择换脸素材", 85 | // "description": "探索选择合适的名人或艺术作品作为换脸素材" 86 | // }, 87 | // { 88 | // "title": "第七章：融合人脸特征", 89 | // "description": "学习将人脸特征与素材进行融合的技巧和方法" 90 | // }, 91 | // { 92 | // "title": "第八章：调整与优化", 93 | // "description": "掌握调整换脸效果和优化艺术效果的技巧" 94 | // }, 95 | // { 96 | // "title": "第九章：创作实践", 97 | // "description": "实践应用所学知识，创作个性化的AI换脸作品" 98 | // }, 99 | // { 100 | // "title": "第十章：作品分享与展示", 101 | // "description": "分享和展示自己的AI换脸艺术作品" 102 | // } 103 | // ], 104 | // "estimatedDate": "日期待定", 105 | // "estimatedDuration": 30 106 | // }, 107 | // { 108 | // "id": 3, 109 | // "category": "绘图类", 110 | // "title": "创意海报设计", 111 | // "description": "探索MidJourney的设计工具和素材库，学习如何利用AI工具设计令人印象深刻的海报，为你的品牌、活动或个人展示增添创意。", 112 | // "coverUrl": "/images/课程封面03.png", 113 | // "images": [ 114 | // "/images/课程封面03.png" 115 | // ], 116 | // "applyCount": 0, 117 | // "likes": 0, 118 | // "lecturer": { 119 | // "avatar": "/images/avatar01.png", 120 | // "name": "amy.xue", 121 | // "department": "AI工具探索者" 122 | // }, 123 | // "chapterList": [ 124 | // { 125 | // "title": "第一章：认识MidJourney", 126 | // "description": "介绍MidJourney工具的概述和功能，了解如何开始使用该工具进行创意海报设计。" 127 | // }, 128 | // { 129 | // "title": "第二章：海报设计基础", 130 | // "description": "学习海报设计的基本原理和要素，包括色彩搭配、排版技巧、字体选择等，为创作令人印象深刻的海报打下基础。" 131 | // }, 132 | // { 133 | // "title": "第三章：MidJourney工具介绍", 134 | // "description": "深入了解MidJourney工具的各项功能和操作，包括素材库的使用、图层管理、图像处理等，掌握如何利用工具进行海报设计。" 135 | // }, 136 | // { 137 | // "title": "第四章：创意海报构思", 138 | // "description": "学习如何进行创意海报的构思和策划，包括目标受众分析、主题选择、创意发散等，为设计出独特和有吸引力的海报奠定基础。" 139 | // }, 140 | // { 141 | // "title": "第五章：海报设计实践", 142 | // "description": "通过实际案例演练，掌握如何使用MidJourney工具进行海报设计，包括添加图像、调整图层、应用特效等技巧和操作。" 143 | // }, 144 | // { 145 | // "title": "第六章：创意海报优化", 146 | // "description": "学习如何优化和完善创意海报，包括颜色调整、细节修饰、效果增强等，提升海报的吸引力和表现力。" 147 | // }, 148 | // { 149 | // "title": "第七章：海报输出与分享", 150 | // "description": "了解海报的输出格式和要求，学习如何导出高质量的海报文件，并掌握分享海报的方式和渠道，让你的创作得到更多的关注和赞赏。" 151 | // }, 152 | // { 153 | // "title": "第八章：海报案例解析", 154 | // "description": "分析和解读一些优秀的创意海报案例，探讨其设计思路和技巧，启发你在海报设计中的创意和灵感。" 155 | // }, 156 | // { 157 | // "title": "第九章：品牌展示与个人推广", 158 | // "description": "学习如何利用创意海报为品牌、活动或个人进行展示和推广，包括在社交媒体上发布、制作印刷品等方式，打造个性化的形象和品牌价值。" 159 | // }, 160 | // { 161 | // "title": "第十章：创意海报设计进阶", 162 | // "description": "进一步探索创意海报设计的高级技巧和趋势，了解最新的设计潮流和应用场景，为你的创作之路开拓更广阔的可能性。" 163 | // }], 164 | // "estimatedDate": "日期待定", 165 | // "estimatedDuration": 30 166 | // }, 167 | // { 168 | // "id": 4, 169 | // "category": "绘图类", 170 | // "title": "AI卡通形象创作", 171 | // "description": "使用MidJourney的AI技术，学习如何将照片或人物形象转化为可爱的卡通形象，为个人品牌、社交媒体等打造独特形象。", 172 | // "coverUrl": "/images/课程封面04.png", 173 | // "images": [ 174 | // "/images/课程封面04.png" 175 | // ], 176 | // "applyCount": 0, 177 | // "likes": 0, 178 | // "lecturer": { 179 | // "avatar": "/images/avatar01.png", 180 | // "name": "amy.xue", 181 | // "department": "AI工具探索者" 182 | // }, 183 | // "chapterList": [ 184 | // { 185 | // "title": "第一章：课程介绍", 186 | // "description": "了解课程的概述和学习目标" 187 | // }, 188 | // { 189 | // "title": "第二章：卡通形象的特点", 190 | // "description": "探索卡通形象的基本特点和设计原则" 191 | // }, 192 | // { 193 | // "title": "第三章：MidJourney工具介绍", 194 | // "description": "学习MidJourney工具的功能和界面" 195 | // }, 196 | // { 197 | // "title": "第四章：准备工作", 198 | // "description": "了解进行AI卡通形象创作所需的前期准备" 199 | // }, 200 | // { 201 | // "title": "第五章：选择素材照片", 202 | // "description": "学习如何选择适合的照片作为卡通形象的基础" 203 | // }, 204 | // { 205 | // "title": "第六章：形象转化", 206 | // "description": "掌握将照片转化为卡通形象的技巧和方法" 207 | // }, 208 | // { 209 | // "title": "第七章：特征调整与个性化", 210 | // "description": "学习调整卡通形象特征和个性化定制的技巧" 211 | // }, 212 | // { 213 | // "title": "第八章：表情和动作设计", 214 | // "description": "探索为卡通形象设计表情和动作的创意方法" 215 | // }, 216 | // { 217 | // "title": "第九章：配色和风格化", 218 | // "description": "学习如何为卡通形象选择合适的配色和风格化处理" 219 | // }, 220 | // { 221 | // "title": "第十章：应用和展示", 222 | // "description": "实践应用所学知识，展示个人卡通形象的应用场景" 223 | // } 224 | // ], 225 | // "estimatedDate": "日期待定", 226 | // "estimatedDuration": 30 227 | // }, 228 | // { 229 | // "id": 5, 230 | // "category": "绘图类", 231 | // "title": "电商模块图设计", 232 | // "description": "学习如何使用MidJourney的工具和功能，设计吸引人的电商模块图，提升产品在电商平台上的吸引力和销售效果。", 233 | // "coverUrl": "/images/课程封面05.png", 234 | // "images": [ 235 | // "/images/课程封面05.png" 236 | // ], 237 | // "applyCount": 0, 238 | // "likes": 0, 239 | // "lecturer": { 240 | // "avatar": "/images/avatar01.png", 241 | // "name": "amy.xue", 242 | // "department": "AI工具探索者" 243 | // }, 244 | // "chapterList": [ 245 | // { 246 | // "title": "第一章：课程介绍", 247 | // "description": "了解课程的概述和学习目标" 248 | // }, 249 | // { 250 | // "title": "第二章：电商模块图概述", 251 | // "description": "探索电商模块图的基本概念和设计原则" 252 | // }, 253 | // { 254 | // "title": "第三章：MidJourney工具介绍", 255 | // "description": "学习MidJourney工具的功能和界面" 256 | // }, 257 | // { 258 | // "title": "第四章：电商平台分析", 259 | // "description": "了解各种电商平台的特点和需求" 260 | // }, 261 | // { 262 | // "title": "第五章：模块图设计要素", 263 | // "description": "学习电商模块图的设计要素和注意事项" 264 | // }, 265 | // { 266 | // "title": "第六章：产品展示模块", 267 | // "description": "掌握设计吸引人的产品展示模块的技巧和方法" 268 | // }, 269 | // { 270 | // "title": "第七章：导航和分类模块", 271 | // "description": "学习设计清晰的导航和分类模块以提升用户体验" 272 | // }, 273 | // { 274 | // "title": "第八章：推广和促销模块", 275 | // "description": "探索设计引人注目的推广和促销模块的创意方法" 276 | // }, 277 | // { 278 | // "title": "第九章：购物流程模块", 279 | // "description": "学习设计简洁流畅的购物流程模块以提升转化率" 280 | // }, 281 | // { 282 | // "title": "第十章：响应式设计与适配", 283 | // "description": "了解如何设计响应式的电商模块图并适配不同设备" 284 | // } 285 | // ], 286 | // "estimatedDate": "日期待定", 287 | // "estimatedDuration": 30 288 | // }, 289 | // { 290 | // "id": 6, 291 | // "category": "绘图类", 292 | // "title": "企业标志设计与AI", 293 | // "description": "利用MidJourney的AI设计功能，学习如何运用AI技术创造独特的企业标志，为企业形象打造专业和独特的标识。", 294 | // "coverUrl": "自己cos的服务域名地址/images/course06/logo%E5%B0%81%E9%9D%A2.png", 295 | // "images": [ 296 | // "自己cos的服务域名地址/images/course06/logo%E5%B0%81%E9%9D%A2.png" 297 | // ], 298 | // "applyCount": 0, 299 | // "likes": 0, 300 | // "lecturer": { 301 | // "avatar": "/images/avatar01.png", 302 | // "name": "amy.xue", 303 | // "department": "AI工具探索者" 304 | // }, 305 | // "chapterList": [ 306 | // { 307 | // "title": "第一章：课程介绍", 308 | // "description": "了解课程的概述和学习目标" 309 | // }, 310 | // { 311 | // "title": "第二章：企业标志设计概述", 312 | // "description": "探索企业标志设计的基本概念和设计原则" 313 | // }, 314 | // { 315 | // "title": "第三章：MidJourney工具介绍", 316 | // "description": "学习MidJourney工具的功能和界面" 317 | // }, 318 | // { 319 | // "title": "第四章：企业标志设计要素", 320 | // "description": "了解企业标志设计的关键要素和设计原则" 321 | // }, 322 | // { 323 | // "title": "第五章：AI技术在标志设计中的应用", 324 | // "description": "学习如何运用AI技术创造独特的企业标志" 325 | // }, 326 | // { 327 | // "title": "第六章：品牌识别与定位", 328 | // "description": "了解品牌识别和定位在标志设计中的重要性" 329 | // }, 330 | // { 331 | // "title": "第七章：色彩和字体选择", 332 | // "description": "学习如何选择适合企业形象的色彩和字体" 333 | // }, 334 | // { 335 | // "title": "第八章：图形与形状设计", 336 | // "description": "探索图形和形状设计的创意方法和技巧" 337 | // }, 338 | // { 339 | // "title": "第九章：标志设计案例分析", 340 | // "description": "分析并学习成功的企业标志设计案例" 341 | // }, 342 | // { 343 | // "title": "第十章：标志设计实践", 344 | // "description": "实践运用所学知识设计企业标志" 345 | // } 346 | // ], 347 | // "estimatedDate": "2023年7月1日", 348 | // "estimatedDuration": 30 349 | // }, 350 | // { 351 | // "id": 7, 352 | // "category": "编程类", 353 | // "title": "AI助力高效前后端框架搭建", 354 | // "description": "结合ChatGPT和GitHub Copilot，探索如何快速搭建高效的前后端框架，提升开发效率，让编码工作更轻松、高效。", 355 | // "coverUrl": "自己cos的服务域名地址/images/course07/copilot%E5%B0%81%E9%9D%A2.png", 356 | // "images": [ 357 | // "自己cos的服务域名地址/images/course07/copilot%E5%B0%81%E9%9D%A2.png" 358 | // ], 359 | // "applyCount": 0, 360 | // "likes": 0, 361 | // "lecturer": { 362 | // "avatar": "/images/avatar01.png", 363 | // "name": "amy.xue", 364 | // "department": "AI工具探索者" 365 | // }, 366 | // "chapterList": [ 367 | // { 368 | // "title": "第一章：课程介绍", 369 | // "description": "了解课程的概述和学习目标" 370 | // }, 371 | // { 372 | // "title": "第二章：前后端框架基础", 373 | // "description": "学习前后端框架的基本概念和工作原理" 374 | // }, 375 | // { 376 | // "title": "第三章：ChatGPT和Copilot简介", 377 | // "description": "探索ChatGPT和Copilot的功能和应用场景" 378 | // }, 379 | // { 380 | // "title": "第四章：快速搭建前端框架", 381 | // "description": "学习如何利用ChatGPT和Copilot快速搭建前端框架" 382 | // }, 383 | // { 384 | // "title": "第五章：高效开发后端框架", 385 | // "description": "探索利用ChatGPT和Copilot提高后端框架开发效率的方法" 386 | // } 387 | // ], 388 | // "estimatedDate": "日期待定", 389 | // "estimatedDuration": 30 390 | // }, 391 | // { 392 | // "id": 8, 393 | // "category": "编程类", 394 | // "title": "使用ChatGPT从0-1搭建微信小程序", 395 | // "description": "学习如何利用ChatGPT和微信小程序开发框架，从项目规划、界面设计、逻辑实现到发布上线的全流程，掌握微信小程序的开发要点和技巧。", 396 | // "coverUrl": "自己cos的服务域名地址/images/course08/%E5%B0%8F%E7%A8%8B%E5%BA%8F%E5%B0%81%E9%9D%A2.png", 397 | // "images": [ 398 | // "自己cos的服务域名地址/images/course08/%E5%B0%8F%E7%A8%8B%E5%BA%8F%E5%B0%81%E9%9D%A2.png", 399 | // ], 400 | // "applyCount": 0, 401 | // "likes": 0, 402 | // "lecturer": { 403 | // "avatar": "/images/avatar01.png", 404 | // "name": "amy.xue", 405 | // "department": "AI工具探索者" 406 | // }, 407 | // "chapterList": [ 408 | // { 409 | // "title": "第一章：课程介绍", 410 | // "description": "了解课程的概述和学习目标" 411 | // }, 412 | // { 413 | // "title": "第二章：微信小程序开发入门", 414 | // "description": "学习微信小程序的基本概念和开发环境的搭建" 415 | // }, 416 | // { 417 | // "title": "第三章：界面设计与布局", 418 | // "description": "探索微信小程序界面设计的基本原则和布局方法" 419 | // }, 420 | // { 421 | // "title": "第四章：逻辑实现与数据交互", 422 | // "description": "学习微信小程序逻辑实现和与后端数据交互的方法" 423 | // }, 424 | // { 425 | // "title": "第五章：小程序发布与上线", 426 | // "description": "了解微信小程序的发布流程和上线注意事项" 427 | // }, 428 | // { 429 | // "title": "第六章：小程序优化与调试", 430 | // "description": "学习微信小程序的性能优化和调试技巧" 431 | // }, 432 | // { 433 | // "title": "第七章：小程序商业化变现", 434 | // "description": "探索如何利用微信小程序进行商业化变现和推广" 435 | // } 436 | // ], 437 | // "estimatedDate": "日期待定", 438 | // "estimatedDuration": 30 439 | // } 440 | // ] 441 | data: [ 442 | { 443 | "id": 1, 444 | "category": "绘图类", 445 | "title": "AI绘图工具入门教程", 446 | "description": "探索MidJourney的基本功能和界面，快速上手绘图工具，为你的创作之旅打下坚实基础。", 447 | "coverUrl": "自己cos的服务域名地址/images/course01/%E7%BB%98%E5%9B%BE%E5%B7%A5%E5%85%B7%E5%B0%81%E9%9D%A2.png", 448 | "video": { 449 | "poster": "自己cos的服务域名地址/images/course01/%E7%BB%98%E5%9B%BE%E5%B7%A5%E5%85%B7%E5%B0%81%E9%9D%A2.png", 450 | "url":"自己cos的服务域名地址/video/midjourney%E5%85%A5%E9%97%A8%E6%95%99%E7%A8%8B-%E6%96%87%E7%94%9F%E5%9B%BE.mov" 451 | }, 452 | "images": [ 453 | "自己cos的服务域名地址/images/course01/%E7%BB%98%E5%9B%BE%E5%B7%A5%E5%85%B7%E5%B0%81%E9%9D%A2.png", 454 | "自己cos的服务域名地址/images/course01/%E5%85%A5%E9%97%A8%E6%95%99%E7%A8%8B%E5%B0%81%E9%9D%A2.png", 455 | "自己cos的服务域名地址/images/course01/%E5%85%A5%E9%97%A8%E6%95%99%E7%A8%8B%E8%BD%AE%E6%92%AD%E5%9B%BE01.png" 456 | ], 457 | "applyCount": 10, 458 | "likes": 20, 459 | "lecturer": { 460 | "avatar": "自己cos的服务域名地址/images/avatar01.png", 461 | "name": "amy.xue", 462 | "department": "AI工具探索者" 463 | }, 464 | "chapterList": [ 465 | { 466 | "title": "第一章：介绍MidJourney", 467 | "description": "课程概述：了解课程内容和学习目标。" 468 | }, 469 | { 470 | "title": "第二章：安装和入门", 471 | "description": "1、指导学员如何下载和安装MidJourney应用程序。\n2、注册和登录：详细说明注册和登录MidJourney账号的步骤和方法。\n3、界面导览：介绍MidJourney的主要界面和功能区域。" 472 | }, 473 | { 474 | "title": "第三章：基本绘图工具", 475 | "description": "1、绘图基础知识：回顾绘图的基本概念和技巧。\n2、绘图工具概览：介绍MidJourney中常用的绘图工具和功能。\n3、图层管理：学习如何创建、编辑和管理图层，实现绘图的分层效果。" 476 | }, 477 | { 478 | "title": "第四章：图像处理和效果", 479 | "description": "1、调整图像参数：学习如何使用MidJourney的调整功能对图像进行亮度、对比度、饱和度等参数的调整。\n2、滤镜和特效：探索MidJourney中的滤镜和特效功能，为图像添加艺术效果和风格。\n3、文本和标注：学习如何在图像上添加文本、标注和说明，增强图像的表达力和可读性。" 480 | }, 481 | { 482 | "title": "第五章：导出和分享作品", 483 | "description": "1、图像导出：教授学员如何导出和保存绘制的图像，选择合适的格式和质量设置。\n2、分享和展示：介绍将作品分享到社交媒体平台、博客或在线画廊的方法，展示自己的创作成果。" 484 | } 485 | ], 486 | "estimatedDate": "日期待定", 487 | "estimatedDuration": 30 488 | }, 489 | { 490 | "id": 2, 491 | "category": "绘图类", 492 | "title": "AI换脸艺术", 493 | "description": "利用MidJourney的AI换脸功能，学习如何将自己或他人的脸部特征与名人、艺术作品等进行融合。", 494 | "coverUrl": "自己cos的服务域名地址/images/course02/%E6%8D%A2%E8%84%B8%E5%B0%81%E9%9D%A2.png", 495 | "images": [ 496 | "自己cos的服务域名地址/images/course02/%E6%8D%A2%E8%84%B8%E5%B0%81%E9%9D%A2.png", 497 | "自己cos的服务域名地址/images/course02/%E6%8D%A2%E8%84%B8%E8%BD%AE%E6%92%AD%E5%9B%BE01.png" 498 | ], 499 | "applyCount": 0, 500 | "likes": 0, 501 | "lecturer": { 502 | "avatar": "自己cos的服务域名地址/images/avatar01.png", 503 | "name": "amy.xue", 504 | "department": "AI工具探索者" 505 | }, 506 | "chapterList": [ 507 | { 508 | "title": "第一章：介绍", 509 | "description": "了解课程的概述和学习目标" 510 | }, 511 | { 512 | "title": "第二章：基础知识", 513 | "description": "掌握AI换脸的基本原理和相关技术" 514 | }, 515 | { 516 | "title": "第三章：MidJourney工具介绍", 517 | "description": "学习MidJourney工具的功能和界面" 518 | }, 519 | { 520 | "title": "第四章：准备工作", 521 | "description": "了解进行AI换脸艺术所需的前期准备" 522 | }, 523 | { 524 | "title": "第五章：人脸特征提取", 525 | "description": "学习如何提取自己或他人的人脸特征" 526 | }, 527 | { 528 | "title": "第六章：选择换脸素材", 529 | "description": "探索选择合适的名人或艺术作品作为换脸素材" 530 | }, 531 | { 532 | "title": "第七章：融合人脸特征", 533 | "description": "学习将人脸特征与素材进行融合的技巧和方法" 534 | }, 535 | { 536 | "title": "第八章：调整与优化", 537 | "description": "掌握调整换脸效果和优化艺术效果的技巧" 538 | }, 539 | { 540 | "title": "第九章：创作实践", 541 | "description": "实践应用所学知识，创作个性化的AI换脸作品" 542 | }, 543 | { 544 | "title": "第十章：作品分享与展示", 545 | "description": "分享和展示自己的AI换脸艺术作品" 546 | } 547 | ], 548 | "estimatedDate": "日期待定", 549 | "estimatedDuration": 30 550 | }, 551 | { 552 | "id": 3, 553 | "category": "绘图类", 554 | "title": "创意海报设计", 555 | "description": "探索MidJourney的设计工具和素材库，学习如何利用AI工具设计令人印象深刻的海报，为你的品牌、活动或个人展示增添创意。", 556 | "coverUrl": "自己cos的服务域名地址/images/course03/%E5%88%9B%E6%84%8F%E6%B5%B7%E6%8A%A5%E5%B0%81%E9%9D%A2.png", 557 | "images": [ 558 | "自己cos的服务域名地址/images/course03/%E5%88%9B%E6%84%8F%E6%B5%B7%E6%8A%A5%E5%B0%81%E9%9D%A2.png", 559 | "自己cos的服务域名地址/images/course03/%E5%88%9B%E6%84%8F%E6%B5%B7%E6%8A%A5%E8%BD%AE%E6%92%AD%E5%9B%BE01.png", 560 | "自己cos的服务域名地址/images/course03/%E5%88%9B%E6%84%8F%E6%B5%B7%E6%8A%A5%E8%BD%AE%E6%92%AD%E5%9B%BE02.png" 561 | ], 562 | "applyCount": 0, 563 | "likes": 0, 564 | "lecturer": { 565 | "avatar": "自己cos的服务域名地址/images/avatar01.png", 566 | "name": "amy.xue", 567 | "department": "AI工具探索者" 568 | }, 569 | "chapterList": [ 570 | { 571 | "title": "第一章：认识MidJourney", 572 | "description": "介绍MidJourney工具的概述和功能，了解如何开始使用该工具进行创意海报设计。" 573 | }, 574 | { 575 | "title": "第二章：海报设计基础", 576 | "description": "学习海报设计的基本原理和要素，包括色彩搭配、排版技巧、字体选择等，为创作令人印象深刻的海报打下基础。" 577 | }, 578 | { 579 | "title": "第三章：MidJourney工具介绍", 580 | "description": "深入了解MidJourney工具的各项功能和操作，包括素材库的使用、图层管理、图像处理等，掌握如何利用工具进行海报设计。" 581 | }, 582 | { 583 | "title": "第四章：创意海报构思", 584 | "description": "学习如何进行创意海报的构思和策划，包括目标受众分析、主题选择、创意发散等，为设计出独特和有吸引力的海报奠定基础。" 585 | }, 586 | { 587 | "title": "第五章：海报设计实践", 588 | "description": "通过实际案例演练，掌握如何使用MidJourney工具进行海报设计，包括添加图像、调整图层、应用特效等技巧和操作。" 589 | }, 590 | { 591 | "title": "第六章：创意海报优化", 592 | "description": "学习如何优化和完善创意海报，包括颜色调整、细节修饰、效果增强等，提升海报的吸引力和表现力。" 593 | }, 594 | { 595 | "title": "第七章：海报输出与分享", 596 | "description": "了解海报的输出格式和要求，学习如何导出高质量的海报文件，并掌握分享海报的方式和渠道，让你的创作得到更多的关注和赞赏。" 597 | }, 598 | { 599 | "title": "第八章：海报案例解析", 600 | "description": "分析和解读一些优秀的创意海报案例，探讨其设计思路和技巧，启发你在海报设计中的创意和灵感。" 601 | }, 602 | { 603 | "title": "第九章：品牌展示与个人推广", 604 | "description": "学习如何利用创意海报为品牌、活动或个人进行展示和推广，包括在社交媒体上发布、制作印刷品等方式，打造个性化的形象和品牌价值。" 605 | }, 606 | { 607 | "title": "第十章：创意海报设计进阶", 608 | "description": "进一步探索创意海报设计的高级技巧和趋势，了解最新的设计潮流和应用场景，为你的创作之路开拓更广阔的可能性。" 609 | }], 610 | "estimatedDate": "日期待定", 611 | "estimatedDuration": 30 612 | }, 613 | { 614 | "id": 4, 615 | "category": "绘图类", 616 | "title": "AI卡通形象创作", 617 | "description": "使用MidJourney的AI技术，学习如何将照片或人物形象转化为可爱的卡通形象，为个人品牌、社交媒体等打造独特形象。", 618 | "coverUrl": "自己cos的服务域名地址/images/course04/%E5%8D%A1%E9%80%9A%E4%BA%BA%E7%89%A9%E5%B0%81%E9%9D%A2.png", 619 | "images": [ 620 | "自己cos的服务域名地址/images/course04/%E5%8D%A1%E9%80%9A%E4%BA%BA%E7%89%A9%E5%B0%81%E9%9D%A2.png", 621 | "自己cos的服务域名地址/images/course04/%E5%8D%A1%E9%80%9A%E4%BA%BA%E7%89%A9%E8%BD%AE%E6%92%AD%E5%9B%BE01.png", 622 | "自己cos的服务域名地址/images/course04/%E5%8D%A1%E9%80%9A%E4%BA%BA%E7%89%A9%E8%BD%AE%E6%92%AD%E5%9B%BE02.png", 623 | "自己cos的服务域名地址/images/course04/%E5%8D%A1%E9%80%9A%E4%BA%BA%E7%89%A9%E8%BD%AE%E6%92%AD%E5%9B%BE03.png" 624 | ], 625 | "applyCount": 0, 626 | "likes": 0, 627 | "lecturer": { 628 | "avatar": "自己cos的服务域名地址/images/avatar01.png", 629 | "name": "amy.xue", 630 | "department": "AI工具探索者" 631 | }, 632 | "chapterList": [ 633 | { 634 | "title": "第一章：课程介绍", 635 | "description": "了解课程的概述和学习目标" 636 | }, 637 | { 638 | "title": "第二章：卡通形象的特点", 639 | "description": "探索卡通形象的基本特点和设计原则" 640 | }, 641 | { 642 | "title": "第三章：MidJourney工具介绍", 643 | "description": "学习MidJourney工具的功能和界面" 644 | }, 645 | { 646 | "title": "第四章：准备工作", 647 | "description": "了解进行AI卡通形象创作所需的前期准备" 648 | }, 649 | { 650 | "title": "第五章：选择素材照片", 651 | "description": "学习如何选择适合的照片作为卡通形象的基础" 652 | }, 653 | { 654 | "title": "第六章：形象转化", 655 | "description": "掌握将照片转化为卡通形象的技巧和方法" 656 | }, 657 | { 658 | "title": "第七章：特征调整与个性化", 659 | "description": "学习调整卡通形象特征和个性化定制的技巧" 660 | }, 661 | { 662 | "title": "第八章：表情和动作设计", 663 | "description": "探索为卡通形象设计表情和动作的创意方法" 664 | }, 665 | { 666 | "title": "第九章：配色和风格化", 667 | "description": "学习如何为卡通形象选择合适的配色和风格化处理" 668 | }, 669 | { 670 | "title": "第十章：应用和展示", 671 | "description": "实践应用所学知识，展示个人卡通形象的应用场景" 672 | } 673 | ], 674 | "estimatedDate": "日期待定", 675 | "estimatedDuration": 30 676 | }, 677 | { 678 | "id": 5, 679 | "category": "绘图类", 680 | "title": "电商模块图设计", 681 | "description": "学习如何使用MidJourney的工具和功能，设计吸引人的电商模块图，提升产品在电商平台上的吸引力和销售效果。", 682 | "coverUrl": "自己cos的服务域名地址/images/course05/%E7%94%B5%E5%95%86%E6%A8%A1%E7%89%B9%E5%B0%81%E9%9D%A2.png", 683 | "images": [ 684 | "自己cos的服务域名地址/images/course05/%E7%94%B5%E5%95%86%E6%A8%A1%E7%89%B9%E5%B0%81%E9%9D%A2.png", 685 | "自己cos的服务域名地址/images/course05/%E7%94%B5%E5%95%86%E6%A8%A1%E7%89%B9%E8%BD%AE%E6%92%AD%E5%9B%BE01.png", 686 | "自己cos的服务域名地址/images/course05/%E7%94%B5%E5%95%86%E6%A8%A1%E7%89%B9%E8%BD%AE%E6%92%AD%E5%9B%BE02.png", 687 | "自己cos的服务域名地址/images/course05/%E7%94%B5%E5%95%86%E6%A8%A1%E7%89%B9%E8%BD%AE%E6%92%AD%E5%9B%BE03.png" 688 | ], 689 | "applyCount": 0, 690 | "likes": 0, 691 | "lecturer": { 692 | "avatar": "自己cos的服务域名地址/images/avatar01.png", 693 | "name": "amy.xue", 694 | "department": "AI工具探索者" 695 | }, 696 | "chapterList": [ 697 | { 698 | "title": "第一章：课程介绍", 699 | "description": "了解课程的概述和学习目标" 700 | }, 701 | { 702 | "title": "第二章：电商模块图概述", 703 | "description": "探索电商模块图的基本概念和设计原则" 704 | }, 705 | { 706 | "title": "第三章：MidJourney工具介绍", 707 | "description": "学习MidJourney工具的功能和界面" 708 | }, 709 | { 710 | "title": "第四章：电商平台分析", 711 | "description": "了解各种电商平台的特点和需求" 712 | }, 713 | { 714 | "title": "第五章：模块图设计要素", 715 | "description": "学习电商模块图的设计要素和注意事项" 716 | }, 717 | { 718 | "title": "第六章：产品展示模块", 719 | "description": "掌握设计吸引人的产品展示模块的技巧和方法" 720 | }, 721 | { 722 | "title": "第七章：导航和分类模块", 723 | "description": "学习设计清晰的导航和分类模块以提升用户体验" 724 | }, 725 | { 726 | "title": "第八章：推广和促销模块", 727 | "description": "探索设计引人注目的推广和促销模块的创意方法" 728 | }, 729 | { 730 | "title": "第九章：购物流程模块", 731 | "description": "学习设计简洁流畅的购物流程模块以提升转化率" 732 | }, 733 | { 734 | "title": "第十章：响应式设计与适配", 735 | "description": "了解如何设计响应式的电商模块图并适配不同设备" 736 | } 737 | ], 738 | "estimatedDate": "日期待定", 739 | "estimatedDuration": 30 740 | }, 741 | { 742 | "id": 6, 743 | "category": "绘图类", 744 | "title": "企业标志设计与AI", 745 | "description": "利用MidJourney的AI设计功能，学习如何运用AI技术创造独特的企业标志，为企业形象打造专业和独特的标识。", 746 | "coverUrl": "自己cos的服务域名地址/images/course06/logo%E5%B0%81%E9%9D%A2.png", 747 | "images": [ 748 | "自己cos的服务域名地址/images/course06/logo%E5%B0%81%E9%9D%A2.png", 749 | "自己cos的服务域名地址/images/course06/logo%E8%BD%AE%E6%92%AD%E5%9B%BE01.png", 750 | "自己cos的服务域名地址/images/course06/logo%E8%BD%AE%E6%92%AD%E5%9B%BE02.png", 751 | "自己cos的服务域名地址/images/course06/logo%E8%BD%AE%E6%92%AD%E5%9B%BE03.png" 752 | ], 753 | "applyCount": 0, 754 | "likes": 0, 755 | "lecturer": { 756 | "avatar": "自己cos的服务域名地址/images/avatar01.png", 757 | "name": "amy.xue", 758 | "department": "AI工具探索者" 759 | }, 760 | "chapterList": [ 761 | { 762 | "title": "第一章：课程介绍", 763 | "description": "了解课程的概述和学习目标" 764 | }, 765 | { 766 | "title": "第二章：企业标志设计概述", 767 | "description": "探索企业标志设计的基本概念和设计原则" 768 | }, 769 | { 770 | "title": "第三章：MidJourney工具介绍", 771 | "description": "学习MidJourney工具的功能和界面" 772 | }, 773 | { 774 | "title": "第四章：企业标志设计要素", 775 | "description": "了解企业标志设计的关键要素和设计原则" 776 | }, 777 | { 778 | "title": "第五章：AI技术在标志设计中的应用", 779 | "description": "学习如何运用AI技术创造独特的企业标志" 780 | }, 781 | { 782 | "title": "第六章：品牌识别与定位", 783 | "description": "了解品牌识别和定位在标志设计中的重要性" 784 | }, 785 | { 786 | "title": "第七章：色彩和字体选择", 787 | "description": "学习如何选择适合企业形象的色彩和字体" 788 | }, 789 | { 790 | "title": "第八章：图形与形状设计", 791 | "description": "探索图形和形状设计的创意方法和技巧" 792 | }, 793 | { 794 | "title": "第九章：标志设计案例分析", 795 | "description": "分析并学习成功的企业标志设计案例" 796 | }, 797 | { 798 | "title": "第十章：标志设计实践", 799 | "description": "实践运用所学知识设计企业标志" 800 | } 801 | ], 802 | "estimatedDate": "2023年7月1日", 803 | "estimatedDuration": 30 804 | }, 805 | { 806 | "id": 7, 807 | "category": "编程类", 808 | "title": "AI助力高效前后端框架搭建", 809 | "description": "结合ChatGPT和GitHub Copilot，探索如何快速搭建高效的前后端框架，提升开发效率，让编码工作更轻松、高效。", 810 | "coverUrl": "自己cos的服务域名地址/images/course07/copilot%E5%B0%81%E9%9D%A2.png", 811 | "images": [ 812 | "自己cos的服务域名地址/images/course07/copilot%E5%B0%81%E9%9D%A2.png" 813 | ], 814 | "applyCount": 0, 815 | "likes": 0, 816 | "lecturer": { 817 | "avatar": "自己cos的服务域名地址/images/avatar01.png", 818 | "name": "amy.xue", 819 | "department": "AI工具探索者" 820 | }, 821 | "chapterList": [ 822 | { 823 | "title": "第一章：课程介绍", 824 | "description": "了解课程的概述和学习目标" 825 | }, 826 | { 827 | "title": "第二章：前后端框架基础", 828 | "description": "学习前后端框架的基本概念和工作原理" 829 | }, 830 | { 831 | "title": "第三章：ChatGPT和Copilot简介", 832 | "description": "探索ChatGPT和Copilot的功能和应用场景" 833 | }, 834 | { 835 | "title": "第四章：快速搭建前端框架", 836 | "description": "学习如何利用ChatGPT和Copilot快速搭建前端框架" 837 | }, 838 | { 839 | "title": "第五章：高效开发后端框架", 840 | "description": "探索利用ChatGPT和Copilot提高后端框架开发效率的方法" 841 | } 842 | ], 843 | "estimatedDate": "日期待定", 844 | "estimatedDuration": 30 845 | }, 846 | { 847 | "id": 8, 848 | "category": "编程类", 849 | "title": "使用ChatGPT从0-1搭建微信小程序", 850 | "description": "学习如何利用ChatGPT和微信小程序开发框架，从项目规划、界面设计、逻辑实现到发布上线的全流程，掌握微信小程序的开发要点和技巧。", 851 | "coverUrl": "自己cos的服务域名地址/images/course08/%E5%B0%8F%E7%A8%8B%E5%BA%8F%E5%B0%81%E9%9D%A2.png", 852 | "images": [ 853 | "自己cos的服务域名地址/images/course08/%E5%B0%8F%E7%A8%8B%E5%BA%8F%E5%B0%81%E9%9D%A2.png", 854 | ], 855 | "applyCount": 0, 856 | "likes": 0, 857 | "lecturer": { 858 | "avatar": "自己cos的服务域名地址/images/avatar01.png", 859 | "name": "amy.xue", 860 | "department": "AI工具探索者" 861 | }, 862 | "chapterList": [ 863 | { 864 | "title": "第一章：课程介绍", 865 | "description": "了解课程的概述和学习目标" 866 | }, 867 | { 868 | "title": "第二章：微信小程序开发入门", 869 | "description": "学习微信小程序的基本概念和开发环境的搭建" 870 | }, 871 | { 872 | "title": "第三章：界面设计与布局", 873 | "description": "探索微信小程序界面设计的基本原则和布局方法" 874 | }, 875 | { 876 | "title": "第四章：逻辑实现与数据交互", 877 | "description": "学习微信小程序逻辑实现和与后端数据交互的方法" 878 | }, 879 | { 880 | "title": "第五章：小程序发布与上线", 881 | "description": "了解微信小程序的发布流程和上线注意事项" 882 | }, 883 | { 884 | "title": "第六章：小程序优化与调试", 885 | "description": "学习微信小程序的性能优化和调试技巧" 886 | }, 887 | { 888 | "title": "第七章：小程序商业化变现", 889 | "description": "探索如何利用微信小程序进行商业化变现和推广" 890 | } 891 | ], 892 | "estimatedDate": "日期待定", 893 | "estimatedDuration": 30 894 | } 895 | ] 896 | }, 897 | onLaunch: function () { 898 | if (!wx.cloud) { 899 | console.error('请使用 2.2.3 或以上的基础库以使用云能力'); 900 | } else { 901 | wx.cloud.init({ 902 | // env 参数说明： 903 | // env 参数决定接下来小程序发起的云开发调用（wx.cloud.xxx）会默认请求到哪个云环境的资源 904 | // 此处请填入环境 ID, 环境 ID 可打开云控制台查看 905 | // 如不填则使用默认环境（第一个创建的环境） 906 | // env: 'my-env-id', 907 | traceUser: true, 908 | }); 909 | } 910 | // this.globalData = {}; 911 | this.fetchDataFromCOS(); // 从 COS 获取数据 912 | }, 913 | fetchDataFromCOS() { 914 | // 从 COS 获取 JSON 数据的示例接口地址 915 | const cosJsonUrl = '自己cos的服务域名地址/jsonData/course.json'; 916 | wx.request({ 917 | url: cosJsonUrl, 918 | method: 'GET', 919 | success: (res) => { 920 | const cosData = res.data; // 从响应中获取 JSON 数据 921 | // 处理数据并更新到 storage 922 | // 遍历cosData中的applyInfo.applyCounts 923 | cosData.applyInfo.applyCounts.forEach(applyCount => { 924 | // 在globalData中查找匹配的id 925 | const matchedData = this.globalData.data.find(data => data.id === applyCount.id); 926 | // 如果找到了匹配的数据，则更新applyCount字段 927 | if (matchedData) { 928 | matchedData.applyCount = applyCount.applyCount; 929 | } 930 | }); 931 | // 遍历cosData中的likeInfo.likeCounts 932 | cosData.likeInfo.likeCounts.forEach(likeCount => { 933 | // 在globalData中查找匹配的id 934 | const matchedData = this.globalData.data.find(data => data.id === likeCount.id); 935 | // 如果找到了匹配的数据，则更新likeCount字段 936 | if (matchedData) { 937 | matchedData.likes = likeCount.likeCount; 938 | } 939 | }); 940 | // 更新数据到 storage 941 | wx.setStorageSync('courseList', this.globalData.data); 942 | wx.setStorageSync('likeCourses', cosData.likeInfo.likeCourses); 943 | }, 944 | fail: (error) => { 945 | console.log('获取数据失败', error); 946 | } 947 | }); 948 | } 949 | }); 950 | --------------------------------------------------------------------------------