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

推薦する

Baidu 入力メソッドが API を公開、自由に移植して使用できると主張

百度入力方式の担当者は、百度入力方式のオープンAPIの最大の利点は操作が便利であることであり、プラッ...

JS 日付コントロール My97DatePicker の基本的な使い方

My97DatePicker は非常に柔軟で使いやすい日付コントロールです。使い方はとても簡単です。...

Linux で jar パッケージを起動してバックグラウンドで実行する方法

jar パッケージを実行する Linux コマンドは次のとおりです。方法1: java -jar s...

js を使用してシンプルなスイッチ ライト コードを実装する

体の部位: <button>ライトのオン/オフを切り替える</button>...

Reactホームページの読み込みが遅い問題のパフォーマンス最適化事例の詳細な説明

しばらくReactを勉強した後、実践してみたいと思います。そこで、個人のブログのウェブサイトを再構築...

MySQL 8.0.15 winx64 のインストールと設定方法のグラフィックチュートリアル

この記事では、MySQL 8.0.15のインストールと設定方法を参考までに紹介します。具体的な内容は...

要素 UI に基づいてクエリ コンポーネントを段階的にカプセル化する方法

目次関数基本的なクエリ関数クエリ条件の初期化ページのレンダリングクエリと表示の最適化をさらに強化プル...

Dockerfileを使用してDockerイメージを構築する

目次Dockerfileを使用してDockerイメージを構築する1. Dockerfile とは何で...

SWFObjectを使用すると、HTMLにFlashを挿入する際のブラウザ互換性の問題を完全に解決できます。

一緒に学びましょう1. 伝統的な方法コードをコピーコードは次のとおりです。 <object c...

docker のインストールが完了し、bridge-nf-call-iptables が無効であると報告される問題を解決します

Centos マシンで docker のインストールが完了したら、docker info コマンドを...

mysql バックアップ戦略の実装 (フルバックアップ + 増分バックアップ)

目次設計シナリオ技術的なポイントサーバー情報準備フルバックアップスクリプト(Mysql-FullyB...

SASSで変数のデフォルト値を使用する方法

SASS で定義された変数では、後で設定された値によって古い値が上書きされます。 $色: 赤; $色...

gorm で MySql データベースを操作する方法

1. テーブル内のフィールドの大文字と小文字の区別を設定するgorm クエリを使用する場合、MySQ...

JSを使用して画像を効果的に圧縮する方法

目次序文変換関係具体的な実装file2DataUrl(ファイル、コールバック) file2Image...

Dockerを使用してMySQLデータベースをインストールするDeepinの詳細な説明

まずMySQLソースをクエリするdocker 検索 mysql公式ウェブサイトにアクセスしてイメージ...