The basic components and API of the WeChat mini program have been finished, and we have to get back to the topic. I spent most of the day making a streamlined version of Baisi Bujie, including jokes and pictures. , audio, video, four modules. This article will give you a brief introduction to this small APP. The source code will be put on GitHub and you are welcome to start.

What can I learn from the project?

tabbar usage

Network call real interface

loading uses

scroll-view to implement pull-down refresh and pull-up loading

image component Processing of pictures,

Use of music and video components

Use of jump value transfer

etc. . . .

app.json global configuration file

{
 "pages":[
  "pages/word/word",
  "pages/image/image",
  "pages/voice/voice",
  "pages/video/video",
  "pages/detail/detail"
 ],
 "tabBar": {
  "color": "#a9b7b7",
  "selectedColor": "#eb4f38",
  "borderStyle": "white",
  "backgroundColor": "#ffffff",
  "list": [
   {
    "pagePath": "pages/word/word",
    "text": "段子",
    "iconPath": "image/wordN.png",
    "selectedIconPath": "image/wordS.png"
   },
   {
    "pagePath": "pages/image/image",
    "text": "圖片",
    "iconPath": "image/imageN.png",
    "selectedIconPath": "image/imageS.png"
   },
   {
    "pagePath": "pages/voice/voice",
    "text": "聲音",
    "iconPath": "image/voiceN.png",
    "selectedIconPath": "image/voiceS.png"
   },
   {
    "pagePath": "pages/video/video",
    "text": "視頻",
    "iconPath": "image/videoN.png",
    "selectedIconPath": "image/videoS.png"
   }
 
  ]
 },
 "window":{
  "backgroundTextStyle":"light",
  "navigationBarBackgroundColor": "#eb4f38",
  "navigationBarTextStyle":"white"
 }
}

Here we only need to configure the global properties of the program. Each page needs to be introduced in the pags attribute, sometimes tabbar The reason why it is not displayed may be because of this. The bottom navigation Item of the tabbar is divided into four, which are in the list. The main configuration here is the selected and unselected color, background color, page introduction and picture introduction of each bottom option page. The window attribute mainly configures the overall color, text color and background color of the form. The window attribute here will be overridden by the window attribute of each page.

app.wxss

/*整體view樣式*/
.containsView{
 padding: 15rpx 15rpx 15rpx 15rpx;
 margin-top: 15rpx;
 margin-bottom: 15rpx;
 background-color: white;
}
/*頭部整體樣式*/
.topContainsView{
 display: flex;
 flex-direction: row;
 align-items: center;
 margin-bottom: 18rpx;
}
 
/**
 * 頭像樣式
*/
.profileImage{
 width: 60rpx;
 height: 60rpx;
 border-radius: 30rpx;
}
 
/*頭部顯示名字和時間整體樣式*/
.topRightView{
 margin-left: 15rpx;
 display: flex;
 flex-direction: column;
}
/*用戶名稱樣式*/
.topRightName{
 font-size: 18rpx;
}
/*時間樣式*/
.topRightTime{
 font-size: 14rpx;
 color: #b8b2b2;
 margin-top: 10rpx;
}
 
/*因為中間部分不一樣不放在整體樣式中*/
 
/*底部view整體樣式*/
.bottomView{
 display: flex;
 flex-direction: row;
 justify-content: space-between;
 align-items: center;
}
/*每個Item樣式*/
.bottomItemView{
 display: flex;
 flex-direction: row;
 align-items: center;
 justify-content: center;
 margin-top: 18rpx;
 padding-left: 10rpx;
 padding-right: 10rpx;
}
/*Item樣式中的圖標(biāo)樣式 頂 踩 分享 評論*/
.bottomItemImage{
 width: 45rpx;
 height: 45rpx;
}
/*Item中的文字樣式 頂 踩 分享 評論*/
.bottomItemText{
 font-size: 15rpx;
 color: #b8b2b2;
 margin-left: 10rpx;
 margin-top: 8rpx;
}
 
/*分割線樣式*/
.divLine{
 background: #f3f3f3;
 width: 100%;
 height: 15rpx;
}

app.wxss I divided the four modules into three parts: header, content area, bottom because each page header The bottom and bottom styles are the same but the middle part is different, so I extracted 1 and 3 into the global, and the comments are clearer

paragraph module

word.wxml

