WeChat開発入門 (7) weui.wxssの使い方

WeUI とは何ですか?

WeUI は、WeChat のビジュアル デザイン仕様に準拠し、公式デザイン チームによってミニ プログラム用に調整された基本的なスタイル ライブラリです。

ここで WeUI を基本に置いたのは、WeUI は公式製品であり、10 月 28 日の IDE アップデート以降、IDE は CSS を認識および参照できなくなり、ネットワークからのスタイル ファイルの取得もブロックされるためです。 CSSの制限から。

》》》WeUIの導入方法

1. WeUIをダウンロード
   weui.wxss
   [weui-wxss/dist/style/]ディレクトリにあることに注意してください。[weui-wxss/]ディレクトリにはダウンロードしないでくださいsrc]ディレクトリ

2. weui.wxssをミニプログラムのルートディレクトリにコピーします
   

3. app.wxssまたはページwxssにweui.wxssをインポートします

   /**app.wxss**/
   @import 'weui.wxss';

4. 上記はweui.wxssを正常に導入し、 weui は単一のコンポーネントも提供します。スタイルが導入され、プロセスは上記と同じです。

》》》WeUIの使い方

1. ルートコンポーネントはclass="page"

   <view class="page">
   </view>

   を使用します

2. ページスケルトンコンポーネントはclass="pagexxx"を使用します(2つのアンダースコアに注意してください)

   <view class="page">
   <!--页头-->
   <view class="pagehd"></view>
   <!--主体-->
   <view class="pagebd"></view>
   <!--没有页脚-->
   </view>

3. その他のコンポーネント すべてには、weui- で始まり、その後に class="weui-footer"

   <view class="weui-footer">我是页脚</view>

4. などのコンポーネント名が続くサブコンポーネント スタイル (view.weui-footer コンポーネントなど)、およびリンクと著作権情報。

   <view class="weui-footer">
   <view class="weui-footerlinks">
       <navigator url="" class="weui-footerlink">小黄象</navigator>
   </view>
   <view class="weui-footertext">Copyright © 精品专栏组</view>
   </view>

   コンポーネントとサブコンポーネントは2つのアンダースコアで接続されているため、「-」を使用する場合と使用する場合を区別する必要があります

下の写真は、weui.wxssで作成されたコミュニティコラムアプレットバージョンです。改善されました

【関連する推奨事項】

1. WeChat パブリックアカウントプラットフォームのソースコードダウンロード

2. WeChat 投票ソースコード

3. WeChat Lala Takeaway 2.2.4 復号化された WeChat Rubik's のオープンソースバージョンキューブのソースコード

以上がWeChat開発入門 (7) weui.wxssの使い方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。