豆瓣评分小程序实战

最新推荐文章于 2022-02-14 15:21:41 发布

*Major*

最新推荐文章于 2022-02-14 15:21:41 发布

阅读量2.1k

点赞数 2

本文链接：https://blog.csdn.net/qq_41375318/article/details/107787041

版权

$豆瓣评分小程序实战$

视频教程：B站、网易云课堂、腾讯课堂
代码地址：Gitee、Github
存储地址：
百度云-提取码：
Google云

1.豆瓣小程序体验
2.搜索栏实现（1）
3.搜索栏实现（2）
4.电影模块布局完成
5.评分星星布局
6.评分星星组件完成
7.首页布局和数据获取完成
8.首页模块代码重构
9.网络请求模块代码重构
10.列表页布局完成
11.列表页数据渲染完成
12.列表页布局小细节处理
13.列表页添加网络请求loading状态
14.详情页header部分布局完成
15.详情页header部分样式完成
16.详情页标签布局和样式完成
17.详情页短评布局完成
18.详情页短评样式完成
19.详情页入口参数设置
20.详情页item详情数据获取
21.详情页item数据渲染
22.详情页标签完成
23.详情页短评数据获取和渲染
24.评论列表页-item布局和返回上一页
25.评论列表页-加载评论数据
26.评论列表页-翻页按钮的布局样式
27.评论列表页-翻页功能实现
28.搜索结果布局完成
29.搜索功能实现
30.搜索页面-历史记录布局完成
31.搜索页面-历史记录功能实现
32.详情页评分bug解决

1.豆瓣小程序体验

2.搜索栏实现（1）

.searchbar{
  background-color: #41be57;
  padding: 20rpx;
}

.search-navigator {
  width: 100%;
  height: 60rpx;
  background-color: #fff;
  border-radius: 10rpx;
  background-image: url('data:image/png;base64,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');
  background-position: center;
  background-repeat: no-repeat;
  background-size: 8%;

}

/**index.wxss**/
.userinfo {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.userinfo-avatar {
  width: 128rpx;
  height: 128rpx;
  margin: 20rpx;
  border-radius: 50%;
}

.userinfo-nickname {
  color: #aaa;
}

.usermotto {
  margin-top: 200px;
}

3.搜索栏实现（2）

// components/searchbar/searchbar.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
     isnavigator:{
       type:Boolean,
       value:false
     }
  },

  /**
   * 组件的初始数据
   */
  data: {

  },

  /**
   * 组件的方法列表
   */
  methods: {

  }
})


<view class="searchbar">
 <navigator wx:if="{{isnavigator}}" url="/pages/search/search" class="search-navigator"></navigator>
<view wx:else class="search-input-group">
 <input class="search-input" placeholder="搜索"></input>
</view>
</view>

.searchbar{
  background-color: #41be57;
  padding: 20rpx;
}

.search-navigator {
  width: 100%;
  height: 60rpx;
  background-color: #fff;
  border-radius: 10rpx;
  background-image: url('data:image/png;base64,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');
  background-position: center;
  background-repeat: no-repeat;
  background-size: 8%;

}

.search-input-group{
  width: 100%;
  height: 60rpx;
  background-color: #fff;
  border-radius: 10rpx;
  padding: 10rpx;
  box-sizing: border-box;
}

.search-input{
  min-height: 40rpx;
  height: 40rpx;
}

<searchbar isnavigator="{{true}}"></searchbar>

4.电影模块布局完成

<searchbar isnavigator="{{true}}"></searchbar>

