Cet article présente principalement des informations pertinentes sur les exemples pratiques de mini-programmes du programme WeChat Mini. Les amis qui en ont besoin peuvent s'y référer

Les composants de base et l'API du programme WeChat Mini. sont sortis Enfin, je dois revenir au sujet. J'ai passé la majeure partie de la journée à créer une version simplifiée de Baisi Bujie, comprenant quatre modules : blagues, images, audio et vidéo. Cet article vous donnera une brève introduction à cette petite application. Le code source sera mis sur GitHub et vous êtes invités à commencer.

Que puis-je apprendre du projet??

1. Comment utiliser la barre de tabulation

2. Appel réseau réelInterface

3. le chargement utilise

4. la vue par défilement pour implémenter l'actualisation déroulante et le chargement par extraction

5. composant d'image pour traiter les images,

6. Musique et vidéoUtilisation des composants

7. SautValeur de réussiteUtilisation de

8. Attends, attends, attends. . . .

app.jsonglobalfichier de configuration

{
 "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"
 }
}

Ici, il suffit de configurer les attributs globaux Chaque page doit être introduite dans l'attribut pags. Parfois, la barre d'onglets ne s'affiche pas, elle peut. C'est pour cette raison que la barre d'onglets Navigation du bas est divisée en quatre, qui sont dans la liste. La configuration principale ici est la couleur sélectionnée et non sélectionnée, la couleur d'arrière-plan, l'introduction de la page et l'introduction de l'image pour chaque option inférieure. page. L'attribut window configure principalement la couleur globale, la couleur du texte et la couleur d'arrière-plan du formulaire. L'attribut window sera ici remplacé par l'attribut window de chaque page.

application.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;
}

/*頭部顯示名字和時(shí)間整體樣式*/
.topRightView{
 margin-left: 15rpx;
 display: flex;
 flex-direction: column;
}
/*用戶(hù)名稱(chēng)樣式*/
.topRightName{
 font-size: 18rpx;
}
/*時(shí)間樣式*/
.topRightTime{
 font-size: 14rpx;
 color: #b8b2b2;
 margin-top: 10rpx;
}

/*因?yàn)橹虚g部分不一樣不放在整體樣式中*/

/*底部view整體樣式*/
.bottomView{
 display: flex;
 flex-direction: row;
 justify-content: space-between;
 align-items: center;
}
/*每個(gè)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)樣式 頂 踩 分享 評(píng)論*/
.bottomItemImage{
 width: 45rpx;
 height: 45rpx;
}
/*Item中的文字樣式 頂 踩 分享 評(píng)論*/
.bottomItemText{
 font-size: 15rpx;
 color: #b8b2b2;
 margin-left: 10rpx;
 margin-top: 8rpx;
}

/*分割線(xiàn)樣式*/
.pLine{
 background: #f3f3f3;
 width: 100%;
 height: 15rpx;
}

application. Dans wxss, j'ai divisé les quatre modules en trois parties?: en-tête, zone de contenu et bas. Parce que les styles d'en-tête et de bas de chaque page sont les mêmes mais que la partie centrale est différente, j'ai extrait 1 et 3 dans le global, CommentairesPlus clair

Module Joan

word.wxml

<loading hidden="{{loadingHidden}}">正在加載...</loading>
<scroll-view scroll-y="true" bindscrolltoupper="bindscrolltoupper" bindscrolltolower="bindscrolltolower" style="height: 100%">
 <block wx:for-items="{{list}}">
  <!-- 分割線(xiàn) -->
  <view class="pLine"></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>

Nous utilisons le défilement pour la couche externe -View wrapper pour charger davantage et tirer vers le haut pour actualiser bindscrolltoupper="bindscrolltoupper" Cet attribut appellera cette méthode lors du glissement vers le haut bindscrolltolower="bindscrolltolower" Ceci sera appelé lors du glissement vers le bas. Vous pouvez également mettre en page. l'en-tête et le bas ici. Extrayez-le et utilisez-le via la méthode d'introduction, pour ne pas avoir à l'écrire sur quatre pages. Vous pouvez l'obtenir vous-même

word.js<. ??>

