项目搭建

引入IconFont

  • 复制链接里的代码，在微信项目中新建static/iconfont/iconfong.wxss，复制进去保存
  • 然后在app.wxss中全局引入
1
@import "/static/iconfont/iconfont.wxss";
1
2
3
4
5
6
<view class="navContainer">
    <view class="navItem">
      <text class="iconfont icon-meirituijian"></text>
      <text>每日推荐</text>
    </view>
</view>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
.navContainer{
  display: flex;
}
.navItem{
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 20%;
}
.iconfont{
  width: 100rpx;
  height: 100rpx;
  border-radius: 50%;
  text-align: center;
  line-height: 100rpx;
  background: rgb(240,19,19);
  font-size: 50rpx;
  color:#fff;
  margin: 20rpx 0;
}
.navItem text{
  font-size: 26rpx;
}

scroll-view

  • 可滚动视图区域。使用竖向滚动时，需要给scroll-view一个固定高度，通过 WXSS 设置 height。组件属性的长度单位默认为px，2.4.0起支持传入单位(rpx/px)
1
2
3
4
5
6
<scroll-view class="recommendScroll" enable-flex scroll-x>
   <view class="scrollItem" wx:for="{{recommendList}}" :wx:key="id">
     <image src="{{item.picUrl}}"></image>
     <text>{{item.name}}</text>
   </view>
</scroll-view>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
/*推荐内容区*/
.recommendScroll{
  display: flex;
  height:300rpx;
}
.scrollItem{
  width: 200rpx;
  margin-right: 20rpx;
}
.scrollItem image{
  width: 200rpx;
  height: 200rpx;
  border-radius: 10rpx;
}
.scrollItem text{
  font-size: 26rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp: 2;
}

网络请求

域名备案

  • 微信小程序请求的服务地址市需要备案的，登陆官网：https://mp.weixin.qq.com/wxamp/
  • 在【开发管理】->【开发设置】里，有一个【服务器域名】的设置

  • 扫码验证后进行合法域名注册，协议必须是https，最多配置20个域名

  • 当然，如果开发中没有https协议的接口，可以在开发工具中的右上角的【详情】->【本地设置】里，勾选不进行http校验

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// 生命周期里拿取数据
onLoad:function(options){
    wx.request({
      url: 'http://localhost:3000/banner',
      data:{
        type:2
      },
      success:(res)=>{
        console.log(res)
      },
      fail:(error)=>{
        console.log(error)
      }
    })
}

请求封装

  • 先在utils下新建config.js进行服务器的配置，真机调试需要对本地地址进行内网穿透
1
2
3
4
5
// 配置服务器相关的信息
export default {
  host:'http://localhost:3000',
  mobileHost:'http://6xayaa.natappfree.cc/', // 内网穿透的地址
}
  • 在utils下新建request.js进行请求封装，因为请求是在另一个模块中，调用拿不到返回的数据，所以需要引入Promise异步返回数据给调用的模块
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
import config from './config'
// 发送请求
export default (url, data = {}, method = 'GET') => {
  return new Promise((resolve,reject) => {
    // 1. new Promise初始化Promise实例的状态为pending
    wx.request({
      url: config.host + url,
      data: data,
      method: method,
      header:{
          // 设置请求头
          token : "xxxxxxx"
      }
      success: (res) => {
         // 这里可以对用户登陆信息进行本地保存
        // resolve修改Promise的状态为成功状态resolved
        resolve(res.data);
      },
      fail: (err) => {
        // reject修改Promise的状态为失败状态reject
        reject(err);
      }
    })
  })
}
  • 如果无法使用async，需要开发工具中的右上角的【详情】->【本地设置】里的【增强编译】
1
2
3
4
onLoad: async function(options){
    let  result = await request('/banner',{type:2})
    console.log(result)
}

列表渲染

  • 在data中绑定数据，使用setDate修改数据
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
import request from '../../utils/request'

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

Page({
  data: {
    bannerList: [], // 轮播图数据
    recommendList: [], //推荐歌单
  },

  onLoad: async function (options) {
    let bannerListData = await request('/banner', {
      type: 2
    })
    this.setData({
      bannerList: bannerListData.banners
    })
    let recommendListData = await request('/personalized', {
      limit: 10
    });
    console.log(recommendListData)
    this.setData({
      recommendList: recommendListData.result
    })
  }
})
  • 在调试器中【AppData】可以查看数据，然后渲染轮播图数据
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<view class="indexContainer">
  <swiper class="banners" indicator-active-color="#d43c33" indicator-color="ivory" indicator-dots>
    <swiper-item wx:for="{{bannerList}}" wx:key="bannerId">
      <image src="{{item.pic}}"></image>
    </swiper-item>
  </swiper>

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

定义组件

  • 在根目录创建components/navheader文件夹，然后右击【新建Component】
1
2
3
4
5
6
7
<view class="header">
  <text class="title">{{title}}</text>
  <view>
    <text>{{nav}}</text>
    <text class="more">查看更多</text>
  </view>
</view>
1
2
3
4
{
  "component": true,
  "usingComponents": {}
}
  • 组件和页面不同，组件具有属性，属性用于接收外部传来的值，等同于Vue中的props，这样我们就可以自定义组件内容
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// components/NavHeader/nav-header.js
Component({
  /**
   * 组件的属性列表，由组件外部传入的数据，等同于Vue中的props
   */
  properties: {
    title:{
      type:String,
      value:'默认值'
    },
    nav:{
      type:String,
      value:"默认值"
    }
  },
})
  • 然后在父页面引入，对于页面中多次使用的组件都可以抽离出来组成组件
1
2
3
4
5
{
  "usingComponents": {
    "nav-header":"/components/NavHeader/nav-header"
  }
}
1
2
3
<view class="recommendContainer">
   <nav-header title="推荐歌单" nav="为你精心推荐"></nav-header>
</view>

时间戳转换

  • WXS（WeiXin Script）是小程序的一套脚本语言，结合 WXML，可以构建出页面的结构；WXS 的运行环境和其他 JavaScript 代码是隔离的，WXS 中不能调用其他 JavaScript 文件中定义的函数，也不能调用小程序提供的API
  • 在utils文件夹下创建pipe.wxs
1
2
3
4
5
6
function format(ts) {
  var d = getDate(ts)
  return [d.getFullYear(), d.getMonth()+1, d.getDate()].join('-') + ' '
  + [d.getHours(), d.getMinutes(), d.getSeconds()].join(':')
}
module.exports.format = format
  • 在需要使用的wxml文件中头部引入
1
2
3
4
<!--引入管道-->
<wxs src="../../utils/pipe.wxs" module="pipe" />
<!--时间戳转换-->
 {{ pipe.format(item.publishDate) }}