<loading hidden="{{loadingHidden}}">正在加載...</loading>
<scroll-view scroll-y="true" bindscrolltoupper="bindscrolltoupper" bindscrolltolower="bindscrolltolower" style="height: 100%">
 <block wx:for-items="{{list}}">
  <!-- 分割線 -->
  <view class="divLine"></view>
  <!-- 整體item樣式 -->
  <view class="containsView">
   <view class="topContainsView">
    <image class="profileImage" src="{{item.profile_image}}" />
    <view class="topRightView">
     <text class="topRightName">{{item.name}}</text>
     <text class="topRightTime">{{item.passtime}}</text>
    </view>
   </view>
   <!-- 中間內(nèi)容 -->
   <text class="centerContent">{{item.text}}</text>
   <!-- 底部view樣式 -->
   <view class="bottomView">
    <view class="bottomItemView">
     <image class="bottomItemImage" src="../../image/ding.png" />
     <text class="bottomItemText">{{item.ding}}</text>
    </view>
    <view class="bottomItemView">
     <image class="bottomItemImage" src="../../image/cai.png" />
     <text class="bottomItemText">{{item.cai}}</text>
    </view>
    <view class="bottomItemView">
     <image class="bottomItemImage" src="../../image/share.png" />
     <text class="bottomItemText">{{item.repost}}</text>
    </view>
    <view class="bottomItemView">
     <image class="bottomItemImage" src="../../image/comment.png" />
     <text class="bottomItemText">{{item.comment}}</text>
    </view>
   </view>
  </view>
 </block>
</scroll-view>

Outside We wrap the layer with scroll-view to load more and pull up to refresh. bindscrolltoupper="bindscrolltoupper" This attribute will call this method when sliding to the top. bindscrolltolower="bindscrolltolower" will be called when sliding to the bottom. You can also move the header here. Extract the top and bottom layouts and use them through the introduction method, so you don’t need to write all four pages. You can get them yourself

word.js

Page({
 data: {
  list: [],
  maxtime: '',
  loadingHidden: false
 },
 onLoad: function (options) {
  // 頁面初始化 options為頁面跳轉(zhuǎn)所帶來的參數(shù)
  //加載最新
  this.requestData('newlist');
 },
 
 /**
  * 上拉刷新
  */
 bindscrolltoupper: function () {
  //加載最新
  // this.requestData('newlist');
 },
 
 /**
  * 加載更多
  */
 bindscrolltolower: function () {
  console.log('到底部')
  //加載更多
  this.requestData('list');
 },
 
 /**
  * 請求數(shù)據(jù)
  */
 requestData: function (a) {
  var that = this;
  console.log(that.data.maxtime)
  wx.request({
   url: 'http://api.budejie.com/api/api_open.php',
   data: {
    a: a,
    c: 'data',
    maxtime: that.data.maxtime,
    type: '29',
   },
   method: 'GET',
   success: function (res) {
    console.log(res)
    console.log('上一頁', that.data.list)
    that.setData({
     // 拼接數(shù)組
     list: that.data.list.concat(res.data.list),
     loadingHidden: true,
     maxtime: res.data.info.maxtime
    })
 
   }
  })
 },
 onReady: function () {
  // 頁面渲染完成
 },
 onShow: function () {
  // 頁面顯示
 },
 onHide: function () {
  // 頁面隱藏
 },
 onUnload: function () {
  // 頁面關(guān)閉
 }
})

## here Load data through the requestData method. This method accepts a parameter, which is to load the latest or more through this parameter. Use the maxtime parameter to load the next page. The maxtime of the previous page is used as the condition for loading the next page. Load the next page of data. We use the concat method to splice the arrays and change the loading status. One of word.wxml and word.json sets the content font size, and the other sets the navigation bar text, so I won’t post it here.

image.wxml

