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

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

不言

リリース： 2018-08-16 16:20:46

オリジナル

8630 人が閲覧しました

この記事の内容は 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>

ログイン後にコピー