<view class="module-group">
  <view class="module-top">
      <view class="module-title">养老院</view>
      <navigator class="module-more">更多</navigator>
  </view>
 <scroll-view class="module-scroll-view" scroll-x="{{true}}">
     <navigator class="item-navigator">
        <view class="item-group">
            <view class="thumbnail-group">
               <image class="thumbnail" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1596816244471&di=c1d3ab2dc7b4105eea5a660101369538&imgtype=0&src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fimages%2F20180212%2F9d1f5877b328400fbb46b3af87372f34.jpeg"></image>
               <view class="item-title">养老院1</view>
            </view>
        </view>
     </navigator>  
          <navigator class="item-navigator">
        <view class="item-group">
            <view class="thumbnail-group">
               <image class="thumbnail" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1596816244471&di=c1d3ab2dc7b4105eea5a660101369538&imgtype=0&src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fimages%2F20180212%2F9d1f5877b328400fbb46b3af87372f34.jpeg"></image>
               <view class="item-title">养老院1</view>
            </view>
        </view>
     </navigator>  
          <navigator class="item-navigator">
        <view class="item-group">
            <view class="thumbnail-group">
               <image class="thumbnail" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1596816244471&di=c1d3ab2dc7b4105eea5a660101369538&imgtype=0&src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fimages%2F20180212%2F9d1f5877b328400fbb46b3af87372f34.jpeg"></image>
               <view class="item-title">养老院1</view>
            </view>
        </view>
     </navigator>  
          <navigator class="item-navigator">
        <view class="item-group">
            <view class="thumbnail-group">
               <image class="thumbnail" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1596816244471&di=c1d3ab2dc7b4105eea5a660101369538&imgtype=0&src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fimages%2F20180212%2F9d1f5877b328400fbb46b3af87372f34.jpeg"></image>
               <view class="item-title">养老院1</view>
            </view>
        </view>
     </navigator>  
          <navigator class="item-navigator">
        <view class="item-group">
            <view class="thumbnail-group">
               <image class="thumbnail" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1596816244471&di=c1d3ab2dc7b4105eea5a660101369538&imgtype=0&src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fimages%2F20180212%2F9d1f5877b328400fbb46b3af87372f34.jpeg"></image>
               <view class="item-title">养老院1</view>
            </view>
        </view>
     </navigator>  
 </scroll-view>

</view>

.module-group{
  padding: 40rpx;
  background-color: #fff;
}

.module-group .module-top{
  font-size: 36rpx;
  display: flex;
  justify-content: space-between;
}

.module-top .module-title{
  color: #494949;

}

.module-top .module-more{
  color: #41be57;
}

.module-scroll-view{
  margin-top: 40rpx;
  width: 100%;
  height: 400rpx;
  white-space: nowrap;
}

.module-scroll-view .item-navigator{
  width: 200rpx;
  margin-right: 20rpx;
  display: inline-block;
}

.module-scroll-view .item-navigator:last-of-type{
   margin-right: 0;
}


.item-navigator .item-group{
  width: 100%;
}

.item-navigator .thumbnail-group{
  width: 100%;
  height: 284rpx;
}

.thumbnail-group .thumbnail{
  width: 100%;
  height: 100%;
}

.item-group .item-title{
  font-size: 28rpx;
  text-align: center;
  margin-top: 20rpx;
  text-overflow: ellipsis;
  overflow: hidden;
}

{
  "usingComponents": {
    "searchbar":"/components/searchbar/searchbar"
  }
}

5.评分星星布局

         <view class="rate-group">
                    <image wx:for="{{[1,2,3]}}" src="/images/rate_light.png"></image>
                    <image src="/images/rate_half.png"></image>
                    <image src="/images/rate_gray.png"></image>
                    <text>8.0</text>
               </view>

.rate-group{
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20rpx;
  color: #ccc;
}

.rate-group image{
  width: 20rpx;
  height: 20rpx;
}

6.评分星星组件完成

<view class='rate-group'>
  <image style='width:{{starsize}}rpx;height:{{starsize}}rpx;' wx:for="{{lights}}" wx:key="*this" src="/images/rate_light.png"></image>
  <image style='width:{{starsize}}rpx;height:{{starsize}}rpx;' wx:for="{{halfs}}" wx:key="*this" src='/images/rate_half.png'></image>
  <image style='width:{{starsize}}rpx;height:{{starsize}}rpx;' wx:for="{{grays}}" wx:key="*this" src='/images/rate_gray.png'></image>
  <text style='font-size:{{fontsize}}rpx;color:{{fontcolor}};'>{{ratetext}}</text>
</view>

