微信小程序基本组件和API已撸完，总归要回到正题的，花了大半天时间做了个精简版的百思不得姐，包括段子，图片，音频，视频，四个模块。这篇就带着大家简述下这个小的APP，源码会放到GitHub上欢迎start。
项目中我能学到什么？
tabbar使用方式
网络调用真实接口
loading使用
scroll-view实现下拉刷新上拉加载
image组件对图片的处理，
音乐和视频组件的使用
跳转传值使用
等等等。。。。
app.json全局配置文件
{ "pages":[ "pages/word/word", "pages/image/image", "pages/voice/voice", "pages/video/video", "pages/detail/detail" ], "tabBar": { "color": "#a9b7b7", "selectedColor": "#eb4f38", "borderStyle": "white", "backgroundColor": "#ffffff", "list": [ { "pagePath": "pages/word/word", "text": "段子", "iconPath": "image/wordN.png", "selectedIconPath": "image/wordS.png" }, { "pagePath": "pages/image/image", "text": "图片", "iconPath": "image/imageN.png", "selectedIconPath": "image/imageS.png" }, { "pagePath": "pages/voice/voice", "text": "声音", "iconPath": "image/voiceN.png", "selectedIconPath": "image/voiceS.png" }, { "pagePath": "pages/video/video", "text": "视频", "iconPath": "image/videoN.png", "selectedIconPath": "image/videoS.png" } ] }, "window":{ "backgroundTextStyle":"light", "navigationBarBackgroundColor": "#eb4f38", "navigationBarTextStyle":"white" } }
这里我们只要配置下程序全局属性，每个页面需要在pags属性中引入，有时候tabbar不显示有可能是因为这个，tabbar底部导航Item分为四个就是list里面的，这里主要配置选中未选中颜色背景色及每个底部选项页面页面引入和图片引入。window 属性主要配置窗体整体的颜色文字颜色和背景色，这里的window属性会被每个页面的window属性给覆盖。
app.wxss
/*整体view样式*/ .containsView{ padding: 15rpx 15rpx 15rpx 15rpx; margin-top: 15rpx; margin-bottom: 15rpx; background-color: white; } /*头部整体样式*/ .topContainsView{ display: flex; flex-direction: row; align-items: center; margin-bottom: 18rpx; } /** * 头像样式 */ .profileImage{ width: 60rpx; height: 60rpx; border-radius: 30rpx; } /*头部显示名字和时间整体样式*/ .topRightView{ margin-left: 15rpx; display: flex; flex-direction: column; } /*用户名称样式*/ .topRightName{ font-size: 18rpx; } /*时间样式*/ .topRightTime{ font-size: 14rpx; color: #b8b2b2; margin-top: 10rpx; } /*因为中间部分不一样不放在整体样式中*/ /*底部view整体样式*/ .bottomView{ display: flex; flex-direction: row; justify-content: space-between; align-items: center; } /*每个Item样式*/ .bottomItemView{ display: flex; flex-direction: row; align-items: center; justify-content: center; margin-top: 18rpx; padding-left: 10rpx; padding-right: 10rpx; } /*Item样式中的图标样式 顶 踩 分享 评论*/ .bottomItemImage{ width: 45rpx; height: 45rpx; } /*Item中的文字样式 顶 踩 分享 评论*/ .bottomItemText{ font-size: 15rpx; color: #b8b2b2; margin-left: 10rpx; margin-top: 8rpx; } /*分割线样式*/ .divLine{ background: #f3f3f3; width: 100%; height: 15rpx; }
app.wxss我将四个模块分为三个部分 头部，内容区域， 底部因为每个页面头部，底部样式都一样而中间部分不一样所以我把1，3抽到全局中，注释比较清晰
段子模块
word.wxml
<loading hidden="{{loadingHidden}}">正在加载...</loading> <scroll-view scroll-y="true" bindscrolltoupper="bindscrolltoupper" bindscrolltolower="bindscrolltolower"> <block wx:for-items="{{list}}"> <!-- 分割线 --> <view></view> <!-- 整体item样式 --> <view> <view> <image src="https://www.jb51.net/{{item.profile_image}}" /> <view> <text>{{item.name}}</text> <text>{{item.passtime}}</text> </view> </view> <!-- 中间内容 --> <text>{{item.text}}</text> <!-- 底部view样式 --> <view> <view> <image src="" /> <text>{{item.ding}}</text> </view> <view> <image src="" /> <text>{{item.cai}}</text> </view> <view> <image src="" /> <text>{{item.repost}}</text> </view> <view> <image src="" /> <text>{{item.comment}}</text> </view> </view> </view> </block> </scroll-view>