Just For Interest

0%

小程序|新番查询小程序

发表于 分类于 热度： Valine：
本文字数： 6.8k

image-20210904155423003

窗口栏

在app.json中修改窗口栏

1
2
3
4
5
6
7
8
9
10
11
12
"window": {
  "navigationBarBackgroundColor": "#ec1380",
  "navigationBarTextStyle": "white",
  "navigationBarTitleText": "新番查询",
  "navigationStyle": "default",
  "backgroundColor": "#ec1380",
  "backgroundTextStyle": "dark",
  "backgroundColorTop": "#ffffff",
  "backgroundColorBottom": "#ffffff",
  "enablePullDownRefresh": true,
  "onReachBottomDistance": 50
}

常用属性：

属性 默认值 描述
navigationBarBackgroundColor #000000 导航栏背景颜色，如 #000000
navigationBarTitleText 导航栏标题文字内容

轮播图

1.index.wxml添加元素
1
2
3
4
5
6
7
<swiper class="swiper" indicator-dots="{{true}}" autoplay="{{true}}" interval="5000" duration="500" circular="{{true}}" current="0" bindchange="swiperChange"  >
<block wx:for="{{imgUrls}}" wx:key="unique">
          <swiper-item >
                    <image src="{{item}}" class="img"/>
          </swiper-item>
</block>
</swiper>

（1）swiper标签，微信小程序滑块视图容器，以下是其常用属性

属性 默认值 说明
indicator-dots false 是否显示面板指示点
autoplay false 是否自动切换
current 0 当前所在滑块的 index
interval 5000 自动切换时间间隔
duration 500 滑动动画时长
circular false 是否采用衔接滑动
bindchange 无 current 改变时会触发 change 事件，event.detail = {current, source}

（2）block标签，可在wxml文件实现逻辑，常用的有wx:for和wx：if

  • 在组件上使用 wx:for 控制属性绑定一个数组，可以理解为该元素储存了一个数组（imgUrls），通过wx：for遍历了这个数组
  • wx:key用于指定列表中项目的唯一的标识符，相当于数组的下标，确定轮播图的顺序

（3）swiper-item，放置在swiper标签中，用于确定轮播对象，代码的轮播对象是图片

2.index.wxss排布元素
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
.swiper-con{
          position: relative;
}

swiper{
          height: 421rpx;          
}

swiper-item image{
          width: 100%;
          height: 100%;
}

.swiper-con .swiper{
          height:300rpx;
}

.swiper-con .swiper .img{
          width: 100%;
          height: 100%;
}

与css类似的语法，确定轮播图的排布

3.index.js实现逻辑
1
2
3
4
5
6
7
8
data: {
  imgUrls:[
    "https://i0.hdslb.com/bfs/bangumi/image/bc3c51659027a8f54a8a0a5894c83cafe582139f.jpg@2320w_664h.jpg",
    "https://i0.hdslb.com/bfs/bangumi/image/8f11a567cf9bed9035c4250584cec6847a7f42cb.jpg@2320w_664h.jpg",
    "https://i0.hdslb.com/bfs/bangumi/image/ba2a537e388881d4e0c9aec097b7ab690ab9849a.jpg@2320w_664h.jpg",
    "https://i0.hdslb.com/bfs/bangumi/image/b719ed2a2856345a57c4a68fddcc9de3c01a0ddc.jpg@2320w_664h.jpg"
  ]
}
  • data内数据是wxml变量的初始数据，wxml通过wx:for遍历imgUrls，并存储在item变量中输出（注意变量名一定要为item）
  • 函数swiperChange被触发，函数写法为： 函数名：function（参数）{内容}
  • this.setData更改变量，可用console.log(e)输出数据数组

接入API