// components/stars/stars.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    rate: {
      type: Number,
      value: 0
    },
    starsize: {
      type: Number,
      value: 20 //rpx
    },
    fontsize: {
      type: Number,
      value: 20 // rpx
    },
    fontcolor: {
      type: String,
      value: "#ccc"
    }
  },

  /**
   * 组件的初始数据
   */
  data: {

  },

  /**
   * 组件的方法列表
   */
  methods: {

  },

  lifetimes: {
    attached: function(){
      var that = this;
      var rate = that.properties.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({
        lights: lights,
        halfs: halfs,
        grays: grays,
        ratetext: ratetext
      });
    }
  }
})

.rate-group{
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20rpx;
  color: #ccc;
  margin-top: 20rpx;
}

.rate-group image{
  width: 20rpx;
  height: 20rpx;
}

{
  "component": true,
  "usingComponents": {}
}

7.首页布局和数据获取完成

<searchbar isnavigator="{{true}}"></searchbar>

<!-- 电影 -->
<view class="module-group">
   <view class="module-top">
         <view class="module-title">养老院</view>
         <navigator class="module-more">更多</navigator>
   </view>
   <scroll-view class="module-scroll-view" scroll-x="{{true}}">
      <navigator wx:for="{{nursinghome}}" wx:key="*this" class="item-navigator">
         <view class="item-group">
               <view class="thumbnail-group">
                  <image class="thumbnail" src="{{item.cover}}"></image>
                  <view class="item-title">{{item.title}}</view>
                  <view class="rate-group">
                     <stars rate="{{item.ratevalue}}"> </stars>
                  </view>
               </view>
         </view>
      </navigator>  
   </scroll-view>
</view>

<!-- 驿站 -->
<view class="module-group">
   <view class="module-top">
         <view class="module-title">驿站</view>
         <navigator class="module-more">更多</navigator>
   </view>
   <scroll-view class="module-scroll-view" scroll-x="{{true}}">
      <navigator wx:for="{{apartment}}" wx:key="*this" class="item-navigator">
         <view class="item-group">
               <view class="thumbnail-group">
                  <image class="thumbnail" src="{{item.cover}}"></image>
                  <view class="item-title">{{item.title}}</view>
                  <view class="rate-group">
                     <stars rate="{{item.ratevalue}}"> </stars>
                  </view>
               </view>
         </view>
      </navigator>  
   </scroll-view>
</view>

.module-group{
  padding: 40rpx;
  background-color: #fff;
}

.module-group .module-top{
  font-size: 36rpx;
  display: flex;
  justify-content: space-between;
}

.module-top .module-title{
  color: #494949;

}

.module-top .module-more{
  color: #41be57;
}

.module-scroll-view{
  margin-top: 40rpx;
  width: 100%;
  height: 400rpx;
  white-space: nowrap;
}

.module-scroll-view .item-navigator{
  width: 200rpx;
  margin-right: 20rpx;
  display: inline-block;
}

.module-scroll-view .item-navigator:last-of-type{
   margin-right: 0;
}


.item-navigator .item-group{
  width: 100%;
}

.item-navigator .thumbnail-group{
  width: 100%;
  height: 284rpx;
}

.thumbnail-group .thumbnail{
  width: 100%;
  height: 100%;
}

.item-group .item-title{
  font-size: 28rpx;
  text-align: center;
  margin-top: 20rpx;
  text-overflow: ellipsis;
  overflow: hidden;
}


.rate-group{
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20rpx;
  color: #ccc;
}

.rate-group image{
  width: 20rpx;
  height: 20rpx;
}

//index.js
//获取应用实例
const app = getApp()

