アプレットweuiを使用してマイクロチャンネル

 

 

 

みなさん、こんにちは、私は新人のフロントエンドです、あなたは他がそれらを繰り返すことはしません、今日あなたと一緒にマイクロ手紙アプレットでweuiの導入と利用を共有するために、昆虫の目覚め私を呼び出すことができ、紙にも何か問題があり、私を修正してあなたに感謝してください。

ストレート件名に:

1.ダウンロードweui

 GitHubの入力  https://github.com/weui/weui-wxss/を  以下のページを入力し、プログラムコードをダウンロードするには、赤マーキーをクリックしてください

 

 

 

  フォルダに解凍し、weui.wxssたちはweui BANKアイコンのパスを必要とするものです

 

 

 

 

 2.はじめweui

  マイクロチャネルプロジェクト(これはで説明されていない)、次のディレクトリを作成するために、開発者ツールを開きます。

 

 

 

 

   良いプロジェクトを作成し、次のステップは、単にプロジェクトのルートディレクトリにすることができますダウンロードし、weui.wxssのフォルダweuiを解凍し、コピー&ペーストすることです

 

 

  このステップの導入は、導入が完了しました、グローバルapp.wxssに@import「weui.wxss」を追加する必要があり、プロジェクトで使用されるように、終わっていません

 

 

 3. weui

 

  weui除くGitHubのweuiフォルダからダウンロードした。我々は、使用したいwxssファイルを、非常に重要なフォルダサンプルファイルがあります

 

 

 

 

  Vscodeが直接ファイルに投げ込まれ、私たちは、各コンポーネントのコードを見ることができます。マイクロ手紙アプレットはweuiウェブサイト  https://weui.io/  スタイルのショーは、もちろん、私たちはここにweuiアプレット電話でweuiスタイルに直接参照して、ニーズに応じて使用されるコンポーネントを選択することができますが、weui小さなプログラムでweuiは、特定の使用を導入しなかったが、例のフォルダがあります。

 

 

 

  我々はバッジの典型的なモジュールを選択するコードを、使用して図Weuiに表示され、対応するコードは実際にあるbadge.wxml各バッジバッジのスタイルマーカーをweui、我々は直接の小さなにペーストbadge.wxmlコードをコピー新しいページtest.wxmlルックでプログラムプロジェクト。

 

 

 

   それを保存し、我々はシミュレータで次の結果を見ることができます

 

   

  到这里我们就已经完成了weui的引入和使用了,接下来只需要进行应用筛选就好,细心的朋友可能还注意到了weui根组件要用class="page",以及骨架和各子组件的class,不过直接复制粘贴也肯定不会出问题的。

  

 

おすすめ

転載: www.cnblogs.com/jing-zhe/p/11000971.html