版权声明：如有错误或侵权，请指正。 https://blog.csdn.net/weixin_44101331/article/details/85710267
微信小程序视频教学之一（人邮版）
仿菜谱精灵微信小程序
课件以及源代码下载地址：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文件程序
<!-- subjiect.wxml-->
<view class="content">
<view class="section">
<!-- 滑块视图容器 -->
<swiper autoplay="true" interval="3000" duration="1000" indicator-dots="{{indicatorDots}}">
<!--数组 -->
<block wx:for="{{imgUrls}}">
<swiper-item>
<image src="{{item}}" width="350" height="211" class="slide-image"></image>
</swiper-item>
</block>
</swiper>
</view>
- .js文件的程序
<!-- subjiect.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程序
<!--subject.wxml -->
<!-- “最新，最热”的按钮 -->
<view class="opr">
<view class="btn">
<view>
<image src="/pages/images/icon/zuixin.jpg" style="width:36px;height:25px;"></image>
</view>
<view>最新</view>
</view>
<view class="btn">
<view>
<image src="/pages/images/icon/zuire.jpg" style="width:32px;height:34px;"></image>
</view>
<view>最热</view>
</view>
</view>
- .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程序
<!-- subject.wxml-->
<!-- 列表 -->
<view class="list">
<!-- 图 -->
<view class="item" bindtap="seeDetail" id="0">
<view>
<image src="/pages/images/list/pic-1.jpg" style="width:78px;height:60px;"></image>
</view>
<!-- 文 -->
<view class="desc">
<view class="title">爱心早餐</view>
<view class="count">
<view>共26个菜谱</view>
<view>
<image src="/pages/images/icon/xingxing.jpg" style="width:18px;height:17px;"></image>
</view>
<view>19</view>
<view>
<image src="/pages/images/icon/yanjing.jpg" style="width:23px;height:17px;"></image>
</view>
<view>13298</view>
</view>
</view>
</view>
<!-- 间隔线 -->
<view class="hr"></view>
</view>
</view>
- .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