微信小程序安装 Vant 组件库与API Promise组件库并通过它们实现简单的增删改查

liulala16

已于 2023-01-13 15:15:40 修改

阅读量1k

点赞数 1

文章标签：微信小程序 npm 小程序 Powered by 金山文档

于 2023-01-10 18:32:22 首次发布

本文链接：https://blog.csdn.net/liulala16/article/details/128634036

版权

本文详细介绍了如何在微信小程序中集成vant组件库，通过npm安装并构建，以及使用api-promise模块简化API调用。同时，展示了如何在app.js和app.json中导入并使用vant组件，如van-button和van-search。此外，文章还涵盖了后端使用SpringBoot和MyBatisPlus（MP）创建RESTfulAPI，实现图书管理功能，包括添加、查询和删除操作。

摘要由CSDN通过智能技术生成

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

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中的组件，在app.json中添加如下代码

  "usingComponents": {
    "van-button": "@vant/weapp/button/index",
    "van-field": "@vant/weapp/field/index",
    "van-cell": "@vant/weapp/cell/index",
    "van-cell-group": "@vant/weapp/cell-group/index",
    "van-toast": "@vant/weapp/toast/index"
    "van-search": "@vant/weapp/search/index"
  }

10（1）、开始测试，在app.json添加两个页面，在app.wxss中添加一个全局背景色

 "pages": [
    "pages/home/home",
    "pages/desc/desc"
  ],

page {
  background-color: rgb(212, 212, 212);
}

（2）在home中的wxml中添加如下vant的组件

<view class="buttons">
  <van-button type="warning" bindtap="getBookList">查询所有</van-button>
  <van-button type="warning" bindtap="addBookUI">添加</van-button>
  <van-button type="warning" bindtap="getByNameUI">根据书名查询</van-button>
  <van-button type="warning" bindtap="deleteByIdUI">根据id删除</van-button>
</view>

<!-- 根据书名查询 -->
<view class="selectUI" wx:if="{{bookVisiable}}">
  <van-search value="{{ bookName }}" label="书名" placeholder="请输入书名" use-action-slot bind:change="onChange"
    bind:search="getByName">
    <view slot="action" bind:tap="getByName">搜索</view>
  </van-search>

  <view class="book" wx:if="{{list.length>0}}">
    <van-cell wx:for="{{list}}" title="{{index+1+'. '+item.name}}" wx:key="id" is-link link-type="navigateTo"
      url="/pages/desc/desc?name={{item.name}}&description={{item.description}}" />
  </view>
</view>

<!-- 根据id删除 -->
<view class="deleteUI" wx:if="{{deleteVisiable}}">
  <van-cell-group>
    <van-field model:value="{{ id }}" placeholder="请输入删除id" border="{{ true }}" />
  </van-cell-group>
  <van-button type="warning" bindtap="deleteById">根据id删除</van-button>
</view>

<!-- 查询全部 -->
<view class="selectAllUI" wx:if="{{listVisiable}}">
  <van-cell wx:for="{{list}}" title="{{item.id+'. '+item.name}}" wx:key="id" is-link link-type="navigateTo"
    url="/pages/desc/desc?name={{item.name}}&description={{item.description}}" />
</view>

<!-- 添加数据 -->
<view class="addItemUI" wx:if="{{addVisiable}}">
  <van-cell-group>
    <van-field model:value="{{ name }}" placeholder="请输入书名" border="{{ true }}" />
    <van-field model:value="{{ description }}" type="textarea" autosize="{{true}}" placeholder="请输入介绍"
      border="{{ true }}" />
  </van-cell-group>
  <van-button type="warning" bindtap="addBook">添加数据</van-button>
</view>

<van-toast id="van-toast" />

（3）在home.js中添加如下代码

