小程序中引用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文件中复制以下代码

<view class="page">
    <view class="page__hd">
        <view class="page__title">Slideview</view>
        <view class="page__desc">左滑操作</view>
    </view>
    <view class="page__bd">
      <view class="weui-cells">
          <mp-slideview buttons="{{slideButtons}}" bindbuttontap="slideButtonTap">
              <mp-cell value="左滑可以删除" footer="说明文字"></mp-cell>
          </mp-slideview>
      </view>
    </view>
</view>

六、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