WeChatアプレット開発によりホームページポップアップボックスアクティビティガイダンス機能が実現

WeChatアプレット開発によりホームページポップアップボックスアクティビティガイダンス機能が実現

1. 需要

イベント時間はバックグラウンドで設定でき、イベント中はミニプログラムのホームページにポップアップウィンドウにイベント画像が自動的に表示されます。ユーザーはアクティブな画像の表示をオフにすることができます。

1. 管理バックエンドでは、アクティビティの期間、ポップアップ ボックスを表示するかどうか、ポップアップ ボックスの画像、アクティビティを有効にするかどうかを追加できます。

2. ミニプログラムに入るときに、バックグラウンドでポップアップ ボックス アクティビティがあるかどうかを要求します。ある場合は、ポップアップ ボックスにアクティビティの画像が表示されます。

2. データベース設計

ミニプログラムのポップアップ アクティビティはシステム構成内の項目であるため、ポップアップ アクティビティ構成を保存するためにパブリック システム構成が直接使用されます。

パブリックシステム構成テーブルの構造は次のとおりです。

テーブル `sys_config` を作成します (
  `id` bigint(20) NOT NULL AUTO_INCREMENT COMMENT '主キー',
  `configName` varchar(255) デフォルト NULL コメント '構成名',
  `configInfo` 長文コメント '構成情報'、
  主キー (`id`)
)ENGINE=MyISAM デフォルト文字セット=utf8;

3.Javaバックグラウンド構成の実装

パブリッククラスSysConfigはCommonBeanを拡張します{
 
    public static String NAME_SECKILL="config_seckill"; //Seckill 構成 private Long id;
    private String configName; // 設定名 private String configInfo; // 設定情報 public Long getId() {
        ID を返します。
    }
 
    パブリック void setId(Long id) {
        id は、
    }
 
    パブリック文字列 getConfigName() {
        configName を返します。
    }
 
    パブリック void setConfigName(String configName) {
        this.configName = configName;
    }
 
    パブリック文字列 getConfigInfo() {
        configInfo を返します。
    }
 
    パブリック void setConfigInfo(String configInfo) {
        this.configInfo = configInfo;
    }
}
@Service("sysConfigService")
パブリッククラスSysConfigServiceImpl<T>はSysConfigService<T>を実装します{
 
    オートワイヤード
    プライベート SysConfigDao sysConfigDao;
    // 構成を更新 public int update(SysConfig sysConfig){
        sysConfigDao.update(sysConfig) を返します。
    }
 
    // 設定名に基づいて設定情報を取得します @Override
    パブリック T getConfigByName(クラス t、文字列 configname) {
        SysConfig sysConfig = sysConfigDao.getConfigByName(configname);
        sysConfig == nullの場合{
            null を返します。
        }
        T 結果 = (T) new Gson().fromJson(sysConfig.getConfigInfo(), t);
        結果を返します。
    }
 
    // 設定を保存する public int saveConfig(T t, String configname) {
        SysConfig sysConfig = 新しい SysConfig();
        sysConfig.setConfigName(設定名);
        Gson gson = new GsonBuilder().setDateFormat("yyyy-MM-dd HH:mm:ss").create();
        文字列 json = gson.toJson(t);
        sysConfig.setConfigInfo(json);
        // 追加されたかどうかを判断し、追加された場合は更新し、追加されていない場合は追加します if (sysConfigDao.getConfigByName(configname) == null) {
            int 結果 = sysConfigDao.add(sysConfig);
            結果を返します。
        } それ以外 {
            int 結果 = sysConfigDao.update(sysConfig);
            結果を返します。
        }
    }
 
}

導入後の効果は以下のとおりです。

4. WeChatアプレットのフロントエンド実装

ミニプログラムJS実装

             getSysConfigSecKill() {
               app.$post(app.API_SysConfigSecKill, {}, (res) => {
                 (res.statusCode == 0)の場合{
                   データを res.data とします。
                   (data.openIndexPopWindow)の場合{
                     this.setData({
                       seckillispopwindow: true、
                       seckillurl: data.popWindowPic
                     })
                   }
                 }
               })

             },

ミニプログラムスタイル

/*アクティビティポップアップウィンドウ*/
.seckill{位置: 固定;幅: 325px;高さ: 164px;上: 100px;右: 20px;}
.seckill-close{位置: 固定;幅:32px;高さ:32px;上:250px;右:160px;}

