原生小程序引入插件及使用

利用開發者工具自動生成一個項目目錄
項目目錄如下：

引入：

• wxRequest（regenerator）（封裝wx.request請求）
• wxValidate（用於校驗提交表單內容準確性）
• vant
• iview
• wxParse（用於將H5轉化成wxml在小程序上顯示的插件）

此時，目錄結構如下：

其中puclicCss是爲了方便寫入的統一樣式，也可以是全局的也可以是幾個頁面公用的。

less文件只能在less頁面中引入。

注：小程序本身是不支持less寫法的，這裏使用了vscode中的easyLess插件，將我的less文件自動轉成wxss文件。

需要配置一下的，大家可以自行百度方法。

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的內置樣式：

注：wxss文件中不能直接引入less文件，不識別的。

暫時總結到此