原生小程序 引入vant-weapp 组件库 和 WeUI组件库

原生小程序 引入vant-weapp 组件库

• vant-weapp官网
• 创建项目后 npm init -y 一直回车
• 下载：npm i @vant/weapp@1.3.3 -S --production
  • 生成 node_modules - @vant

project.config.json 文件配置

• "setting"对象下的

    "packNpmManually": true,
    "packNpmRelationList": [
      {
        "packageJsonPath": "./package.json",
        "miniprogramNpmDistDir": "./"
      }
    ]

app.json 配置

  "usingComponents": {
    "van-button": "@vant/weapp/button/index"
  }

生成 miniprogram_npm 文件

使用vant 组件库

 <van-button type="primary">主要按钮</van-button>

原生小程序 引入 WeUI组件库

• 下载：npm i weui-miniprogram --production
  • –production 目的在于可以减少安装一些业务无关的 npm 包，从而减少整个小程序包的大小

配置相关

• 01：构建npm
  

• 02：引入样式 app.wxss

  • /* 引入 WeUI样式 */ @import '/miniprogram_npm/weui-miniprogram/weui-wxss/dist/style/weui.wxss';

• 若是报错的话，可以尝试这样下载：npm i weui-miniprogram --save 之后再构建npm

使用

• 小程序UI

• 再index.wxml首页使用

• inedx.json

{
  "usingComponents": {
    "mp-dialog": "weui-miniprogram/dialog/dialog"
  }
}

• index.wxml

<!--index.wxml-->
<view class="container">
  <mp-dialog title="test" show="{{true}}" bindbuttontap="tapDialogButton" buttons="{{buttons}}">
    <view>test content</view>
</mp-dialog>
</view>

• index.js

// index.js
Page({
  data: {
    buttons: [
      { text: '取消' },
      { text: '确认' }
    ]
  },
})