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

推薦する

州と市町村の連携を簡単に実現するJavaScript

この記事では、省と市の簡単な連携を実現するためのJavaScriptの具体的なコードを参考までに紹介...

表の境界線の CSS 構文

<br />表の境界線の CSS 構文具体的な内容には、上境界線の幅、右境界線の幅、下境...

Nginx ルーティング転送とリバースプロキシロケーション構成の実装

Nginx を設定する 3 つの方法最初の方法は、位置一致部分を直接置き換える。 2 番目の pro...

ZooKeeper をベースにした Hadoop 高可用性クラスタの構築のチュートリアル図

目次1. 高可用性の概要1.1 可用性の高い全体アーキテクチャ1.2 QJMに基づく共有ストレージシ...

純粋な CSS でフォ​​ーム検証を実装するためのサンプル コード

日常業務において、フォームの検証は非常に一般的な設計要件です。ログイン ボックスや登録ボックス、アン...

ウェブページの画像を素早く表示する方法とテクニック

1. .jpg ではなく .gif を使用します。GIF は JPG に比べてサイズが小さくなります...

Reactを使用する際の7つの落とし穴のまとめ

目次1. コンポーネントの肥大化2. 状態を直接変更する3. プロパティは数値を渡す必要があるが文字...

CSS3の3D効果を使って立方体を作成する

CSS3 の 3D 効果を使用して立方体を作成する方法を学ぶと、3D シーンの回転と変位のプロパティ...

Mysql 5.7.19 無料インストール バージョンで遭遇した落とし穴 (コレクション)

1. 公式ウェブサイトから 64 ビットの zip ファイルをダウンロードします。 2. インスト...

Vue プロジェクトでのスキャンコード決済の実装例 (デモ付き)

目次需要背景思考分析UI 表示始める1. 支払いコンポーネントテンプレートを作成する2. 支払いコン...

MySQL の日付関数と日付変換およびフォーマット関数

MySQL は、膨大なユーザーベースを持つ無料のリレーショナル データベースです。この記事では、My...

Vue でインデックスをキー属性値として使用することが推奨されないのはなぜですか?

目次序文キーの役割差分アルゴリズムにおけるキーの役割ヘッドノードを同期するテールノードを同期する新し...

MySQL インデックスの正しい使い方とインデックスの原理の詳細な説明

1. はじめになぜインデックスが必要なのでしょうか?一般的なアプリケーション システムでは、読み取り...

ダイナミックな波効果を実現するSVG+CSS3

ベクトル波 <svg viewBox="0 0 560 20" class...

タイプライター効果を実現する純粋な js

この記事の例では、タイプライター効果を実現するためのjsの具体的なコードを参考までに共有しています。...