Page({
 data: {
  list: [],
  maxtime: '',
  loadingHidden: false
 },
 onLoad: function (options) {
  // 頁(yè)面初始化 options為頁(yè)面跳轉(zhuǎn)所帶來(lái)的參數(shù)
  //加載最新
  this.requestData('newlist');
 },

 /**
  * 上拉刷新
  */
 bindscrolltoupper: function () {
  //加載最新
  // this.requestData('newlist');
 },

 /**
  * 加載更多
  */
 bindscrolltolower: function () {
  console.log('到底部')
  //加載更多
  this.requestData('list');
 },

 /**
  * 請(qǐng)求數(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('上一頁(yè)', that.data.list)
    that.setData({
     // 拼接數(shù)組
     list: that.data.list.concat(res.data.list),
     loadingHidden: true,
     maxtime: res.data.info.maxtime
    })

   }
  })
 },
 onReady: function () {
  // 頁(yè)面渲染完成
 },
 onShow: function () {
  // 頁(yè)面顯示
 },
 onHide: function () {
  // 頁(yè)面隱藏
 },
 onUnload: function () {
  // 頁(yè)面關(guān)閉
 }
})

Ici, les données sont chargées via la méthode requestData. Cette méthode accepte un paramètre, qui consiste à charger la dernière ou plusieurs via. ce paramètre. Le paramètre maxtime est utilisé pour charger la page suivante et le maxtime de la page précédente. Comme condition de chargement de la page suivante, pour charger les données de la page suivante, nous utilisons la méthode concat pour diviser les tableaux et modifier le chargement.

statut

chargement. L'un des word.wxml et word.json définit la taille de la police du contenu et l'autre définit le texte de la barre de navigation, je ne le publierai donc pas ici.

Module Image

image.wxml

<loading hidden="{{loadingHidden}}">正在加載...</loading>
<scroll-view scroll-y="true" bindscrolltolower="bindscrolltolower" style="height: 100%">
 <block wx:for-items="{{list}}">
  <!-- 分割線(xiàn) -->
  <view class="pLine"></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)時(shí)gif圖 -->
   <view wx:if="{{item.is_gif != 0}}" style="position: relative;">
    <image class="centerContent" src="{{item.cdn_img}}" mode="aspectFill" />
   </view>
   <!-- 普通大圖 可點(diǎn)擊查看全部圖片 -->
   <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" />
    <!-- 圖片上浮動(dòng)的點(diǎn)擊查看詳情圖片view -->
    <view class="flexView">
     <image src="../../image/seeBigPicture.png" style="width: 60rpx; height: 60rpx;" />
     <text class="flexText">點(diǎn)擊查看全圖</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>

Ici, nous regardons principalement la partie centrale pour distinguer et traiter l'image selon qu'il s'agit d'un gif. n'est pas un gif, vous pouvez cliquer pour voir l'image plus grande. Il y a un effet de vue flottante ici, combinez l'interface et image.wxss pour voir

image.wxss

/*中間文字樣式*/
.centerContent{
 margin-top: 20rpx;
 width: 100%;
 height: 600rpx;

}
/*中間浮動(dòng)文字樣式*/
.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

}
/*浮動(dòng)文字*/
.flexText{
 color: white;
 font-size: 35rpx;
}

image.js

Ici, nous regardons principalement la vue de la méthode lookBigPicture data-url=”{{item.cdn_img}}” data-height=”{{ item.height}}” data-width="{{item.width}}" sera installé dans le code logique. var url = e.currentTarget.dataset.url; Le transfert par valeur équivaut à envoyer une requête à GET Suivez simplement le format

var detail = '../detail/detail'
Page({
 data: {
  list: [],
  maxtime: '',
  loadingHidden: false
 },
 onLoad: function (options) {
  // 頁(yè)面初始化 options為頁(yè)面跳轉(zhuǎn)所帶來(lái)的參數(shù)
  this.requestData('newlist');

 },
 /**
  * 滾動(dòng)到底部時(shí)加載下一頁(yè)
  */
 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',
    // 上一頁(yè)的maxtime作為加載下一頁(yè)的條件，
    maxtime: this.data.maxtime,
    type: '10',
   },
   method: 'GET',
   success: function (res) {
    console.log(res)
    console.log('上一頁(yè)', 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 對(duì)應(yīng)wxml中data-url="{{item.url}}"
  var url = e.currentTarget.dataset.url;
  //獲取圖片高度 對(duì)應(yīng)wxml中data-height="{{item.height}}"
  var height = e.currentTarget.dataset.height;
  //獲取圖片高度 對(duì)應(yīng)wxml中data-width="{{item.width}}"
  var width = e.currentTarget.dataset.width;
  // 傳參方式向GET請(qǐng)求
  wx.navigateTo({
   url: detail + '?' + 'url=' + url + "&height=" + height + "&width=" + width,
   success: function (res) {
    console.log(res)
   },
   fail: function (err) {
    console.log(err)
   },
  })
 },
 onReady: function () {
  // 頁(yè)面渲染完成
 },
 onShow: function () {
  // 頁(yè)面顯示
 },
 onHide: function () {
  // 頁(yè)面隱藏
 },
 onUnload: function () {
  // 頁(yè)面關(guān)閉
 }
})

【Recommandations associées】

1. Téléchargement du code source de la plateforme de compte public WeChat

2 Téléchargement du code source du vote

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!