// pages/text/text.js
import Toast from '@vant/weapp/toast/toast';
Page({

  /**
   * 页面的初始数据
   */
  data: {
    bookName: '',
    list:[],
    listVisiable:false,
    bookVisiable:false,
    addVisiable:false,
    deleteVisiable:false,
    book:{},
    name:'',
    description:''

  },
  //添加按钮
  addBookUI(){
    this.setData({
      name:'',
      description:'',
      listVisiable: false,
      bookVisiable:false,
      addVisiable:true,
      deleteVisiable:false
    })
  },
   //根据id删除按钮
   deleteByIdUI(){
    this.setData({
      bookName:'',
      book:{},
      listVisiable: false,
      bookVisiable:false,
      addVisiable:false,
      deleteVisiable:true
    })
  },
  //根据书名查询按钮
  getByNameUI(){
    this.setData({
      bookName:'',
      book:{},
      list:[],
      listVisiable: false,
      bookVisiable:true,
      addVisiable:false,
      deleteVisiable:false
    })
  },
  //获取列表
  async getBookList() {
    const {data: res}  = await wx.p.request({
      method: 'GET',
      url: 'http://localhost:8080/book/list'
    })
    this.setData({
      list:res.data,
      listVisiable: true,
      bookVisiable:false,
      addVisiable:false,
      deleteVisiable:false
    })
    console.log(this.data.list)
  },
  //添加数据
  async addBook() {
    const {data: res}  = await wx.p.request({
      method: 'POST',
      url: 'http://localhost:8080/book/add',
      data:{
        name:this.data.name,
        description:this.data.description
      }
    })
    Toast.success('添加成功');
    this.setData({
      name:'',
      description:''
    })

    console.log(res)
  },
    //根据书名查询数据
    async getByName() {
    
      const {data: res}  = await wx.p.request({
        method: 'GET',
        url: `http://localhost:8080/book/findByBookName/${this.data.bookName}`,
      })
      this.setData({
        list:res.data,
        listVisiable: false,
        bookVisiable:true,
        addVisiable:false
      })
      console.log(this.data.book)
    },
    //根据id删除
    async deleteById() {
      const {data: res}  = await wx.p.request({
        method: 'DELETE',
        url: `http://localhost:8080/book/${this.data.id}`,
      })
      console.log(res)
    },
    onChange(e) {
      this.setData({
        bookName: e.detail,
      });
     this.getByName()
    },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.setData({
      bookName:'',
      book:{},
      listVisiable: true,
      bookVisiable:false,
      addVisiable:false,
      deleteVisiable:true
    })
    this.getBookList()

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})

（4）在home的wxss中添加样式

/* pages/text/text.wxss */
.buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  flex-direction: row;
  
}
button {
  width: 280rpx;
  margin-top: 15rpx;
}
.myinput{
  margin-top: 30rpx;
}

.selectAllUI , .deleteUI , .addItemUI , .selectUI{
  margin: 30rpx;
}

（5）在desc的wxml中添加代码，显示书名与介绍

<view class="bookDesc">
  <view class="title">
    <text>{{book.name}}</text>
  </view>
  <view class="content">
    <text user-select>{{book.description}}</text>
  </view>
</view>

(6)在desc.js添加如下代码接受home页面传过来的数据

/**
   * 页面的初始数据
   */
  data: {
    book:{
      name:'',
      description:'',
    }
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.setData({
      book:options
    })
  },

(7)在desc.wxss中设置样式

.bookDesc {
  margin: 20rpx;
  padding: 20rpx;
  background-color: white;
  border-radius: 10rpx;
}
.title{
  text-align: center;
  font-weight: bold;
}
.content {
  margin-top: 30rpx;
}

11、创建一张图书表

12、用springBoot与MP搭建一个简单的后台系统，连接数据库，实体类与controller代码如下，定义了四个接口，分别是获取所有数据列表，根据name获取数据列表，添加数据，根据id删除数据

import com.baomidou.mybatisplus.annotation.IdType;
import com.baomidou.mybatisplus.annotation.TableId;
import com.baomidou.mybatisplus.annotation.TableName;
import lombok.Data;

/**
 * @author superman
 */
@Data
@TableName("table_book")
public class Book {
    @TableId(type = IdType.AUTO)
    private Long id;
    private String name;
    private String description;
}

@RestController
@RequestMapping("/book")
@Slf4j
public class BookController {
 
    @Autowired
    private BookService bookService;

    @GetMapping("/list")
    public Result getAll()
    {
        List<Book> bookList = bookService.list();
        BookDto bookDto = new BookDto();
        bookDto.setBookList(bookList);
        return Result.ok(bookList);
    }
    @GetMapping("/findByBookName/{bookName}")
    public Result findByBookName(@PathVariable String bookName){
        List<Book> bookList = bookService.findByBookName(bookName);
        return Result.ok(bookList);
    }

    @PostMapping("/add")
    public Result Login(@RequestBody Book book)
    {
        log.info("添加数据：{}",book.toString());
        bookService.save(book);
        return Result.ok();
    }

    @DeleteMapping("/{id}")
    public Result delete(@PathVariable int id)
    {
        log.info("获取要删除的book_id，id={}",id);
        bookService.removeById(id);
        return Result.ok("删除成功");
    }
}

13、a、编译小程序，最终效果如下：进入小程序或者点击查询所有