小程序 IView WeappUI组件库(简单增删改查)

IView Weapp 微信小程序UI组件库:https://weapp.iviewui.com/components/card

小程序 IView WeappUI组件库(简单增删改查)_第1张图片
IView Weapp.png

快速上手搭建

小程序 IView WeappUI组件库(简单增删改查)_第2张图片
快速上手.png

iView Weapp 的代码

将源代码下载下来,然后将dict放到自己的项目中去。


小程序 IView WeappUI组件库(简单增删改查)_第3张图片
iView Weapp 的代码.png

小程序中添加iView Weapp

将dict文件家放入到小程序的项目中去。
demo如下所示


小程序 IView WeappUI组件库(简单增删改查)_第4张图片
demo.png

新建一个目录list,然后在新建一个page.
在list.json中添加:

{
  "usingComponents": {
    "i-card": "../../dist/card/index"
  }
  
}

list.wxml




    
    
    内容不错
  
    
    
    
    尾部内容
    
    

效果截图如下所示:


小程序 IView WeappUI组件库(简单增删改查)_第5张图片
image.png

简单书籍增删改查

后端接口

小程序 IView WeappUI组件库(简单增删改查)_第6张图片
image.png

书籍列表

  • booklist.wxml

小程序 IView WeappUI组件库(简单增删改查)_第7张图片
booklist.wxml
  • booklist.js

小程序 IView WeappUI组件库(简单增删改查)_第8张图片
booklist.js

新增书籍

  • bookinsert.wxml

小程序 IView WeappUI组件库(简单增删改查)_第9张图片
bookinsert.wxml
  • bookinsert.js

小程序 IView WeappUI组件库(简单增删改查)_第10张图片
bookinsert.js

删除书籍

小程序 IView WeappUI组件库(简单增删改查)_第11张图片
image.png

修改书籍

  • bookupdate.wxml

小程序 IView WeappUI组件库(简单增删改查)_第12张图片
bookupdate.wxml
  • bookupdate.js

小程序 IView WeappUI组件库(简单增删改查)_第13张图片
bookupdate.js

初次尝试,写的不好请多多指教,有需要源码项目的,请私信我哦

你可能感兴趣的:(小程序 IView WeappUI组件库(简单增删改查))