1.index.js实现逻辑
1
2
3
4
5
6
7
8
9
wx.request({
   url:"https://bangumi.bilibili.com/web_api/timeline_global",
   data:{x:"result"},
   header: {
     'content-type': 'application/json' 
   },
   success(res){
       console.log(res.data)
   }
  • url，填入请求的域名，记住要勾选不校验域名合法或在微信平台填写该域名否则报错
  • data，返回的数据
  • header，一般默认不填，返回json型数据
  • success()，请求成功后执行的语句，一般都会用console.log(res.data)输出数据数组，以便检索出数据

构建选择器

1.index.wxml添加元素
1
2
3
4
5
6
7
<view class="choose">      
<picker bindchange="bindPickerChange" range="{{array}}" value="{{index}}" >
<view class ="picker">
      日期选择：{{array[index]}}
    </view>
</picker>
</view>

（1）标签构建选择器，用mode确定选择器的类型

  • selector，普通选择器，mode不填时，默认使用
  • time，时间选择器，小程序内置的可以选择时间的选择器
  • date，日期选择器
  • region，省市区选择器

（2）range属性，填入一个数组作为选择器的项，这个数组在index.js的初始数据中填写

（3）value属性，填写的是数组的下标，数据同样在data中填入

1
2
3
4
data: {
  array: [],  //由于我的选择器是从api获取的，所以置空
  index: 6, //index代表下标，在B站新番api中，下标6的数据就是今日数据
},

（4）bindchang属性，填入触发的函数，函数在index.js文件中构建

（5）以上内容都是处理了选择器的数据，接下来就要在页面上展示选择器

1
2
3
4
5
6
7
<view class="choose">      
<picker bindchange="bindPickerChange" range="{{array}}" value="{{index}}" >
<view class ="picker">
      日期选择：{{array[index]}}  //填入可变的数据
    </view>
</picker>
</view>
2.index.wxss选择器布局
1
2
3
4
5
6
7
8
9
10
11
12
13
14
.choose{
          height:10rpx;
          width: 100%;
          display:flex;
          flex-direction: column;
          align-items: center;
          margin-top: 25rpx;
          
}

.picker{
          border-bottom: 5px solid #70bcf6; 
          border-radius: 2px;  
}
3.index.js构建函数

本项目需要实现的是，获取B站新番的数据，通过选择器来查看该日的新番

（1）填写数据：

1
2
3
4
5
6
data: {
  array: [], //由于我的选择器是从api获取的，所以置空
  index: 6,
  arr_png:[]  //获取api中新番的图片
 
},

（2）初始化页面加载数据

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
onLoad: function (options) {
  var that = this
  wx.request({
    url:"https://bangumi.bilibili.com/web_api/timeline_global",
    data:{x:"result"},
    header: {
      'content-type': 'application/json' 
    },
    success(res){
      var arr = new Array(); 
      var arr_gif = new Array(); 
      for(let i = 0;i <= 11;i++){
        arr[i] = res.data.result[i].date
        arr_gif[i] = res.data.result[i].seasons
      }
      that.setData({
        array:arr,
        arr_png:arr_gif[6] //下标6是当天数
      })
    }
  })
},

  • onLoad: function (options) 函数专门用于数据初始化，加载完页面，即加载完数据

  • 在处理api的数据时不能直接用this，而是用that取代this

    1
    var that = this;

  • 观察api返回的数据，用.符号获取对应数据，通过循环遍历将数据存储在数组中

  • setDate负责更换数据

    1
    2
    3
    4
    that.setData({
       array:arr, //data中的array空数组填入获取的日期数据
       arr_png:arr_gif[6]  //填入新番相关数据
           })

（3）选择器触发数据重新加载

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
bindPickerChange:function(e){
  var that = this
  var value = e.detail.value
  wx.request({
    url:"https://bangumi.bilibili.com/web_api/timeline_global",
    data:{x:"result"},
    header: {
      'content-type': 'application/json' 
    },
    success(res){
      var arr = new Array(); 
      var arr_gif = new Array(); 
      console.log(res.data);
      for(let i = 0;i <= 11;i++){
        arr[i] = res.data.result[i].date
        arr_gif[i] = res.data.result[i].seasons
      }
      that.setData({
        array:arr,
        index:value,
        arr_png:arr_gif[value]
      })
    }
  })
},

和上面一个函数的获取数据方法一致，用setDate更换数据

1
2
3
4
5
that.setData({
  array:arr,
  index:value,
  arr_png:arr_gif[value]
})

展示页面的实现

1.index.wxml展示页面元素
1
2
3
4
5
6
7
8
9
10
<view class="anime"wx:for="{{arr_png}}" wx:key="unique">
          <view class="png" >
                    <image src="{{item.cover}}"/>         
          </view>
          <view class="text">
                    <text> {{item.pub_index}}</text>                             
          </view>
          <view class="a">
          <a class="link" src="{{item.url}}">{{item.title}} </a>
          </view>

  • wx:for，填写需要获取的数据，从data中获取（经过js的函数后，此时的数据是从api中的）

  • 通过观察api，用的形式获取数据

2.index.wxss调整布局
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
.png{
          display: flex;
          flex-direction: column; /*垂直布局*/
          align-items: center; /*水平方向居中*/
          margin-top: 40rpx;
}

.png image { 
          width: 200px;
          height:300px;
          margin-top: 50rpx;
          margin-left: 10rpx;

}

.text{    
          position: relative;
          top: 10rpx;
          text-align: center;
          color: deepskyblue;
}

.a{       position: relative;
          top: 20rpx;
          text-align: center;
}

至此一个简单的小程序就完成啦！