<loading hidden="{{loadingHidden}}">正在加載...</loading>
<scroll-view scroll-y="true" bindscrolltolower="bindscrolltolower" style="height: 100%">
 <block wx:for-items="{{list}}">
  <!-- 分割線 -->
  <view class="divLine"></view>
  <!-- 整體item樣式 -->
  <view class="containsView">
   <view class="topContainsView">
    <image class="profileImage" src="{{item.profile_image}}" />
    <view class="topRightView">
     <text class="topRightName">{{item.name}}</text>
     <text class="topRightTime">{{item.passtime}}</text>
    </view>
   </view>
   <text style="font-size: 30rpx">{{item.text}}</text>
   <!-- 當(dāng)時gif圖 -->
   <view wx:if="{{item.is_gif != 0}}" style="position: relative;">
    <image class="centerContent" src="{{item.cdn_img}}" mode="aspectFill" />
   </view>
   <!-- 普通大圖 可點擊查看全部圖片 -->
   <view data-url="{{item.cdn_img}}" data-height="{{item.height}}" data-width="{{item.width}}"
      bindtap="lookBigPicture" wx:elif="{{item.is_gif == 0}}" style="position: relative;">
    <!-- 圖片資源 -->
    <image class="centerContent" src="{{item.cdn_img}}" mode="aspectFill" />
    <!-- 圖片上浮動的點擊查看詳情圖片view -->
    <view class="flexView">
     <image src="../../image/seeBigPicture.png" style="width: 60rpx; height: 60rpx;" />
     <text class="flexText">點擊查看全圖</text>
    </view>
   </view>
   <!-- 底部view樣式 -->
   <view class="bottomView">
    <view class="bottomItemView">
     <image class="bottomItemImage" src="../../image/ding.png" />
     <text class="bottomItemText">{{item.ding}}</text>
    </view>
    <view class="bottomItemView">
     <image class="bottomItemImage" src="../../image/cai.png" />
     <text class="bottomItemText">{{item.cai}}</text>
    </view>
    <view class="bottomItemView">
     <image class="bottomItemImage" src="../../image/share.png" />
     <text class="bottomItemText">{{item.repost}}</text>
    </view>
    <view class="bottomItemView">
     <image class="bottomItemImage" src="../../image/comment.png" />
     <text class="bottomItemText">{{item.comment}}</text>
    </view>
   </view>
  </view>
 </block>
</scroll-view>

Here we mainly look at the middle part. We distinguish and process the image by whether it is a gif. If it is not a gif, you can click to view the larger image. There is a view suspension effect here, which combines the interface and image. .wxss look

image.wxss

/*中間文字樣式*/
.centerContent{
 margin-top: 20rpx;
 width: 100%;
 height: 600rpx;
 
}
/*中間浮動文字樣式*/
.flexView{
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 80rpx;
position: absolute;
z-index: 2;
top: 540rpx;
background: #000000;
opacity: 0.6
 
}
/*浮動文字*/
.flexText{
 color: white;
 font-size: 35rpx;
}

image.js

var detail = '../detail/detail'
Page({
 data: {
  list: [],
  maxtime: '',
  loadingHidden: false
 },
 onLoad: function (options) {
  // 頁面初始化 options為頁面跳轉(zhuǎn)所帶來的參數(shù)
  this.requestData('newlist');
 
 },
 /**
  * 滾動到底部時加載下一頁
  */
 bindscrolltolower: function () {
  console.log('到底部')
  this.requestData('list');
 
 },
 
 /**
  * 加載數(shù)據(jù)
  */
 requestData: function (a) {
  var that = this;
  wx.request({
   url: 'http://api.budejie.com/api/api_open.php',
   data: {
    a: a,
    c: 'data',
    // 上一頁的maxtime作為加載下一頁的條件，
    maxtime: this.data.maxtime,
    type: '10',
   },
   method: 'GET',
   success: function (res) {
    console.log(res)
    console.log('上一頁', that.datalist)
    that.setData({
     // 拼接數(shù)組
     list: that.data.list.concat(res.data.list),
     loadingHidden: true,
     maxtime: res.data.info.maxtime
    })
 
   }
  })
 },
 /**
  * 查看大圖
  */
 lookBigPicture: function (e) {
  console.log(e);
  console.log(e.currentTarget.id)
  //圖片url 對應(yīng)wxml中data-url="{{item.url}}"
  var url = e.currentTarget.dataset.url;
  //獲取圖片高度 對應(yīng)wxml中data-height="{{item.height}}"
  var height = e.currentTarget.dataset.height;
  //獲取圖片高度 對應(yīng)wxml中data-width="{{item.width}}"
  var width = e.currentTarget.dataset.width;
  // 傳參方式向GET請求
  wx.navigateTo({
   url: detail + '?' + 'url=' + url + "&height=" + height + "&width=" + width,
   success: function (res) {
    console.log(res)
   },
   fail: function (err) {
    console.log(err)
   },
  })
 },
 onReady: function () {
  // 頁面渲染完成
 },
 onShow: function () {
  // 頁面顯示
 },
 onHide: function () {
  // 頁面隱藏
 },
 onUnload: function () {
  // 頁面關(guān)閉
 }
})

Here we mainly look at the lookBigPicture method view data-url=”{{item.cdn_img}}” data- height=”{{item.height}}” data-width=”{{item.width}}” will be installed in the logic code. The syntax is var url = e.currentTarget.dataset.url; The value transfer rule Just follow the format when sending a request to GET

Thank you for reading, I hope it can help everyone, thank you for your support of this site!

For more articles related to WeChat mini programs and practical mini program examples, please pay attention to the PHP Chinese website!