Page({
  data: {
    motto: 'Hello World',
    userInfo: {},
    hasUserInfo: false,
    canIUse: wx.canIUse('button.open-type.getUserInfo')
  },

  onLoad: function () {
    var that =this;
    /* 养老院 */
    wx.request({
      url: 'http://127.0.0.1:8001/drf_test/nursinghome',
      
      success:function(res){
        var nursinghome = res.data;
        that.setData({
          nursinghome:nursinghome
        })
        console.log(res.data);
      }
    })

    /* 驿站 */
    wx.request({
      url: 'http://127.0.0.1:8001/drf_test/apartment',
      
      success:function(res){
        var apartment = res.data;
        that.setData({
          apartment:apartment
        })
        console.log(res.data);
      }
    })

    wx.request({
      url: 'https://m.douban.com/rexxar/api/v2/subject_collection/tv_hot/items',
      data:{
        count:7
      },
      success:function(res){
        var tvs = res.data.subject_collection_items;
        that.setData({
             tvs:tvs
        })
      }
    })

  },

})

{
  "usingComponents": {
    "searchbar":"/components/searchbar/searchbar",
    "stars":"/components/stars/stars"
  }
}

8.首页模块代码重构

// components/indexmodule/indexmodule.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    title:{
      type:String,
      value:""
    },
    moreurl:{
      type:String,
      value:""
    },
    items:{
      type:Array,
      value:[]
    }

  },

  /**
   * 组件的初始数据
   */
  data: {

  },

  /**
   * 组件的方法列表
   */
  methods: {

  }
})

{
  "component": true,
  "usingComponents": {
    "stars":"/components/stars/stars"
  }
}

<view class="module-group">
   <view class="module-top">
         <view class="module-title">{{title}}</view>
         <navigator url="{{moreurl}}" class="module-more">更多</navigator>
   </view>
   <scroll-view class="module-scroll-view" scroll-x="{{true}}">
      <navigator wx:for="{{items}}" wx:key="*this" class="item-navigator">
         <view class="item-group">
               <view class="thumbnail-group">
                  <image class="thumbnail" src="{{item.cover}}"></image>
                  <view class="item-title">{{item.title}}</view>
                  <view class="rate-group">
                     <stars rate="{{item.ratevalue}}"> </stars>
                  </view>
               </view>
         </view>
      </navigator>  
   </scroll-view>
</view>

.module-group{
  padding: 40rpx;
  background-color: #fff;
}

.module-group .module-top{
  font-size: 36rpx;
  display: flex;
  justify-content: space-between;
}

.module-top .module-title{
  color: #494949;

}

.module-top .module-more{
  color: #41be57;
}

.module-scroll-view{
  margin-top: 40rpx;
  width: 100%;
  height: 400rpx;
  white-space: nowrap;
}

.module-scroll-view .item-navigator{
  width: 200rpx;
  margin-right: 20rpx;
  display: inline-block;
}

.module-scroll-view .item-navigator:last-of-type{
   margin-right: 0;
}


.item-navigator .item-group{
  width: 100%;
}

.item-navigator .thumbnail-group{
  width: 100%;
  height: 284rpx;
}

.thumbnail-group .thumbnail{
  width: 100%;
  height: 100%;
}

.item-group .item-title{
  font-size: 28rpx;
  text-align: center;
  margin-top: 20rpx;
  text-overflow: ellipsis;
  overflow: hidden;
}


.rate-group{
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20rpx;
  color: #ccc;
}

.rate-group image{
  width: 20rpx;
  height: 20rpx;
}

<searchbar isnavigator="{{true}}"></searchbar>

<!-- 电影 -->
<indexmodule title="养老院" items="{{nursinghome}}"></indexmodule>

<!-- 驿站 -->
<indexmodule title="驿站" items="{{apartment}}"></indexmodule>

//index.js
//获取应用实例
const app = getApp()

Page({
  data: {
    motto: 'Hello World',
    userInfo: {},
    hasUserInfo: false,
    canIUse: wx.canIUse('button.open-type.getUserInfo')
  },

  onLoad: function () {
    var that =this;
    /* 养老院 */
    wx.request({
      url: 'http://127.0.0.1:8001/drf_test/nursinghome',
      
      success:function(res){
        var nursinghome = res.data;
        that.setData({
          nursinghome:nursinghome
        })
        console.log(res.data);
      }
    })

    /* 驿站 */
    wx.request({
      url: 'http://127.0.0.1:8001/drf_test/apartment',
      
      success:function(res){
        var apartment = res.data;
        that.setData({
          apartment:apartment
        })
        console.log(res.data);
      }
    })

    wx.request({
      url: 'https://m.douban.com/rexxar/api/v2/subject_collection/tv_hot/items',
      data:{
        count:7
      },
      success:function(res){
        var tvs = res.data.subject_collection_items;
        that.setData({
             tvs:tvs
        })
      }
    })

  },

})