フロントエンドディスプレイ

<!--アクティビティポップアップボックス-->
<view wx:if="{{seckillispopwindow}}">
  <表示>
    <画像 bindtap='seckill_go' class="seckill" src="{{seckillurl}}"></画像>
    <画像 bindtap='seckill_close' class="seckill-close" src="../../images/close.png"></画像>
  </ビュー>
</ビュー>

要約する

これで、ホームページポップアップボックスアクティビティガイダンス機能を実装するためのWeChatミニプログラムの開発に関するこの記事は終了です。より関連性の高いWeChatミニプログラムポップアップボックスアクティビティガイダンスコンテンツについては、123WORDPRESS.COMで以前の記事を検索するか、次の関連記事を引き続き閲覧してください。今後も123WORDPRESS.COMを応援してください。

以下もご興味があるかもしれません:
  • WeChatアプレットで使用される3つの一般的なポップアッププロンプトの詳細な説明
  • WeChat ミニプログラムの実践: カスタムモーダルポップアップウィンドウ (8)
  • WeChat アプレットでカスタム モーダル ポップアップ ウィンドウのカプセル化を実装する方法
  • WeChatアプレットはカスタムピッカーセレクターポップアップコンテンツを実装します
  • WeChatアプレットが美しいポップアップ効果を実現
  • WeChatアプレットカスタムポップアップウィンドウの実装の詳細説明(ユニバーサル)
  • WeChatアプレットとポップアップコンポーネントを実装する方法
  • WeChat アプレット ポップアップ ウィンドウのカスタム サンプル コード
  • WeChat アプレットフォームのポップアップ例
  • WeChatアプレットカスタムモーダルポップアップコンポーネントの詳細な説明

<<:  Linux 論理ボリューム管理 (LVM) の使用法の概要

>>:  MySQLでTEXT/BLOB型を使用する際の注意点を詳しく説明します

推薦する

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

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

JavaScript のクロージャの詳細な説明

導入クロージャは JavaScript の非常に強力な機能です。いわゆるクロージャは関数内の関数です...

MySQL は、あるテーブルのデータに基づいて別のテーブルの特定のフィールドを更新します (SQL ステートメント)

次のコードは、MySQL が 1 つのテーブルのデータに基づいて別のテーブルのいくつかのフィールドを...

Centos8.2 クラウド サーバー環境に Tomcat8.5 をインストールするための詳細なチュートリアル

Tomcatをインストールする前に、まずJDK環境をインストールしてくださいLinux サーバー上で...

Tomcat のプレースホルダーによるポート設定方法 (パラメータ指定方式)

仕事で必要になったため、インターネットで多くの情報を見つけましたが、それらはすべてコピーアンドペース...

Linuxでディスク使用量を確認する方法

1. dfコマンドを使用してディスク全体の使用量を表示します。 df コマンドは、ハードディスクのマ...

MySQL のインデックス障害の一般的なシナリオと回避方法

序文これまでにも、一部の SQL ステートメントを不適切に使用すると MySQL インデックスが失敗...

HTML テーブル マークアップ チュートリアル (29): セルのライト境界線の色属性 BORDERCOLORLIGHT

セルでは、明るい境界線の色を個別に定義できます。 > 基本構文<TD ボーダーカラーライ...

CocosCreator 学習モジュールスクリプト

Cocos Creator モジュラースクリプトCocos Creator を使用すると、コードを複...

jQuery Ajax チャットボットの実装事例

チャットボットは多くの手作業を省くことができ、顧客サービス、天気予報対応など、さまざまな状況で使用で...

MySQLでorder byを使用せずにランキングを実装する3つの方法のまとめ

ビジネスを想定: 2位の従業員の給与情報を見るデータベースを作成する emps が存在する場合はデー...

Vue における ref と $refs の紹介と使用例

序文JavaScript では、document.querySelector("#demo...

HTMLにスクリプトを追加する2つの方法と注意点

HTML に <script> スクリプトを追加する方法: 1. HTMLにJavaSc...

MySQL 接続失敗の一般的な障害と原因

==================================================...

HTML5+CSS3 ヘッダー作成例と更新

前回、私たちは 2 つのヘッダー レイアウト (フレックスボックス 1 つとフロート 1 つ) を考...