小程序項目網易雲（一）

首屏

 

 

 

1.首頁輪播圖模塊，靜態頁面

注；swiper組件默認高度是150px,而且具有overflow:hidden的特性,但是樣式調試器中看不見，此時圖片高度也要設置150px

 

 swiper組件的屬性，

indicator-dots="true" 小圓點 indicator-color="ivory"小圓點顏色 indicator-active-color="#d43c33" 選中的小圓點顏色
circular 銜接滑動，  布爾值的屬性為true,直接寫屬性

wxml

<!-- pages/index/index.wxml -->
<view class="indexContainer">

  <!-- banner區 -->
  <swiper class="navSwiper" indicator-dots="true" indicator-color="ivory" indicator-active-color="#d43c33" circular>
    <swiper-item class="navItem">
    <image  src="/static/images/nvsheng.jpg"></image>
    </swiper-item>
    <swiper-item class="navItem">
    <image  src="/static/images/nvsheng.jpg"></image>
    </swiper-item>
    <swiper-item class="navItem">
    <image  src="/static/images/nvsheng.jpg"></image>
    </swiper-item>
    <swiper-item class="navItem">
    <image  src="/static/images/nvsheng.jpg"></image>
    </swiper-item>
  </swiper>
</view>

wxss

.indexContainer .navSwiper .navItem image{
 height: 300rpx;
  width: 100%;
}

 

2，中間導航部分

注；使用阿里巴巴的圖標字體，下載到本地（小程序不支持線上連接），在全局app.wxss中引入圖標字體

@import '/static/iconfont/iconfont.wxss'

使用圖標文件,通過@import引入css文件，出現問題!!!
問題:小程序wxss文件引入css文件報錯
解決:將圖標的css文件后綴改為wxss

wxml

 <!-- 中間導航區 -->
   <view class="headerNav">
    <view class="headerItem">
      <text class="iconfont icon-meirituijian-"></text>
      <text>每日推薦</text>
    </view>
    <view class="headerItem">
      <text class="iconfont icon-gedan1"></text>
      <text>歌單</text>
    </view>
    <view class="headerItem">
      <text class="iconfont icon-icon-ranking"></text>
      <text>排行榜</text>
    </view>
    <view class="headerItem">
      <text class="iconfont icon-diantai"></text>
      <text>電台</text>
    </view>
    <view class="headerItem">
      <text class="iconfont icon-zhiboguankanliangbofangsheyingshexiangjixianxing"></text>
      <text>直播</text>
    </view>
  </view>

wxss

.headerNav{
  display: flex;
   /* 主軸對齊 */
   justify-content: space-around;
}

.headerNav .headerItem{
  display: flex;
  flex-direction: column; /* 側軸對齊 */
  align-items: center;

}

.headerNav .headerItem .iconfont{
  width: 100rpx;
  height: 100rpx;
  background-color: red;
  color: white;
  border-radius: 50%;
  /* 文本水平居中 */
  text-align: center;
  /* 文本垂直居中 */
  line-height: 100rpx;
  font-size:48rpx;
  margin:20rpx 0;
}

.indexContainer .headerNav .headerItem text{
  font-size:28rpx;
}

 

3,推薦歌曲

注；需要給scroll-view一個固定高度，他有自己的默認高度，

推薦歌曲模塊:靜態效果(重點:scroll-view使用)
  1)實現推薦區域header靜態效果
  2)了解並使用scroll-view組件
  3)開啟flex布局，想讓內部子元素橫向排列，出現問題!!!
    問題:display:flex無效
    原因:scroll-view組件不能直接開啟flex布局,需要配置
    解決:根據警告修改代碼，給組件標簽添加屬性enable-flex 4)布局效果實現,出現問題!!!
    問題:無法滑動
    原因:scroll-view組件想要滾動需要單獨配置
    解決:添加標簽屬性scroll-x,允許橫向滾動 5)完善布局,實現文本溢出省略,出現問題!!!
    問題:無法實現多行文本溢出省略
    解決:
        overflow:hidden；
        text-overflow:ellipsis；
        display:-webkit-box；//開啟webkit內核的盒模型
        -webkit-box-orient:vertical；  //設置子元素對齊方式
        -webkit-line-clamp:2  //設置為2行文本溢出隱藏

 

