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型を使用する際の注意点を詳しく説明します

推薦する

MySQLマスタースレーブデータベース構築方法の詳細な説明

この記事では、MySQL マスター/スレーブ データベースの構築方法について説明します。ご参考までに...

Nginx におけるサーバーとロケーションのマッチングロジックの詳細な理解

サーバーマッチングロジックNginx は、リクエストを実行するサーバー ブロックを決定するときに、サ...

IE ラベル LI テキスト折り返し問題について

私は長い間この問題に悩まされていましたが、検索してみたところ、実際にこの問題を解決した人がいることが...

JavaScript PromiseとAsync/Awaitの詳細な説明

目次概要4つの例例1: 誕生日で説明する約束の基本例2: 数字当てゲーム例3: Web APIから国...

Vue はチャット ボックスで絵文字を送信する機能を実装します

vueチャットボックスで絵文字を送信し、vueインターフェースで絵文字を送信するための具体的なコード...

4つの柔軟なScssコンパイル出力スタイル

多くの人は、Scss を使用する瞬間からコンパイル方法を説明されてきました。したがって、コマンドのコ...

MySQL ピボットテーブルについての簡単な説明

次のような製品部品表があります。一部 部品ID 部品タイプ 製品ID ---------------...

Vueの監視プロパティの詳細

目次1.watchは一般的なデータ(数値、文字列、ブール値)の変更を監視します。 1. 数値2. 文...

MySQL が暗黙のデフォルト値を処理する方法

何人かの学生は、マスターとスレーブの間の不一致の問題に遭遇したと述べました。一般的な状況としては、m...

MySQLデータベースのトランザクション分離レベルの詳細な説明

データベーストランザクション分離レベルデータベース トランザクションには、低から高まで 4 つの分離...

優れた登録プロセスの手順

ウェブサイトにとって、これは最も基本的な機能です。それでは、登録プロセスに含まれる手順を見てみましょ...

MySQLデータの挿入、更新、削除の詳細

目次1. 挿入2. 更新3. 削除1. 挿入 顧客に挿入( 顧客.顧客住所、 顧客.cust_cit...

【Webデザイン】E-WebTemplates の美しい海外の Web ページ テンプレート (FLASH+PSD ソース ファイル+HTML) を共有します

これらはすべて海外のE-WebTemplates WebサイトからのWebページテンプレートであり、...

Dockerのローカルイメージ作成方法の分析

コンテナと呼ばれるものは、実際には親イメージに基づいて読み取りおよび書き込み可能なファイル階層を作成...