微信小程序安装 Vant 组件库与API Promise组件库

news2024/11/29 1:48:15

在项目内右键空白处选择在外部终端打开

2、在终端窗口输入 npm init -y,创建package-lock.json

npm init -y

3、在终端输入npm i @vant/weapp@1.3.3 -S --production，创建node_modules文件夹

npm i @vant/weapp@1.3.3 -S --production

4、详情－本地设置，使用npm模块

5、app.json中删除style：v2这行

6、添加api-promise模块

npm i --save miniprogram-api-promise@1.0.4

7、工具-构建npm，构建后可以看到node_modules中的包打包到miniprogram_npm包中

8、在app.js中导入api-promise包

import { promisifyAll } from 'miniprogram-api-promise'
const wxp = wx.p = {}
promisifyAll(wx,wxp)

9、调用van中的button组件，在app.json中添加如下代码

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

10、开始测试，新建一个页面，在wxml中添加button，在js中添加button的点击方法

<van-button type="danger" bindtap="getBookList">查询所有</van-button>
<view>~~~~~~~~~~~~~~~~~</view>
<van-button type="warning" bindtap="addBook">添加</van-button>

  //获取图书列表
  async getBookList() {
    const {data: res}  = await wx.p.request({
      method: 'GET',
      url: 'http://localhost:8080/book'
    })
    console.log(res)
  },
  //添加图书
  async addBook() {
    const {data: res}  = await wx.p.request({
      method: 'GET',
      url: 'http://localhost:8080/book/add',
      data:{
        name:'红楼梦',
        description:'《红楼梦》，原名《石头记》，中国古代章回体长篇小说，中国古典四大名著之一'
      }
    })
    console.log(res)
  },