项目搭建

引入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;
padding: 20rpx;
}
.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) }}