wxml

 <view class="recommendContainer">
    <view class="recommendHeader">
      <text class="title">推薦歌曲</text>
      <view class="moreContent">
        <text class="left">為你精心推薦</text>
        <text class="more">查看更多</text>
      </view>
    </view>
    <!-- 滑動卡片項 -->
    <scroll-view class="recommendScroll"  scroll-x enable-flex>
      <view class="scrollItem">
        <image src="/static/images/nvsheng.jpg" />
        <text >賈靜雯女生賈靜雯女生賈靜雯女生賈靜雯女生賈靜雯女生賈靜雯女生</text>
      </view>
      <view class="scrollItem">
        <image src="/static/images/nvsheng.jpg" />
        <text >賈靜雯女生賈靜雯女生賈靜雯女生賈靜雯女生賈靜雯女生賈靜雯女生</text>
      </view>
      <view class="scrollItem">
        <image src="/static/images/nvsheng.jpg" />
        <text >賈靜雯女生賈靜雯女生賈靜雯女生賈靜雯女生賈靜雯女生賈靜雯女生</text>
      </view>
      <view class="scrollItem">
        <image src="/static/images/nvsheng.jpg" />
        <text >賈靜雯女生賈靜雯女生賈靜雯女生賈靜雯女生賈靜雯女生賈靜雯女生</text>
      </view>
      <view class="scrollItem">
        <image src="/static/images/nvsheng.jpg" />
        <text >賈靜雯女生賈靜雯女生賈靜雯女生賈靜雯女生賈靜雯女生賈靜雯女生</text>
      </view>
      <view class="scrollItem">
        <image src="/static/images/nvsheng.jpg" />
        <text >賈靜雯女生賈靜雯女生賈靜雯女生賈靜雯女生賈靜雯女生賈靜雯女生</text>
      </view>

      
    </scroll-view>

    <text >你在哪里</text>
  </view>

 

 

wxss

.recommendContainer{
  padding:40rpx 20rpx;
  
}

.recommendContainer .recommendHeader .title{
  color: hotpink;
}
.recommendContainer .recommendHeader .left{
  float: left;
  font-size: 28rpx;
  padding:10rpx 0;
}

.recommendContainer .recommendHeader .more{
  float: right;
  font-size: 24rpx;
  border:1rpx solid;
  border-radius: 15rpx;
  padding:10rpx;
  color:skyblue;
}

.recommendContainer .recommendScroll{
  display: flex;
  padding-top:20rpx;
  /* scroll-view他的高度有9百多，需要給他設置高度 */
  height:340rpx;
 
}

.recommendContainer .recommendScroll .scrollItem{
  display: flex;
  flex-direction: column;
  width:200rpx;
  margin-right:20rpx;
}

.recommendContainer .recommendScroll .scrollItem image{
  width:200rpx;
  height:200rpx;
  border-radius: 15rpx;
}

.recommendContainer .recommendScroll .scrollItem text{
  /*單行文本溢出隱藏 
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis; */

//多行文本溢出
  overflow:hidden;
  /* 溢出的文本省略 */
  text-overflow: ellipsis;
  /* 開啟webkit內核的盒模型 */
  display:-webkit-box;
  /* 設置幾行開始溢出隱藏 */
  -webkit-line-clamp:2;
  /* 設置文本的排列方向 */
  -webkit-box-orient:vertical;
}

 

4，首頁輪播圖模塊，發送請求，數據渲染

首頁輪播圖模塊:數據請求(重點:前后端交互)
  1)分析前后端流程，稍微說明下硅谷雲音樂server的情況
  2)說明下如何啟動服務器，以及txt文件，並嘗試請求/banner
  3)講述wx.request的使用方式，在onLoad中發送請求，出現問題：請求失敗，需要提前配置域名
  4)觀看wx.request的文檔，講解：
    最高並發數為10個
    默認超時時間和最大超時時間都是60s
    只能請求https域名，分析下http和https的區別
    上線之后需要的服務器域名配置
  5)解決方法：在本地設置中關閉域名驗證

 

 

在index,js中的onLoad函數中發送請求，

  onLoad: function (options) {
    wx.request({
      url:"http://localhost:3000/banner",
      method:'get',
      success:(res)=>{
        // console.log(res)
        this.setData({
          bannerList:res.data
        })
      }

    })

  },

 data: {
    bannerList:[],
  },

響應數據

imageUrl    :    http://p1.music.126.net/W91VG_sqazRvWQals8NCJA==/109951165296401913.jpg
        
targetId    :    1475901644
        
targetType    :    1
        
titleColor    :    red
        
typeTitle    :    獨家
        
url    :    null
        
