微信小程序视频教学
微信小程序视频教学之一（人邮版）
- 仿菜谱精灵微信小程序
- 需求描述及交互分析
- 设计思路及相关知识点
- 设计思路及相关知识点
- 幻灯片轮播设计
- 列表显示设计
- 列表详情设计
- 自定义分类设计
仿菜谱精灵微信小程序
课件以及源代码下载地址：https://pan.baidu.com/s/1mhVtHck
- 知识点
- 视图层：
wxml：界面的框架结构
wxss：界面的框架及元素的显示样式 - 逻辑层：
js：界面的逻辑
需求描述及交互分析
视频地址：http://www.proedu.com.cn/web/shareVideo/index.action?id=1033407&ajax=1
设计思路及相关知识点
视频地址：http://www.proedu.com.cn/web/shareVideo/index.action?id=1033403&ajax=1
设计思路及相关知识点
视频地址：http://www.proedu.com.cn/web/shareVideo/index.action?id=1033404&ajax=1
底部标签栏相关代码：
（注：app.json代码中不能有注释，直接复制需要去掉注释才能编译）
//app.json
{
"pages":[ //5个标签页面
"pages/subject/subject",
"pages/classify/classify",
"pages/download/download",
"pages/me/me",
"pages/setup/setup",
"pages/subjectDetail/subjectDetail"
],
"window":{ // 窗口顶部的属性
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#494949",
"navigationBarTitleText": "专题",
"navigationBarTextStyle":"white"
},
"tabBar": { //底部标签
"backgroundColor": "#303133",
"color": "#ffffff",
"selectedColor": "#CC1004",
"list": [{
"pagePath": "pages/subject/subject", //页面路径
"text": "专题", //标签注释
"iconPath": "pages/images/tab/subject-0.jpg", //未选中图片路径 白色
"selectedIconPath": "pages/images/tab/subject-1.jpg" //选中时候的图片路径 红色
},{
"pagePath": "pages/classify/classify",
"text": "分类",
"iconPath": "pages/images/tab/classify-0.jpg",
"selectedIconPath": "pages/images/tab/classify-1.jpg"
},{
"pagePath": "pages/download/download",
"text": "下载",
"iconPath": "pages/images/tab/download-0.jpg",
"selectedIconPath": "pages/images/tab/download-1.jpg"
},{
"pagePath": "pages/me/me",
"text": "我的",
"iconPath": "pages/images/tab/me-0.jpg",
"selectedIconPath": "pages/images/tab/me-1.jpg"
},{
"pagePath": "pages/setup/setup",
"text": "设置",
"iconPath": "pages/images/tab/setup-0.jpg",
"selectedIconPath": "pages/images/tab/setup-1.jpg"
}]
}
}
幻灯片轮播设计
视频地址：http://www.proedu.com.cn/web/shareVideo/index.action?id=1033405&ajax=1
- .wxml文件程序
- .js文件的程序
Page({
data:{
indicatorDots:true,
imgUrls:[
'/pages/images/haibao/haibao-1.jpg',
'/pages/images/haibao/haibao-2.jpg',
'/pages/images/haibao/haibao-3.jpg',
'/pages/images/haibao/haibao-4.jpg',
'/pages/images/haibao/haibao-5.jpg'
]
}
} )
- .wxss文件的程序
/* subject.wxss*/
/* 设置背景色 */
.content{
background-color: #f2f2f2;
}
/* 设置图片的占比 */
.section image{
width: 100%;
}
列表显示设计
视频地址：http://www.proedu.com.cn/web/shareVideo/index.action?id=1033402&ajax=1
-
按钮设计
-
.wxml程序
最新
最热
- .wxss程序
/* subject.wxss */
/* 按钮设置 */
.opr{
display: flex;
flex-direction: row;
}
.btn{
/* 图标和文字一行分布 */
display: flex;
flex-direction: row;
width: 43%;
background-color: #ffffff;
height: 46px;
/* 居中 */
margin: 0 auto;
margin-top: 10px;
/* 行间距 */
line-height: 46px;
/* 圆弧 */
border-radius:5px;
}
.btn view{
margin: 0 auto;
margin-top:3px;
}
--------------------------------------
-
列表设计
-
.wxml程序
爱心早餐
共26个菜谱
19
13298
- .wxss程序
/* subject.wxss*/
/* 列表 */
/* 图 */
.item{
display: flex;
flex-direction: row;
margin:15px;
}
/* 文 */
.desc{
margin-left:20px;
line-height: 30px;
}
/* 标题加粗 */
.title{
font-weight: bold;
}
.count{
display: flex;
flex-direction: row;
font-size: 14px;
/* 浅灰色 */
color: #666666;
}
/* 图片位置 */
.count image{
margin-left: 10px;
margin-top:7px;
}
/* 间隔线设置 */
.hr{
height: 1px;
background-color: #cccccc;
/* 透明度 */
opacity: 0.5;
}
列表详情设计
视频地址：http://www.proedu.com.cn/web/shareVideo/index.action?id=1033401&ajax=1
- 注意页面之间的切换方法。
自定义分类设计
视频地址：http://www.proedu.com.cn/web/shareVideo/index.action?id=1033406&ajax=1
--------------------------------
THE END