WeChat ミニ プログラムの例: WeUI フレームワークの導入によるコードの実装

この記事の内容は WeChat アプレットの例です。紹介されたフレームワーク WeUI のコード実装です。必要な友人が参考になれば幸いです。

まず、WeUI の公式紹介を見てみましょう:

WeUI は、WeChat のネイティブなビジュアル エクスペリエンスと一致する基本的なスタイル ライブラリのセットであり、WeChat Web ページおよび WeChat 用に WeChat の公式デザイン チームによってカスタマイズされています。ユーザーエクスペリエンスをさらに強化するためのミニプログラム。 WeChat ミニ プログラムの開発プロセスで、複雑なフロントエンド スタイルのインターフェイスの問題が発生した場合、UI フレームワークを使用する必要があります。これにより、将来的に多くの問題が回避されます。

WeUI は WeChat が公式に提供しているオープンソースのモバイル UI フレームワークであり、WeChat との互換性にも大きな問題はありません。また、各コンポーネントのスタイルは WeChat と同じであるため、WeChat とうまく統合できます。ユーザーエクスペリエンスの向上。

使用手順

1. GitHub https://github.com/weui/weui-wxss/ でプログラム コードをダウンロードします。解凍すると、次のディレクトリが表示されます。 add weui- wxss-masterdiststyleweui.wxss ファイルをミニ プログラム プロジェクトのルート ディレクトリにインポートします:

3. 新しい WeChat ミニ プログラム プロジェクトを作成し、weui.wxss ファイルをミニ プログラムのルート ディレクトリにインポートします。プロジェクト:

4. プロジェクト内の参照: グローバル app.wxss に weui.wxss への参照を追加します - @import "weui.wxss";

5 ルート コンポーネントはクラスを使用します="page"

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

6 ページのスケルトン

<view class="page">
<view class="page__hd"></view><!--页头-->
<view class="page__bd"></view><!--主体-->
<view></view><!--未设置页脚-->
</view>

7 さらに、コンポーネント名は、class="weui-footer"

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

8 のように、weui- で始まります。 コンポーネントのサブコンポーネントのスタイル。 view.weui-footer コンポーネント、およびリンクと著作権情報。

<view class="weui-footer">
<view class="weui-footer__links">
    <navigator url="" class="weui-footer__link">上海物联网科技有限公司</navigator>
</view>
<view class="weui-footer__text">Copyright © 程序媛专用</view>
</view>

9. 特定のコンポーネントについては、ミニ プログラムで新しいプロジェクトを作成し、アドレスを weui-wxss-masterdist に指定します。その後は、いつでも必要なエフェクトを見つけることができます。 github からダウンロードしたコードの例を使用します。プロジェクトで使用される weui のスタイルは次のとおりです:

サンプル コード:

<view class="page">
    <view class="page__hd">
        <view class="page__title">Button</view>
        <view class="page__desc">按钮，WeUI采用小程序原生的按钮为主体，加入一些间距的样式。</view>
    </view>
    
    <view class="page__bd page__bd_spacing">
        <button class="weui-btn" type="primary">页面主操作 Normal</button>
        <button class="weui-btn" type="primary" disabled="true">页面主操作 Disabled</button>

        <button class="weui-btn" type="default">页面次要操作 Normal</button>
        <button class="weui-btn" type="default" disabled="true">页面次要操作 Disabled</button>

        <button class="weui-btn" type="warn">警告类操作 Normal</button>
        <button class="weui-btn" type="warn" disabled="true">警告类操作 Disabled</button>

        <view class="button-sp-area">
            <button class="weui-btn" type="primary" plain="true">按钮</button>
            <button class="weui-btn" type="primary" disabled="true" plain="true">按钮</button>

            <button class="weui-btn" type="default" plain="true">按钮</button>
            <button class="weui-btn" type="default" disabled="true" plain="true">按钮</button>

            <button class="weui-btn mini-btn" type="primary" size="mini">按钮</button>
            <button class="weui-btn mini-btn" type="default" size="mini">按钮</button>
            <button class="weui-btn mini-btn" type="warn" size="mini">按钮</button>
        </view>
    </view>
</view>

関連する推奨事項:

ミニ プログラムの基本スタイル ライブラリ - WeUI

WeChat ミニプログラムのコンポーネント化された開発のための Labrador フレームワークの紹介

以上がWeChat ミニ プログラムの例: WeUI フレームワークの導入によるコードの実装の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。