exclusive    :        false
        
encodeId    :    1475901644

在wxml中填充數據，wx:for， for循環， item為bannerlist數組遍歷的對象

<swiper class="navSwiper" indicator-dots="true" indicator-color="ivory" indicator-active-color="#d43c33" circular>
    <swiper-item class="navItem" wx:for="{{bannerList}}"  wx:key="encodeId">
      <image src="{{item.pic}}"></image>
    </swiper-item>
  
  </swiper>

 

5，封裝接口請求函數

5.1，新建utils文件夾（request.js）封裝請求函數

url,data(query參數)，method由調用的函數傳入，返回一個promise,調用請求接口的頁面可以將響應數據獲取到

export default function(url,data={}, method='get'){

  return new Promise((resolve,reject)=>{
    wx.request({
      url,
      method,
      data,
      success:(res)=>{
        resolve(res.data)
      }
  
    })
  })
 
}

 

index頁面，調用接口請求函數，獲取數據

引入接口函數模塊，必須用相對路徑，絕對路徑報錯

import request from '../../utils/request.js';

onLoad: async function (options) {
    let result= await request("http://localhost:3000/banner",{type:2})
    this.setData({
      bannerList:result.banners
    })

  },

 

6，推薦歌曲功能發送請求，獲取數據

6.1，調用接口請求函數，獲取數據

 onLoad: async function (options) {
    let result= await request("http://localhost:3000/banner",{type:2})
    this.setData({
      bannerList:result.banners
    })

    let res= await request('http://localhost:3000/personalized', {limit:10}) this.setData({
      recommendList:res.result
    })

  },

此時，await是同步的代碼，獲取的必須等第一個請求獲取成功后，才會獲取到第二個請求數據，此時我們需要.then函數

 

 

變成then函數

 onLoad: async function (options) {
    request("/banner", { type: 2 }).then((res) => {
      this.setData({
        bannerList: res.banners,
      });
    });

    request("/personalized", { limit: 10 }).then((res) => {
      this.setData({
        recommendList: res.result,
      });
    });
  },

 

wxml填充數據，

wx:for-item="recommendItem" 設置數組遍歷的元素對象

<scroll-view class="recommendScroll"  scroll-x enable-flex>
      <view class="scrollItem"  wx:for="{{recommendList}}"  wx:for-item="recommendItem" 
       wx:key="id">
        <image src="{{recommendItem.picUrl}}" />
        <text >{{recommendItem.name}}</text>
      </view>

    </scroll-view>

在utils文件夾中新建config.js,將域名單獨封裝

export default {
  host:"http://localhost:3000"
}

在接口函數模塊request.js中引入

import lj from './config.js'
export default function(url,data={}, method='get'){

  return new Promise((resolve,reject)=>{
    wx.request({
      url:lj.host+url,
      method,
      data,
      success:(res)=>{
        resolve(res.data)
      }
  
    })
  })
 
}

 

7，歌曲排行榜封裝一個子組件，父組件為index

新建文件夾compoents, NavHeader文件夾，右鍵點擊新建compoent,js，wxss,wxmml,json四個文件就會創建

將wxml, wxss,的部分提取出來，然后在index.json中引入組件，絕對路徑，然后注冊組件

{
  "usingComponents": {
       "NavHeader":"/compoents/NavHeader/NavHeader"
  }
}

<!-- 推薦歌曲 -->
  <view class="recommendContainer">
    <!-- navheader組件 -->
    <NavHeader />
    <!-- 滑動卡片項 -->
    <scroll-view class="recommendScroll"  scroll-x enable-flex>
      <view class="scrollItem"  wx:for="{{recommendList}}"wx:for-item="recommendItem" 
       wx:key="id">
        <image src="{{recommendItem.picUrl}}" />
        <text >{{recommendItem.name}}</text>
      </view>

    </scroll-view>

 

然后父組件index向子組件navheader傳送數據，相當於vue中props參數，title, content

 <!-- navheader組件 -->
    <NavHeader title="推薦歌曲2" content="為你精心推薦2" />

子組件在navheader.js中接收參數

Component({
  /**
   * 組件的屬性列表
   */
  properties: {
   title:String, content:String
  },

  /**
   * 組件的初始數據
   */
  data: {

  },

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

  }
})

填充數據

<view class="recommendHeader">
  <text class="title">{{title}}</text>
  <view class="moreContent">
    <text class="left">{{content}}</text>
    <text class="more">查看更多</text>
  </view>
</view>