Tutoriel pratique sur le développement WeChat

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

/*头部显示名字和时间整体样式*/
.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样式中的图标样式 顶 踩 分享 评论*/
.bottomItemImage{
 width: 45rpx;
 height: 45rpx;
}
/*Item中的文字样式 顶 踩 分享 评论*/
.bottomItemText{
 font-size: 15rpx;
 color: #b8b2b2;
 margin-left: 10rpx;
 margin-top: 8rpx;
}

/*分割线样式*/
.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}}">
  <!-- 分割线 -->
  <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 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) {
  // 页面初始化 options为页面跳转所带来的参数
  //加载最新
  this.requestData('newlist');
 },

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

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

 /**
  * 请求数据
  */
 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({
     // 拼接数组
     list: that.data.list.concat(res.data.list),
     loadingHidden: true,
     maxtime: res.data.info.maxtime
    })

   }
  })
 },
 onReady: function () {
  // 页面渲染完成
 },
 onShow: function () {
  // 页面显示
 },
 onHide: function () {
  // 页面隐藏
 },
 onUnload: function () {
  // 页面关闭
 }
})

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}}">
  <!-- 分割线 -->
  <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>
   <!-- 当时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>

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;

}
/*中间浮动文字样式*/
.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

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) {
  // 页面初始化 options为页面跳转所带来的参数
  this.requestData('newlist');

 },
 /**
  * 滚动到底部时加载下一页
  */
 bindscrolltolower: function () {
  console.log('到底部')
  this.requestData('list');

 },

 /**
  * 加载数据
  */
 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({
     // 拼接数组
     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 对应wxml中data-url="{{item.url}}"
  var url = e.currentTarget.dataset.url;
  //获取图片高度 对应wxml中data-height="{{item.height}}"
  var height = e.currentTarget.dataset.height;
  //获取图片高度 对应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 () {
  // 页面关闭
 }
})

【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!