WeChatミニプログラムがいいねサービスを実装

WeChatミニプログラムがいいねサービスを実装

この記事では、WeChatアプレットの具体的なコードを参考までに紹介します。具体的な内容は次のとおりです。

1. 効果

2. 実装

1. 論理

1. ログイン時にユーザーデータはローカルにキャッシュされます。onloadではユーザー情報がローカルで取得され、data.userInfoに保存されます。
2. ユーザーの _openid が loveList によって返されたリストに含まれているかどうかを判断します。含まれている場合は、いいねをキャンセルします。含まれていない場合は、ニックネームを loveList に追加します。
3. 以下はニックネーム判定を使用していますが、これは後で_openid判定を使用するように最適化されます。

2.wxml

<!-- 
 wx:index = "index": リストループの後にすべての位置からインデックスにアクセスできます -->
<view class="item" wx:for="{{list}}" wx:index = "index">
 <view class="left">
 <image class="アバター"></image>
 </ビュー>
 <view class="right">
 <view class="nickname">{{item.nickName}}</view>
 <view class="content">{{item.content}}</view>
 <view class="image-list">
  <image class="image" wx:for="{{item.imageList}}"></image>
 </ビュー>
 <view class="time-area">
  <view class="time">{{item.time}}</view>
  <表示>
  <!--
   データインデックス="{{index}}"
   1.設定後、コールバック関数内のcurrentTarget.datasetに表示されます -->
  <image class="operation-button" src="../../images/caozuo.png" catchtap="showOperationPannel" data-index="{{index}}"></image>
  <!-- 現在のインデックスがディスク インデックスと一致しているかどうかを判断します -->
  <view class="操作パネル" wx:if="{{showOperationPannelIndex == index}}">
   <!-- インデックスとクリック機能を設定する -->
   <view class="tab" catchtap="clickLove" data-index="{{index}}">
   <image class="image" src="../../images/love-white.png"></image>
   <text>いいね</text>
   </ビュー>
   <view class="tab">
   <image class="image" src="../../images/comment-white.png"></image>
   <text>コメント</text>
   </ビュー>
  </ビュー>
  </ビュー>
  
 </ビュー>
 <view class="love-comment">
  <!-- 
  item.loveList = item.loveList を繰り返します
  <view class="love" wx:if="{{item.loveList.length > 0}}">
  <image class="love-icon" src="../../images/love-blue.png"></image>
  <text class="love-nickname" wx:for="{{item.loveList}}">蘭陵王老師</text>
  </ビュー>
  -->
  <view class="love" wx:if="{{item.loveList.length > 0}}">
  <image class="love-icon" src="../../images/love-blue.png"></image>
  <!-- love はループ全体の項目と競合しません -->
  <text class="love-nickname" wx:for-items="{{item.loveList}}"
  wx:for-item = "愛"
  >{{love.nickName}}</text>
  </ビュー>
  <view class="comment" wx:if="{{item.commentList.length > 0}}">
  <view wx:for-items="{{item.commentList}}"
  wx:for-item = "コメント">
   <text class="comment-nickname">{{comment.nickName}}</text>
   <text class="comment-content">{{comment.content}}</text>
  </ビュー>
  </ビュー>
 </ビュー>
 </ビュー>
</ビュー>

3.js