9.网络请求模块代码重构

const globalUrls = {
  NusingHomeList: 'http://127.0.0.1:8001/drf_test/nursinghome/1',
  ApartmentList: 'http://127.0.0.1:8001/drf_test/apartment/6',

}

export {globalUrls}

import {globalUrls} from "../../utils/urls"

const network = {
  /* 养老院 */
  getNusingHomeList:function(params){
    wx.request({
      url: globalUrls.NusingHomeList,
      success:function(res){
        var nursinghome = res.data;
        if(params && params.success){
          params.success(nursinghome);
        }
      }
    })
  },
    /* 驿站 */
    getApartmentList:function(params){
    wx.request({
      url: globalUrls.ApartmentList,
      success:function(res){
        var apartment = res.data;
        if(params && params.success){
          params.success(apartment);
        }
      }
    })
  }
}


export {network}

import {network} from "network.js"
const app = getApp()

Page({
  data: {

  },

  onLoad: function () {
    var that =this;
    /* 养老院 */
    network.getNusingHomeList({
      success:function(nursinghome){
        that.setData({
          nursinghome:nursinghome
        })
      }
    });
    
    /* 驿站 */
    network.getApartmentList({
      success:function(apartment){
        that.setData({
          apartment:apartment
        })
      }
    });





  },

})

在这里插入图片描述

10.列表页布局完成

// components/itemview/itemview.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
      item:{
        type:Object,
        value:{}
      }
  },

  /**
   * 组件的初始数据
   */
  data: {

  },

  /**
   * 组件的方法列表
   */
  methods: {

  }
})


<navigator  class="item-navigator">
    <view class="item-group">
          <view class="thumbnail-group">
            <image class="thumbnail" src="{{item.cover}}"></image>
            <view class="item-title">{{item.title}}</view>
            <view class="rate-group">
                <stars rate="{{item.ratevalue}}"> </stars>
            </view>
          </view>
    </view>
</navigator>

{
  "component": true,
  "usingComponents": {
    "stars":"/components/stars/stars"
  }
}

.item-navigator{
  width: 200rpx;
  margin-right: 20rpx;
  display: inline-block;
}

.item-navigator .item-group{
  width: 100%;
}

.item-navigator .thumbnail-group{
  width: 100%;
  height: 284rpx;
}

.thumbnail-group .thumbnail{
  width: 100%;
  height: 100%;
}

.item-group .item-title{
  font-size: 28rpx;
  text-align: center;
  margin-top: 20rpx;
  text-overflow: ellipsis;
  overflow: hidden;
}


.rate-group{
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20rpx;
  color: #ccc;
}

.rate-group image{
  width: 20rpx;
  height: 20rpx;
}

{
  "usingComponents": {
    "searchbar":"/components/searchbar/searchbar",
    "itemview":"/components/itemview/itemview"
  }
}

<searchbar isnavigator="{{true}}"></searchbar>

<view class="container">
   <itemview wx:for="{{nursinghome}}" wx:key="{{item.title}}" item="{{item}}"></itemview>
</view>

/* pages/list/list.wxss */
.container{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 30rpx;
}

import {network} from "../../utils/network"
Page({

  /**
   * 页面的初始数据
   */
  data: {

  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var that = this;
    console.log(options);
    var type = options.type;
    if(type === "nursinghome"){
      // 请求养老院
      network.getNusingHomeListAll({
        success:function(nursinghome){
          that.setData({
            nursinghome:nursinghome
          })
        }
      })

    }else if(type === "apartment"){

      // 请求驿站
      network.getNusingHomeListAll({
        success:function(nursinghome){
          that.setData({
            nursinghome:nursinghome
          })
        }
      })
    }

    
  },