開発者ツールを使用して、プロジェクトディレクトリを自動的に生成します。
プロジェクトディレクトリは次のとおりです。
インポート:
- 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ファイルに直接インポートすることはできず、認識されません。
とりあえずここにまとめて