项目展示：
首先，自定义组件searchbar、stars，以及search组件
记小本本哦：
（1）自定义组件：searchbar https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/
（2）图片转换为base64：tool.chinaz.com/tools/imgtobase
{
"pages": [
"pages/index/index",
"pages/search/search",
"pages/logs/logs"
],
"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#41be57",
"navigationBarTitleText": "豆瓣评分",
"navigationBarTextStyle": "white"
},
"style": "v2",
"sitemapLocation": "sitemap.json"
}
/**app.wxss**/
.container {
height: 100%;display: flex;flex-direction: column;align-items: center;justify-content: space-between;
padding: 200rpx 0;box-sizing: border-box;
}
其次，准备好images里的图片
然后，在各目录下编写代码
1.searchbar目录
在.json写下：
{
"component": true,
"usingComponents": {}
}
<view class='searchbar'>
<!--跳转到搜索页面-->
<navigator wx:if="{{isNavigator}}" class="search-navigator"
url="/pages/search/search" ></navigator>
<!--真正的搜索栏-->
<view wx:else class="search-input-group">
<input class="search-input" placeholder="搜索"></input>
</view>
</view>
2.stars目录
在.json写下：
{
"component": true,
"usingComponents": {}
}
lifetimes:{
//生命周期函数
attached:function(){
var that =this //定义全局变量
var rate = that.properties.rate
//console.log(rate)
var intRate= parseInt(rate)
//星星个数
var light=parseInt(intRate/2)
//半个星星个数
var half =intRate%2
//灰色星星个数
var gray=5-light-half
var lights=[]
var halfs=[]
var grays=[]
for(var index=1;index<=light;index++){
lights.push(index)
}
for(var index=1;index<=half;index++){
halfs.push(index)
}
for(var index=1;index<=gray;index++){
grays.push(index)
}
var rateText=rate && rate>0? rate.toFixed(1):"未评分"
that.setData({
rateText:rateText,
lights:lights,
halfs:halfs,
grays:grays
})
},
},
<view class='rate-group'>
<image src='../../images/rate_light.png' wx:for="{{lights}}" wx:key="{{index}}"></image>
<image src='../../images/rate_half.png' wx:for="{{halfs}}" wx:key="{{index}}"></image>
<image src='../../images/rate_gray.png' wx:for="{{grays}}" wx:key="{{index}}"></image>
<view>{{rateText}}</view>
</view>
.rate-group{
display: flex;
justify-content: center;
align-items: center;
font-size: 20rpx;
color: #ccc;
}
.rate-group image{
width: 20rpx;
height: 20rpx;
}
3、pages文件下index目录
在.json写下：
{
"usingComponents": {"searchbar":"/components/searchbar/searchbar","stars": "/components/stars/stars"}
}
onLoad: function(options) {
var that = this
//请求电影数据
wx: wx.request({
url: 'http://m.douban.com/rexxar/api/v2/subject_collection/movie_showing/items?count=8',
success: function(res) {
console.log(res)
var movies = res.data.subject_collection_items
that.setData({
movies: movies
})
}
})
//请求电视数据
wx.request({
url: 'http://m.douban.com/rexxar/api/v2/subject_collection/tv_hot/items?count=8',
success: function(res) {
console.log(res)
var tvs=res.data.subject_collection_items
that.setData({
tvs:tvs
})
},
})
//请求综艺数据
wx.request({
url: 'http://m.douban.com/rexxar/api/v2/subject_collection/tv_variety_show/items?count=8',
success:function(res){
console.log(res)
var shows=res.data.subject_collection_items
that.setData({
shows:shows
})
}
})
},
<searchbar isNavigator="{{true}}"></searchbar>
<!-- 电影模块 -->
<view class='module-group'>
<view class='module-top'>
<view class='module-title'>电影</view>
<view class='module-more'>更多</view>
</view>
<scroll-view scroll-x="true">
<navigator src='' class='item-navigator' wx:for="{{movies}}" wx:key="{{item.index}}">
<view class='item-group'>
<image class='img' src='{{item.cover.url}}'></image>
</view>
<view class='item-title'>{{item.title}}</view>
<stars rate="{{item.rating.value}}"></stars>
</navigator>
</scroll-view>
</view>
<!-- 电视模块 -->
<view class='module-group'>
<view class='module-top'>
<view class='module-title'>电视</view>
<view class='module-more'>更多</view>
</view>
<scroll-view scroll-x="true">
<navigator src='' class='item-navigator' wx:for="{{tvs}}" wx:key="{{item.index}}">
<view class='item-group'>
<image class='img' src='{{item.cover.url}}'></image>
</view>
<view class='item-title'>{{item.title}}</view>
<stars rate="{{item.rating.value}}"></stars>
</navigator>
</scroll-view>
</view>
<!-- 综艺模块 -->
<view class='module-group'>
<view class='module-top'>
<view class='module-title'>综艺</view>
<view class='module-more'>更多</view>
</view>
<scroll-view scroll-x="true">
<navigator src='' class='item-navigator' wx:for="{{shows}}" wx:key="{{item.index}}">
<view class='item-group'>
<image class='img' src='{{item.cover.url}}'></image>
</view>
<view class='item-title'>{{item.title}}</view>
<stars rate="{{item.rating.value}}"></stars>
</navigator>
</scroll-view>
</view>
.module-group{
padding: 30rpx;
}
.module-top{
display: flex;justify-content: space-between;font-size: 36rpx;
}
.module-title{
color: #717171;
}
.module-more{
color: #79c46f;
}
scroll-view{
margin-top: 40rpx;width: 100%;height: 400rpx;white-space: nowrap;
}
.item-navigator{
width: 220rpx;margin-right: 20rpx;display: inline-block;
}
.item-group{
width: 100%;
}
.item-group > .img{
width: 100%;height: 300rpx;
}
.item-title{
text-align: center;font-size: 28rpx; margin: 10rpx 0;overflow: hidden;text-overflow: ellipsis;
}
4、pages文件下logs目录
在.json写：
{
"navigationBarTitleText": "查看启动日志",
"usingComponents": {}
}
//logs.js
const util = require('../../utils/util.js')
Page({
data: {
logs: []
},
onLoad: function () {
this.setData({
logs: (wx.getStorageSync('logs') || []).map(log => {
return util.formatTime(new Date(log))
})
})
}
})
在.wxml写下：
<view class="container log-list">
<block wx:for="{{logs}}" wx:for-item="log">
<text class="log-item">{{index + 1}}. {{log}}</text>
</block>
</view>
在.wxss写下：
.log-list {
display: flex;flex-direction: column;padding: 40rpx;
}
.log-item {
margin: 10rpx;
}
5、pages文件下search目录
在.json写下：
{
"usingComponents": {
"searchbar": "/components/searchbar/searchbar/"
}
}
在.wxml写下：
<searchbar isNavigator="{{false}}"></searchbar>
由于为将整个项目完成，所以，，
最后，呈现结果为：
喜欢的朋友可以关注下，后来会更新为完整版本。
未完待续ing....
