网站建设维护内容,视频网站建设价位,试用网站源码,使用WordPress没有发布按钮uniapp快速开发小程序全流程
完整项目代码#xff1a;https://gitee.com/Zifasdfa/ziyi-app 欢迎fork与star 1 项目效果及环境准备
1.1 项目效果 本文主要使用uniapp实现一个简单的app应用 1.2 环境准备项目初始化 ①node环境#xff1a;去node.js官网下载稳定版的nod…uniapp快速开发小程序全流程
完整项目代码https://gitee.com/Zifasdfa/ziyi-app 欢迎fork与star 1 项目效果及环境准备
1.1 项目效果 本文主要使用uniapp实现一个简单的app应用 1.2 环境准备项目初始化 ①node环境去node.js官网下载稳定版的node即可下载之后配置环境变量通过node -v查看是否配置成功 ② 开发工具选择HBuilder-X 官网下载地址https://uniapp.dcloud.net.cn/quickstart.html# 根据自己的操作系统下载对应的环境即可下载好之后双击.exe文件打开HBuilderX 点击左上角文件 - 新建项目 - 选择uni-app项目填写对应项目名其他默认即可【这里我采用vue2的语法】
效果 展示效果选择手机页面方式 当然我们也可以通过数据线将手机与电脑连接起来然后直接在真机上运行。
2 实现tabbar底部导航
增加底部导航为首页、分类、学习、我的 官网tabbar教程https://uniapp.dcloud.net.cn/collocation/pages.html#tabbar tabBar 中的 list 是一个数组只能配置最少2个、最多5个 tabtab 按数组的顺序排序。 ①导入图片资源 导入所给源码中的static下的图片 ②新建tabbar目录及对应页面 因为我们整个项目是将底部导航栏中的index默认为首页因此删除之前pages目录的index整个文件夹并在pages下新建tabbar目录然后在tabbar目录下分别新建classify、index、mine、study页面 ③修改页面主题颜色修改App.vue
style/*每个页面公共css 修改页面主背景色为灰色配合白色的底部导航栏*/body{background-color: #f8f8f8;}
/style④配置底部导航栏修改package.json
配置页面 在pages配置下修改页面配置包括修改页面路径及是否允许下拉刷新等 {pages: [ //pages数组中第一项表示应用启动页参考https://uniapp.dcloud.io/collocation/pages{//指定有哪些页面并配置样式path : pages/tabbar/index/index,style : {//页面顶部的文本navigationBarTitleText:首页,navigationStyle:custom}},{path : pages/tabbar/classify/classify,style : {navigationBarTitleText:分类,navigationBarBackgroundColor:#00b783,navigationBarTextStyle:white,//不启动下拉刷新enablePullDownRefresh:false}},{path : pages/tabbar/study/study,style : {navigationBarTitleText:学习中心,navigationBarBackgroundColor:#00b783,navigationBarTextStyle:white,enablePullDownRefresh:false}},{path : pages/tabbar/mine/mine,style : {navigationBarTitleText:个人中心,navigationBarBackgroundColor:#00b783,navigationBarTextStyle:white,enablePullDownRefresh:false}}],...
}新增tabbar配置 包括配置文本选中未选中时候的图标等 {pages: [ //pages数组中第一项表示应用启动页参考https://uniapp.dcloud.io/collocation/pages....// 底部导航栏tabBar:{color:#999,//选中时的颜色selectedColor:#00b783,borderStyle:white,backgroundColor:#FFFFFF,list:[{//底部导航栏的index对应页面pagePath:pages/tabbar/index/index,//对应文本text:首页,//未选中时的图标iconPath:static/tabar1.png,//选中之后的图标selectedIconPath:static/tabaron1.png},{pagePath:pages/tabbar/classify/classify,text:分类,iconPath:static/tabar2.png,selectedIconPath:static/tabaron2.png},{pagePath:pages/tabbar/study/study,text:学习,iconPath:static/tabar3.png,selectedIconPath:static/tabaron3.png},{pagePath:pages/tabbar/mine/mine,text:我的,iconPath:static/tabar4.png,selectedIconPath:static/tabaron4.png}]}
}⑤查看效果
然后重新运行在浏览器如果显示不出效果则先暂停然后重新运行在对应浏览器 效果 3 实现搜索框使用第三方组件实现
①下载第三方组件 组件 - 自定义导航栏-下载组件 选择下载并导入 注意下载插件是需要注册账号并登录的如果没有账号的话注册并登录即可 导入成功之后的效果
②安装scss/sass插件 因为我们后续会使用到css中的scss语法所以需要提前安装插件 工具 - 插件安装 如果已经存在则无需安装 否则点击安装新插件插件市场中搜索sass然后选择下载插件并导入
③抽取nav-bar组件防止主页面代码过多不易维护 在components组件下新建navbar目录然后在navbar目录下创建navbar.vue文件 navbar.vue:
templateviewview classexample-body!--uni-nav-bar 中的 statusBar 主要是为了适配齐刘海防止navbar遮盖住手机顶部的电量、时间等状态 --uni-nav-bar shadow statusBar :fixedfalse color#333333 background-color#FFFFFF right-iconscanview classinput-viewuni-icons classinput-uni-icon typesearch size22 color#666666 /input confirm-typesearch classnav-bar-input typetext placeholder输入搜索关键词/view/uni-nav-bar/view/view
/templatescriptimport uniNavBar from /components/uni-nav-bar/uni-nav-bar.vueexport default {data() {return {}},methods: {},components: {uniNavBar}}
/scriptstyle langscss.input-view {/* #ifndef APP-PLUS-NVUE */display: flex;/* #endif */flex-direction: row;width: 600rpx;flex: 1;background-color: #f8f8f8;height: 30px;border-radius: 15px;padding: 0 15px;flex-wrap: nowrap;margin: 7px 0;line-height: 30px;}.input-uni-icon {line-height: 30px;}.nav-bar-input {height: 30px;line-height: 30px;/* #ifdef APP-PLUS-NVUE */width: 370rpx;/* #endif */padding: 0 5px;font-size: 28rpx;background-color: #f8f8f8;}.example-body {padding: 0;}
/style④在pages/tabbar/index/index.vue中引入Navbar组件
templateview!-- 引入顶部搜索框导航栏 --Navbar//view
/templatescriptimport Navbar from ../../../components/navbar/navbar.vueexport default {data() {return {}},methods: {},components:{Navbar,}}
/script⑤效果
页面效果
4 首页实现Banner轮播图 通过网络请求动态获取图片数据 4.1 通过网络请求获取数据
①uni.request发起网络请求 pages/tabbar/index/index.vue
scriptimport Navbar from ../../../components/navbar/navbar.vueexport default {data() {return {//多张图片用数组存放topBanner: [],}},methods: {},mounted(){//vue的生命周期函数uni.request({url: http://html5.bjsxt.cn/api/index/banner,//注意网络请求必须要按照下面的方式发起不能使用新语法等success: (res) {// console.log(res)this.topBanner res.data.top_banner}})},components:{Navbar,}}
/script②通过console.log打印网络请求所返回的数据 ③根据网络返回的结果获取图片 需要根据自己的手机型号进行样式的调整 pages/tabbar/index/index.vue
templateview classhome!-- 引入顶部搜索框导航栏 --Navbar/view classindex_banner_box!-- 顶部banner,同时配置对应参数 --swiper classswiper :indicator-dotstrue :autoplaytrue :interval3000 :duration500!-- 从图片数组中取出对应图片并展示在页面上 --swiper-item v-for(item, index) in topBanner :keyindeximage classbanner :srcitem.img_url mode/image/swiper-item/swiper/view/view
/templatescript...
/script!-- 使用scss的语法 --
style langscss.home {//flex盒子模型display: flex;flex-direction: column;flex: 1;overflow: hidden;.index_banner_box {display: flex;width: 100%;padding: 10px;justify-content: center;align-items: center;border-radius: 5px;overflow: hidden;.swiper{width: 100%;height: 260rpx;.banner{width: 700rpx;height: 260rpx;}}}}
/style4.2 在页面中展示图片数据并配置样式
4.3 结果 5 实现课程导航 注意import用于在js中引入css文件 import用于在css中引入css文件 5.1 抽取课程导航coursenav为component并编写页面
①引入源码中common下的图标样式css文件等 ②在components文件夹下新建coursenav coursenav.vue:
templateview classcourse_nav_conview classcourse_nav_info v-for(item, index) in list :keyindextext classcourse_nav_icon icon iconfont :classitem.icon/textview classcourse_info_text{{item.text}}/view/view/view
/templatescriptexport default {data() {return {list: []}},mounted() {uni.request({url: http://html5.bjsxt.cn/api/index/nav,success: (res) {this.list res.data.data}})},methods: {}}
/scriptstyle langscss// import用于在js中引入css文件 import用于在css中引入css文件import /common/font/iconfont.css;.course_nav_con {display: flex;// 盒子模型不撑开容器本身大小box-sizing: border-box;flex-direction: row;flex-wrap: wrap;padding: 15px 10px;.course_nav_info {width: 20%;flex-direction: row;flex-wrap: wrap;text-align: center;margin-bottom: 15px;.course_nav_icon {font-size: 30px;}.icon-java {color: #2a83fe;}.icon-weifuwu {color: #fd3761;}.icon-zuzhijiagou {color: #2b91e2;}.icon-dashuju {color: #2a83fe;}.icon-h {color: #00b478;}.icon-icon-- {color: #fd6012;}.icon-rengongzhineng {color: #fe391f;}.icon-ruanjianceshi {color: #00b478;}.icon-huatong {color: #fea917;}.icon-bianchengshibaobiao_icon {color: #2a83fe;}.icon-jianmo {color: #00b478;}.icon-chuangye {color: #fe391f;}.course_info_text {width: 100%;font-size: 13px;margin-top: 10px;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;}}}
/style5.2 主页导入课程 在pages/tabbar/index/index.vue中引入CourseNar import CourseNav from “…/…/…/components/coursenav/coursenav.vue”components中添加CourseNav,template标签中添加CourseNav/ templateview classhome!-- 引入顶部搜索框导航栏 --Navbar/view classindex_banner_box!-- 顶部banner,同时配置对应参数 --swiper classswiper :indicator-dotstrue :autoplaytrue :interval3000 :duration500!-- 从图片数组中取出对应图片并展示在页面上 --swiper-item v-for(item, index) in topBanner :keyindeximage classbanner :srcitem.img_url mode/image/swiper-item/swiper/view!-- 课程导航栏 --CourseNav//view
/templatescriptimport Navbar from ../../../components/navbar/navbar.vueimport CourseNav from ../../../components/coursenav/coursenav.vueexport default {data() {return {//多张图片用数组存放topBanner: [],}},methods: {},mounted(){//vue的生命周期函数uni.request({url: http://html5.bjsxt.cn/api/index/banner,//注意网络请求必须要按照下面的方式发起不能使用新语法等success: (res) {// console.log(res)this.topBanner res.data.top_banner}})},components:{Navbar,CourseNav,}}
/script5.3 效果 部分网络上的css及图标样式已经获取不到了所以大家可以替换新的网络地址来获取对应的图标 6 实现限时免费
6.1 创建free-card的components 新建free-card目录然后新建free-card.vue文件 templateviewview classfree_card_box v-for(item, index) in teaList :keyindex!-- 老师图片 --view classfree_card_imgimage :srcitem.teacher_logo mode/image/view!-- 限时免费文本信息 --view classfree_card_txtview classfree_card_T{{ item.limitName }}/viewview classfree_card_infoview classfree_card_info_txtview classinfo_txt1{{ item.teacher_name }}{{ item.teacher_job }}/viewview{{ item.limitNum }}人学过/view/viewview classfree_card_info_btn v-ifitem.baoming 马上报名{{ item.baoming }}/viewview classfree_card_info_btn free_card_info_btn1 v-else{{ item.baoming }}/view/view/view/view/view
/templatescriptexport default {name:free-card,data() {return {teaList:[]}},mounted(){uni.request({url:http://html5.bjsxt.cn/api/index/specific?userid2162,success: (res) {this.teaList res.data.data}})},methods: {}}
/script!-- .free_card_box的class里面再点.free_card_img的class 为 scss语法 --
style langscss.free_card_box{display: flex;padding: 10px 0;margin: 10px;border-radius: 10px;box-shadow: 0 0 5px 1px rgba($color: #000000, $alpha: 0.1);box-sizing: border-box;align-items: center;margin-bottom: 15px;background-color: #fff;.free_card_img{flex-shrink: 0;width: 91rpx;height: 91rpx;border-radius: 100%;margin: 0 15px;image{width: 100%;height: 100%;border-radius: 100%;}}.free_card_txt{width: 100%;display: flex;box-sizing: border-box;flex-direction: column;padding: 0 15px 0 0;.free_card_T{font-size: 16px;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;margin: 10px 0;}.free_card_info{width: 100%;display: flex;box-sizing: border-box;flex-flow: row nowrap;justify-content: space-between;.free_card_info_txt{width: 60%;overflow: hidden;font-size: 16px;color: #666;.info_txt1{height: 20px;font-size:14px;overflow: hidden;}}.free_card_info_btn{width: 100px;height: 34px;text-align: center;line-height: 34px;border-radius: 34px;background-color: #00b783;color: #fff;font-size: 16px;margin-top: 10px;}.free_card_info_btn1{background-color: #ddd;}}}}
/style6.2 首页引入free-card 在script标签中导入在component中导入在页面中引用 修改pages/tabbar/index/index.vue ①在课程导航栏下方添加FreeCard组件及在线课程图标 !-- 课程导航栏 --CourseNav/!-- 在线课程图标 --view classonline_boximage :srcindex_banner.img_url classonline_img/image/viewview classfree_boxview classfree_T_box public_tow_boxview classpublic_T限时免费/view/viewFreeCard //view②在script中获取图片和文本数据并引入FreeCard组件
scriptimport Navbar from ../../../components/navbar/navbar.vueimport CourseNav from ../../../components/coursenav/coursenav.vueimport FreeCard from ../../../components/free-card/free-card.vueexport default {data() {return {//多张图片用数组存放topBanner: [],index_banner:{},}},methods: {},mounted(){//vue的生命周期函数uni.request({url: http://html5.bjsxt.cn/api/index/banner,//注意网络请求必须要按照下面的方式发起不能使用新语法等success: (res) {// console.log(res)this.topBanner res.data.top_bannerthis.index_banner res.data.index_banner}})},components:{Navbar,CourseNav,FreeCard, //引入限时免费组件}}
/script③在style中新增css样式
!-- 使用scss的语法 --
style langscss.home {//flex盒子模型display: flex;flex-direction: column;flex: 1;overflow: hidden;.index_banner_box {display: flex;width: 100%;padding: 10px;justify-content: center;align-items: center;border-radius: 5px;overflow: hidden;.swiper{width: 100%;height: 260rpx;.banner{width: 700rpx;height: 260rpx;}}}.online_box{display: flex;width: 724rpx;justify-content: center;align-items: center;box-sizing: border-box;overflow: hidden;margin-bottom: 15px;.online_img{//1px 约等于2 rpxwidth: 724rpx;height: 132rpx;}}.public_tow_box{display: flex;width: 100%;justify-content: center;align-items: center;box-sizing: border-box;overflow: hidden;padding: 0 15px;justify-content: space-between;align-content: space-between;flex-wrap: wrap;.public_T{font-size: 20px;font-weight: 700;}}.public_title{width: 100%;display: flex;padding: 0 15px;flex-direction: column;.public_class_t{font-size: 22px;font-weight: 700;margin-bottom: 15px;}}}
/style6.4 效果 7 实现就业班模块 view标签与div标签区别 view标签通常具有更丰富的功能比如数据绑定、事件处理等。而div标签只是一个简单的容器没有特定的功能。 7.1 创建jobScroll 步骤与前面大同小异 template!-- 就业班模块根据接口返回数据拼装内容 --view classjob_scroll_boxscroll-view scroll-xtrue classjob_scroll_con_boxview classjob_scroll_conview classjob_scroll_info v-for(item,index) in list :keyindexview classjob_scroll_card :classitem.colorsview classjob_scroll_card_T{{ item.textT }}/viewview classjob_scroll_card_iconview classicon iconfont :classitem.icon/view/viewview classjob_scroll_card_des{{ item.text }}/viewview classjob_scroll_card_btn免费试学/view/view/view/view/scroll-view/view
/templatescriptexport default {data() {return {list: []}},mounted() {uni.request({url: http://html5.bjsxt.cn/api/index/course,success: (res) {this.list res.data.data}})},methods: {}}
/scriptstyle langscss// import 从css中引入cssimport /common/font/iconfont.css;.job_scroll_box {width: 100%;margin-bottom: 30px;box-sizing: border-box;.job_scroll_con {display: flex;align-items: center; //垂直据中flex-wrap: nowrap; //不换行box-sizing: border-box;.job_scroll_info {width: 225px;height: 260px;flex-shrink: 0;margin: 0 10px;.job_scroll_card {display: flex;flex-flow: column;box-sizing: border-box;align-items: center; //水平据中width: 100%;height: 248px;background-color: #b0def5;border-radius: 5px;margin-top: 12px;.job_scroll_card_T {display: flex;align-items: center; //水平据中justify-content: center; //垂直居中width: 210px;height: 38px;background-color: #e4f3fb;font-size: 16px;text-align: center;margin-top: -15px;border-bottom-left-radius: 25px;border-bottom-right-radius: 25px;border-top-left-radius: 15px;border-top-right-radius: 15px;}.job_scroll_card_icon {display: flex;align-items: center; //水平据中justify-content: center; //垂直居中box-sizing: border-box;width: 90px;height: 90px;background-color: #d3ecf9;border-radius: 100%;margin: 20px 0 15px;view {font-size: 42px;color: #2a83fe;}}.job_scroll_card_des {display: flex;box-sizing: border-box;align-items: center; //水平据中font-size: 14px;}.job_scroll_card_btn {display: flex;box-sizing: border-box;align-items: center;justify-content: center; //垂直居中width: 118px;height: 32px;line-height: 32px;color: #0a5ea0;font-size: 16px;border-radius: 34px;border: 1px solid #0a5ea0;margin-top: 15px;}}.job_scroll_card2 {background-color: #fed2b0;.job_scroll_card_T {background-color: #fff2e7;}.job_scroll_card_icon {background-color: #fee6d3;view {color: #d87e4e;}}.job_scroll_card_btn {color: #c44606;border: 1px solid #c44606;}}.job_scroll_card3 {background-color: #fee4b7;.job_scroll_card_T {background-color: #fef4e2;}.job_scroll_card_icon {background-color: #fef0d7;view {color: #b17001;}}.job_scroll_card_btn {color: #b17001;border: 1px solid #b17001;}}.job_scroll_card4 {background-color: #f5bcf7;.job_scroll_card_T {background-color: #fae0fb;}.job_scroll_card_icon {background-color: #f9d9fa;view {color: #8f0494;}}.job_scroll_card_btn {color: #8f0494;border: 1px solid #8f0494;}}.job_scroll_card5 {background-color: #cff2cb;.job_scroll_card_T {background-color: #ebf9e9;}.job_scroll_card_icon {background-color: #e4f7e2;view {color: #138a06;}}.job_scroll_card_btn {color: #138a06;border: 1px solid #138a06;}}.job_scroll_card6 {background-color: #f9cbc8;.job_scroll_card_T {background-color: #fce8e6;}.job_scroll_card_icon {background-color: #fbe2e0;view {color: #980c03;}}.job_scroll_card_btn {color: #980c03;border: 1px solid #980c03;}}.job_scroll_card7 {background-color: #f3eaa3;.job_scroll_card_T {background-color: #f8f3cc;}.job_scroll_card_icon {background-color: #f8f3cc;view {color: #786b03;}}.job_scroll_card_btn {color: #786b03;border: 1px solid #786b03;}}.job_scroll_card8 {background-color: #b4eef3;.job_scroll_card_T {background-color: #e4f9fb;}.job_scroll_card_icon {background-color: #d5f5f8;view {color: #088691;}}.job_scroll_card_btn {color: #088691;border: 1px solid #088691;}}.job_scroll_card9 {background-color: #f7c8a4;.job_scroll_card_T {background-color: #fcebdd;}.job_scroll_card_icon {background-color: #fae0cc;view {color: #9c4604;}}.job_scroll_card_btn {color: #9c4604;border: 1px solid #9c4604;}}.job_scroll_card10 {background-color: #cfd2fe;.job_scroll_card_T {background-color: #edefff;}.job_scroll_card_icon {background-color: #e4e6fe;view {color: #4e06ab;}}.job_scroll_card_btn {color: #4e06ab;border: 1px solid #4e06ab;}}}}}
/style7.2 首页中引入
pages/tabbar/index/index.vue: !-- view标签功能更强大表示一个视图 --view classpublic_titleview classpublic_class_t零基础就业班/viewJobScroll //view其他和前面类似导入JobScroll组件然后在页面中引用即可 7.3 效果 8 实现课程推荐部分
8.1 新增course-card这个component
templateview classcourse_card_boxview classcourse_card_conview classcourse_card_info v-for(item,index) in list :keyindexview classcourse_card_imgimage :srcitem.logo mode/image/viewview classcourse_card_desview classcourse_card_des_T{{ item.textT }}/viewview classcourse_card_des_infoview classcourse_card_des_pay¥{{item.money}}/viewview classcourse_card_des_icontext classicon iconfont icon-yonghu2/text{{item.hits}}人学过/view/view/view/view/view/view
/templatescriptexport default {data(){return{list:[]}},mounted(){uni.request({url:http://html5.bjsxt.cn/api/index/recommend,success: (res) {this.list res.data.data}})}}/scriptstyle langscssimport /common/font/iconfont.css;.course_card_box {width: 100%;display: flex;box-sizing: border-box;padding: 0 15px;margin-bottom: 15px;overflow: hidden;align-items: center;justify-content: center;.course_card_info {display: flex;box-sizing: border-box;width: 100%;background: #fff;border-radius: 15px;padding: 10px;margin-bottom: 15px;flex-direction: row;align-items: center; //子元素垂直居中.course_card_img {flex-shrink: 0;margin-right: 15px;image {width: 240rpx;height: 140rpx;}}.course_card_des {width: 100%;display: flex;box-sizing: border-box;flex-direction: column;.course_card_des_T {font-size: 16px;line-height: 24px;margin-bottom: 5px;}.course_card_des_info {width: 100%;display: flex;flex-direction: row; //横向排列box-sizing: border-box;justify-content: space-between;/* 横向中间自动空间 */align-content: space-between;/* 竖向中间自动空间 */flex-wrap: wrap;/* 换行 */.course_card_des_pay {font-size: 12px;color: #ff5200;text {font-size: 16px;}}.course_card_des_icon {font-size: 14px;color: #333;text {font-size: 14px;color: #666;margin: 0 2px 0 0;}}}}}}
/style
8.2 首页引入
templateview classhome...!-- view标签功能更强大表示一个视图 --view classpublic_titleview classpublic_class_t零基础就业班/viewJobScroll //viewview classrecommend_boxview classrecommed_T_box public_tow_boxview classpublic_T推荐课程/view/viewCourseCard //viewview classdaotu_boxview classdaotu_T驱动教学-贯穿教学练测评/viewimage :srcfontBanner.img_url mode/image/view/view
/template
scriptimport Navbar from ../../../components/navbar/navbar.vueimport CourseNav from ../../../components/coursenav/coursenav.vueimport FreeCard from ../../../components/free-card/free-card.vueimport JobScroll from ../../../components/jobscroll/jobscroll.vueimport CourseCard from ../../../components/course_card/course_card.vueexport default {data() {return {//多张图片用数组存放topBanner: [],index_banner:{},fontBanner:{}}},methods: {},mounted(){//vue的生命周期函数uni.request({url: http://html5.bjsxt.cn/api/index/banner,//注意网络请求必须要按照下面的方式发起不能使用新语法等success: (res) {// console.log(res)this.topBanner res.data.top_bannerthis.index_banner res.data.index_bannerthis.fontBanner res.data.foot_banner}})},components:{Navbar,CourseNav,FreeCard, //引入限时免费组件JobScroll,CourseCard}}
/script8.3 效果 9 课程列表详情、课程介绍详情实现
9.1 新建courseIntroduce页面
①新建courseIntroduce目录及页面
②修改pages.json
//在pages配置下新增courseIntroduce配置,{path : pages/course/courseIntroduce/courseIntroduce,style : {navigationBarTitleText: 课程介绍,navigationBarBackgroundColor:#0c9c8f,navigationBarTextStyle:white,enablePullDownRefresh: false}}9.2 给coursenav.vue新增点击事件 //template部分新增点击事件view classcourse_nav_info v-for(item, index) in list :keyindex clickcourseItemHandle(item.id,item.course)text classcourse_nav_icon icon iconfont :classitem.icon/textview classcourse_info_text{{item.text}}/view/view...
script...methods: {// 点击事件点击图标跳转页面并传入id和coursecourseItemHandle(id, course){uni.navigateTo({// url为pages中配置的courseIntroduce配置的页面路径同时将id和course传过去url:/pages/couser/courseIntroduce/courseIntroduce?id id coursecourse})}}
/script9.3 新增course-jieshao、courseList、courseIntroduce-data component course-jieshao.vue:
templateview classcourse_jieshao_boximage :srcimages mode :style{ height:imageHeight rpx }/image/view
/templatescriptexport default {data() {return {}},props:{images:{type:String,defualt:},imageHeight:{type:String,default:}},methods: {}}
/scriptstyle langscss.course_jieshao_box{display: flex;box-sizing: box;flex-direction: column;justify-content: center;width: 100%;image{width: 750rpx;}}
/stylecourseList.vue:
templateview classcourse_list_boxview classcourse_list_conview classcourse_list_info clickclickViode v-for(item,index) in videoList :keyindexview class.course_list_info_txt{{ item.type_name }}/view/view/view/view
/templatescriptexport default {data() {return {}},props: {videoList: {type: Array,default: function() {return []}}},methods: {clickViode(){uni.navigateTo({url:/pages/couser/video/video})}}}
/scriptstyle langscss.course_list_box {display: flex;box-sizing: border-box;flex-direction: column;width: 100%;padding: 0 15px;.course_list_con {display: flex;box-sizing: border-box;flex-direction: column;flex-grow: 1;.course_list_info {display: flex;box-sizing: border-box;flex-direction: center;overflow: hidden;flex: 1;width: 100%;height: 45px;line-height: 45px;font-size: 14px;border-bottom: 1px solid #efefef;.course_list_info_txt {white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}}}}
/style
courseIntroduce-data.vue
templateview classcourseIntroduce_data_boxview classcourseIntroduce_data_info v-for(item,index) in msg :keyindexview classcourseIntroduce_data_txt1text{{ item.num }}/text/viewview classcourseIntroduce_data_txt2text{{ item.txt }}/text/view/view/view
/templatescriptexport default {data() {return {}},props:{msg:{type:Array,default:function(){return []}}},methods: {}}
/scriptstyle langscss.courseIntroduce_data_box {display: flex;box-sizing: border-box;flex-direction: row;/*横向排列*/flex-wrap: wrap;/* 换行排列 */justify-content: center;/*居中对齐*/width: 100%;padding: 15px 10px;.courseIntroduce_data_info {display: flex;box-sizing: box;flex-direction: column;justify-content: center;align-items: center;width: 25%;height: 80px;flex-grow: 1;position: relative;.courseIntroduce_data_txt1 {text-align: center;width: 100%;font-size: 12px;color: #ff5200;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;margin-bottom: 10px;text {font-size: 16px;}}.courseIntroduce_data_txt2 {text-align: center;width: 100%;font-size: 13px;color: #333;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}}}
/style
9.4 courseIntroduce页面中引入course-jieshao、courseList、courseIntroduce-data组件
courseIntroduce.vue:
templateview classhomeview classcourseIntroduce_boxview classcourseIntroduce_desview classcourseIntroduce_info{{ introduce }}/view/viewCourseIintroduceData :msgintroduceList/view classquestion_line/viewview classcourseIntroduce_tab_boxview classcourseIntroduce_tab_navview v-for(item,index) in items :class{ btna:count index } tapchange(index) :keyindex{{ item }}/view/viewview classcourseIntroduce_tab_conview classdiscount_info :class{dis:count 0}CourseList :videoListClist//viewview classdiscount_info :class{dis:count 1}CourseJieshao :imagesimageT :imageHeightimageHeight//view/view/view/view/view
/templatescriptimport CourseIintroduceData from ../../../components/courseIntroduce-data/courseIntroduce-data.vueimport CourseList from ../../../components/courseList/courseList.vueimport CourseJieshao from ../../../components/course-jieshao/course-jieshao.vueexport default {data() {return {introduce:,introduceList:[],items:[课程章节,课程介绍],count:0,Clist:[],imageT:,imageHeight:}},components:{CourseIintroduceData,CourseList,CourseJieshao},onLoad(options) {uni.request({url: https://www.itbaizhan.cn/api/course/detail,// 参数data: {id: options.id,course: options.course},success: (res) {this.introduce res.data.data.introducethis.introduceList res.data.data.introduceListthis.Clist res.data.data.Clistthis.imageT res.data.data.imagethis.imageHeight res.data.data.height}})},methods: {change(index){this.count index;}}}
/script
style langscss.courseIntroduce_box {display: flex;box-sizing: box;flex-direction: column;margin-bottom: 90px;.courseIntroduce_des {display: flex;box-sizing: border-box;flex-direction: column;justify-content: center;align-items: center;width: 100%;background-color: #0c9c8f;padding: 0 10px 15px;overflow: hidden;.courseIntroduce_info {display: flex;box-sizing: box;width: 100%;color: #fff;font-size: 16px;line-height: 24px;}}//tab.courseIntroduce_tab_box {display: flex;box-sizing: border-box;flex-direction: column;.courseIntroduce_tab_nav {display: flex;box-sizing: border-box;flex-direction: row;background-color: #fff;border-bottom: 1px solid #e4e4e4;margin-bottom: 20px;view {height: 50px;line-height: 50px;font-size: 16px;flex-grow: 1;text-align: center;background-color: #fff;}}.discount_info {display: none;}.btna {display: flex;box-sizing: border-box;justify-content: center; //水平方向对齐color: #00b783;position: relative;}.btna::after {content: ;width: 40px;height: 3px;background-color:#00b783;position: absolute;bottom: 0;left: 50%;margin-left: -20px;}.dis {display: block;}}}
/style
9.5 效果 10 播放页面实现(webView) web-view在浏览器中内嵌网页可以理解为一个内嵌的浏览器 10.1 创建video页面 video.vue:
templateview!-- 后期根据课程详情页面跳转时传过来的数据请求后端或者拼接对应视频地址替换即可 --web-view srchttps://www.bilibili.com/video/BV1ZM4y177kh//web-view/view
/templatescriptexport default {data() {return {}},methods: {}}
/scriptstyle/style
10.2 给courseList添加点击事件跳转视频播放
courseList.vue:
templateview classcourse_list_boxview classcourse_list_conview classcourse_list_info clickclickViode v-for(item,index) in videoList :keyindexview class.course_list_info_txt{{ item.type_name }}/view/view/view/view
/template
scriptmethods: {clickViode(){uni.navigateTo({// 跳转视频播放页面url:/pages/course/video/video})}}}
/script10.3 效果 bug 如果运行项目发现报错‘core-js/modules/es.string.iterator.js’ 则表明缺少core-js环境在终端cmd执行下面命令 # 安装core-js之后重新启动项目
npm i core-js -D11 打包发布项目
11.1 app打包
①在manifest.json中配置AppID、图标等如果没有AppID则重新获取 ②选择应用顶部的发行 - 云打包 - 填写对应信息证书等
11.2 小程序打包 以微信小程序为例 ①下载微信开发者工具并开放端口供uniapp调用设置-安全-打开服务端口 ②从uniapp直接跳转到微信开发者工具 ③接下来的发布就和小程序发布一样了 详情参考https://blog.csdn.net/weixin_45565886/article/details/130918238 填写AppId等