// ページ/サークル/リスト.js
var それ;
ページ({

 /**
 * ページの初期データ */
 データ: {
 ユーザー情報:null、
 リスト:[]、
 // 現在のクリック操作パネルのインデックス。友達のサークルごとに 1 つのパネル showOperationPannelIndex:-1、
 },

 /**
 * ライフサイクル機能 - ページの読み込みをリッスンする*/
 onLoad: 関数 (オプション) {
 それ = これ;
 (var i = 1; i < 10; i++) の場合 {
  // データを保存するオブジェクトを定義します var circleData = {};
  circleData.nickName = "友達-" + i;
  circleData.content = "友達の投稿コンテンツ-" + i;
  円データ.time = "2020-05-0" + i;

  //画像リスト var imageList = [];
  // いいねリスト var loveList = [];
  // コメントリスト var commentList = [];


  // これら3つの配列はcircleDataに割り当てられます
  円データ.imageList = imageList;
  サークルデータ.loveList = loveList;
  円データ.コメントリスト = コメントリスト;

  // 3つの配列に値を割り当てる for (var j = 1; j < i; j++) {
  //画像パス、プレースホルダー imageList.push(j);
  // loveList、loveData オブジェクトを定義します var loveData = {};
  loveData.nickName = 'いいね-' + j;
  // loveListにlikes配列を追加する
  loveList.push(loveData);

  //コメントデータ var commentData = {};
  commentData.nickName = "蘭陵王-" + j + ":";
  commentData.content = "コメント内容-" + j;
  // データを追加する commentList.push(commentData);
  }

  that.data.list.push(circleData);
 }
 // 再レンダリングします。setData({
  リスト: that.data.list
 })
 //ユーザー情報を取得する wx.getStorage({
  キー: 'userInfo',
  成功(res){
  //オブジェクトに変換 console.log("getStorage success:",JSON.parse(res.data));
  that.setData({
   ユーザー情報:JSON.parse(res.data)
  })
  }
 })
 },
 //操作パネルの表示を制御する showOperationPannel(e){
 console.log("操作パネルを表示",e);
 // クリックされたインデックスを取得します。var index = e.currentTarget.dataset.index;
 // 表示されている場合、閉じます if(that.data.showOperationPannelIndex == index){
  that.setData({
  // インデックスは 0 から始まります showOperationPannelIndex:-1
  })
 }
 それ以外{
  that.setData({
  // 現在のクリックのインデックスを設定します showOperationPannelIndex:index
  })
 }
 
 },
 // 関数 clickLove(e){ のように
 コンソールログ(e);
 var インデックス = e.currentTarget.dataset.index;
 // このデータを取得します var circleData = that.data.list[index];
 var loveList = circleData.loveList;
 var isHaveLove = false;
 for(var i = 0; i < loveList.length; i++){
  if(that.data.userInfo.nickName == loveList[i].nickName){
  ラブを持っているかどうか
  // いいねを削除する loveList.splice(i,1);
  壊す;
  }
 }

 if(!isHaveLove){
  loveList.push({nickName:that.data.userInfo.nickName});
 }
 that.setData({
  リスト:そのデータリスト、
  // いいねとコメントパネルを閉じる showOperationPannelIndex:-1
 })

 },
 
})

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • WeChatミニプログラムはいいねといいねしない機能を実装します
  • WeChatアプレットはリストページにいいねといいねしない機能を実装します
  • WeChatアプレットプロジェクトの概要: いいね、削除、リスト、共有機能
  • WeChatアプレットがローカルキャッシュに基づいていいね機能を実現する方法
  • WeChatアプレットウィジェットは、Canvasをベースにしたバブル効果のようなライブブロードキャストを実現します

<<:  FileZilla Server の FTP サーバー構成と 425 エラーおよび TLS 警告の解決策の詳細な説明

>>:  練習と面接のための Linux シェル スクリプトのヒント 9 つを共有する

推薦する

Nginxを再コンパイルしてモジュールを追加する方法

Nginx をコンパイルしてインストールするときに、http_ssl_module などの一部のモジ...

CentOS に Redis と MySQL をインストールする

1|0MySQL(MariaDB) 1|11. 説明MariaDB データベース管理システムは My...

SQL 結合クエリの内部結合、外部結合、クロス結合の違いの詳細な説明

データベースを使用するアプリケーションを開発する場合、必然的にユニオンクエリを使用する必要があります...

各 Nginx プロセスで開くことができるファイルの最大数を設定する方法

1. システム内で開いているファイルの最大数を確認する #現在のリソース制限設定を表示する ulim...

Ubuntu環境にAnaconda3をインストールするための完全な手順

目次Anaconda の紹介1. ダウンロード1.1 インストールパッケージを保存するフォルダを作成...

Vue.jsはコンポーネントを通じてアイコンを処理します

アイコン処理ソリューションこの記録の目的は、element-plus 以外のアイコンをコンポーネント...

Linuxロスレス展開方法

概要クラウド プラットフォームのお客様のサーバーでは、業務量が拡大し続けるとディスク容量が不足する場...

開発にVscodeとdockerを組み合わせて使用​​する詳細なプロセス

序文Docker と VS Code を使用すると、ローカル開発環境全体を最適化し、プロジェクトの進...

Docker環境にJenkinsコンテナをインストールする詳細なチュートリアル

推奨される Docker 学習教材: https://www.runoob.com/docker/d...

ウェブページでグレーまたはブラックモードを実現するための CSS3 フィルターコード

フロントエンドcss3 フィルターは、Web ページのグレー効果を実現できるだけでなく、ナイト モー...

ウェブページのフラッシュアニメーションが表示されない問題の解決策

<br />解決手順は次のとおりです。スタート -> 実行 -> reged...

シンプルなドラッグ効果を実現するJavaScript

この記事では、簡単なドラッグ効果を実現するためのJavaScriptの具体的なコードを参考までに紹介...

MySQL で null 値と空文字 ('') を区別する

日常の開発では、データベースの追加、削除、変更、クエリが一般的に行われるため、Mysql で NUL...

Linuxのアラーム機能の例の説明

Linuxアラーム機能の紹介上記のコード: #include <stdio.h> #in...

アカウントとパスワードを記憶する機能を実現するVueの考え方とプロセス

目次実装のアイデアアカウント パスワードを保存する方法は 3 つあります。機能インターフェースアカウ...