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 つを共有する

推薦する

jsはタイトルと説明のキーワードを検出し、見つかった場合は置換するか他のページにジャンプします。

キーワード 一般タイトルには、クラック、キー、シリアル番号、キージェネレータなどの単語を含めることは...

MySQLデータベースとOracleデータベース間のバックアップをインポートする

OracleデータベースからエクスポートされたデータをMySqlデータベースにインポートします。 1...

JavaScriptにおけるこれの深い理解

Jsでのこれの深い理解JavaScriptスコープはstatic scopeスコープですが、 Jsの...

マージンのマージの問題を解決する

1. 兄弟要素の余白を結合する効果は次のようになります: (2 つの間の間隔は 150 ピクセルでは...

Typescriptを使用してローカルストレージをカプセル化する方法

目次序文ローカルストレージの使用シナリオ使用上の問題解決機能性有効期限を追加データ暗号化を追加する命...

高速レイアウトのための CSS ビューポート単位

CSS ビューポート ユニットはここ数年登場しており、時が経つにつれて、ますます多くの開発者が使用し...

HTMLコードに基づく画像断片化読み込み機能の実装

今日は断片化された画像の読み込み効果を実装します。効果は次のとおりです。 これを 3 つのステップで...

HTML テーブルタグチュートリアル (24): 行の水平方向の配置属性 ALIGN

水平方向では、行の配置を左、中央、右に設定できます。基本的な構文<TR ALIGN="...

IE6/7 で絶対配置された要素が不可解に消えたりブロックされたりする問題を解決する方法

1. 絶対配置レイヤーの隣接フローティング レイヤーの幅が親レイヤーの幅と等しくなく、フロートがクリ...

ウェブページのCSSの優先順位について詳しく説明します

CSS の優先順位について話す前に、CSS とは何か、CSS が何に使用されるのかを理解する必要があ...

mysqlは指定された期間内の統計データを取得します

mysqlは指定された期間内の統計データを取得します年別統計 選択 カウント(*)、 DATE_FO...

React Nativeプロジェクトフレームワークの構築経験

React Native は、2015 年 4 月に Facebook によってオープンソース化され...

ネイティブWeChatアプレット開発におけるreduxの使用の詳細な説明

前提複雑なシナリオでは、複数の異なるページ間で大量のデータを使用したり変更したりする必要があります。...

MySQLとRedisキャッシュ間の同期ソリューションについての簡単な説明

目次1. ソリューション 1 (UDF)デモケース2. ソリューション2(binlogの解析)キャナ...

nginx がドメイン名アクセス用に設定されている場合にドメイン名の後に 2 つのスラッシュ // が表示される問題の解決方法

最近、個人のウェブサイトを書き直しました。Alibaba Cloudで新しいサーバーを購入しました。...