小程序中引用WeUI组件方法

一、引入组件

1. 通过npm方式，（此方法比较复杂些）。可以通过npm方式下载构建，npm包名为weui-miniprogram

2. 通过页面按需下载

本文选择第二种方式

二、将下载的压缩包解压，导入到小程序中（解压的目录为weui-miniprogram）

image.png

三、在page里面新建一个页面，列如test文件夹，在index.wxss里面引入weui.wxss

@import '/weui-miniprogram/weui-wxss/dist/style/weui.wxss'

四、index.json 文件中引入组件

{
  "usingComponents": {
    "mp-cells": "/weui-miniprogram/cells/cells",
    "mp-cell": "/weui-miniprogram/cell/cell",
    "mp-slideview": "/weui-miniprogram/slideview/slideview"
  }
}

五、index.wxml文件中复制以下代码

    
        Slideview
        左滑操作
    
    
      
          
              
          
      
    

六、index.js文件中编写相应的操作即可

Page({
  onLoad: function(){
      this.setData({
          //icon: base64.icon20,
          slideButtons: [{
            text: '普通',
            src: '/page/weui/cell/icon_love.svg', // icon的路径
          },{
            text: '普通',
            extClass: 'test',
            src: '/page/weui/cell/icon_star.svg', // icon的路径
          },{
            type: 'warn',
            text: '警示',
            extClass: 'test',
              src: '/page/weui/cell/icon_del.svg', // icon的路径
          }],
      });
  },
  slideButtonTap(e) {
      console.log('slide button tap', e)
  }
});

效果：

image.png

image.png