ネイティブアプレットはプラグインと用途を紹介します

開発者ツールを使用して、プロジェクトディレクトリを自動的に生成します。
プロジェクトディレクトリは次のとおりです。
ここに画像の説明を挿入
インポート:

  • wxRequest(regenerator)(wx.requestリクエストをカプセル化します)
  • wxValidate(送信されたフォームコンテンツの正確性を検証するために使用されます)
  • 勝った
  • iview
  • wxParse(アプレットに表示するためにH5をwxmlに変換するために使用されるプラグイン)

現時点では、ディレクトリ構造は次のとおりです
ここに画像の説明を挿入
。puclicCssは、簡単に記述できる統一されたスタイルであり、グローバルにすることも、複数のページで共有することもできます。

より少ないファイルは、より少ないページにのみインポートできます。

注:アプレット自体はless書き込みをサポートしていません。ここでは、vscodeのeasyLessプラグインを使用して、lessファイルをwxssファイルに自動的に変換します。

ここに画像の説明を挿入

構成する必要がある場合は、Baiduメソッドを使用できます。

reset.less

// 在此自定义全局使用的字体及颜色等
@font-size-xs: 25rpx;
@font-size-sm: 28rpx;
@font-size-md: 30rpx;
@font-size-lg: 35rpx;
@font-size-xl: 38rpx;
@font-size-xxl: 40rpx;
@font-size-xxxl: 45rpx;
@font-weight-bold: 500;

@black: #000;
@white: #fff;
@gray-1: #f7f8fa;
@gray-2: #f2f3f5;
@gray-3: #ebedf0;
@gray-4: #dcdee0;
@gray-5: #c8c9cc;
@gray-6: #969799;
@gray-7: #646566;
@gray-8: #323233;
@red: #ee0a24;
@blue: #1989fa;
@orange: #ff976a;
@orange-dark: #ed6a0c;
@orange-light: #fffbe8;
@green: #07c160;

index.less

@import "../../publicCss/reset.less";

view {
    
    
  font-size: @font-size-xxxl;
}

自動生成されたindex.wxss

view {
    
    
  font-size: 45rpx;
}

組み込みのvantスタイルも導入できます。

ここに画像の説明を挿入

注:lessファイルをwxssファイルに直接インポートすることはできず、認識されません。

とりあえずここにまとめて

おすすめ

転載: blog.csdn.net/lb1135909273/article/details/105098446