微信小程序之引用WeUI组件库(一)

引用WeUI 构建npm 提示没有找到可以构建的npm包

2021.03.11 更新

之前写小程序好多 自己写样式很麻烦，忽然发现了 这个组件库，emmm 真香。
下面是我的一些 遇坑之旅 希望对你们有帮助
注：默认你们都会构建小程序

根据官网有两种引用方法 推荐第一种
官网地址传送门： https://developers.weixin.qq.com/miniprogram/dev/extended/weui/quickstart.html

开始引用
创建好 小程序
目录是这样得（我的是构建好的 主要看文件夹 ）

先讲第一种方法

左边成功图，右面代码文件 并没有包

第一步
现在 app.json 文件中加入一下代码 不用npm下载

"useExtendedLib": {
    "weui": true
  }

第二步
在pages文件夹中选一个你需要用到的页面 选中它的 json 文件 加入以下代码
注意： 文件路径 全是weui-miniprogram开头的。 你复制文档中的路径有的是 …/components 开头会报错需要自己更改 这是npm引入的路径 你可能也需要改 将在第二种方法种讲到

"component": true,
  "usingComponents": {
    "mp-toptips": "weui-miniprogram/toptips/toptips",
    "mp-cells": "weui-miniprogram/cells/cells",
    "mp-cell": "weui-miniprogram/cell/cell",
    "mp-checkbox": "weui-miniprogram/checkbox/checkbox",
    "mp-checkbox-group": "weui-miniprogram/checkbox-group/checkbox-group",
    "mp-form": "weui-miniprogram/form/form"
  }

第三步
还是在同一页面的 js文件中 加入下面的代码 最好是 把原本的js 全部清空 放入下面的代码

Component({
  data: {
      showTopTips: false,

      radioItems: [
          {name: 'cell standard', value: '0', checked: true},
          {name: 'cell standard', value: '1'}
      ],
      checkboxItems: [
          {name: 'standard is dealt for u.', value: '0', checked: true},
          {name: 'standard is dealicient for u.', value: '1'}
      ],
      items: [
          {name: 'USA', value: '美国'},
          {name: 'CHN', value: '中国', checked: 'true'},
          {name: 'BRA', value: '巴西'},
          {name: 'JPN', value: '日本'},
          {name: 'ENG', value: '英国'},
          {name: 'TUR', value: '法国'},
      ],

      date: "2016-09-01",
      time: "12:01",

      countryCodes: ["+86", "+80", "+84", "+87"],
      countryCodeIndex: 0,

      countries: ["中国", "美国", "英国"],
      countryIndex: 0,

      accounts: ["微信号", "QQ", "Email"],
      accountIndex: 0,

      isAgree: false,
      formData: {

      },
      rules: [{
          name: 'radio',
          rules: {required: true, message: '单选列表是必选项'},
      }, {
          name: 'checkbox',
          rules: {required: true, message: '多选列表是必选项'},
      }, {
          name: 'qq',
          rules: {required: true, message: 'qq必填'},
      }, {
          name: 'mobile',
          rules: [{required: true, message: 'mobile必填'}, {mobile: true, message: 'mobile格式不对'}],
      }, {
          name: 'vcode',
          rules: {required: true, message: '验证码必填'},
      }, {
          name: 'idcard',
          rules: {required: true, message: 'idcard必填'},
      }]
  },
  methods: {
      radioChange: function (e) {
          console.log('radio发生change事件，携带value值为：', e.detail.value);
  
          var radioItems = this.data.radioItems;
          for (var i = 0, len = radioItems.length; i < len; ++i) {
              radioItems[i].checked = radioItems[i].value == e.detail.value;
          }
  
          this.setData({
              radioItems: radioItems,
              [`formData.radio`]: e.detail.value
          });
      },
      checkboxChange: function (e) {
          console.log('checkbox发生change事件，携带value值为：', e.detail.value);
  
          var checkboxItems = this.data.checkboxItems, values = e.detail.value;
          for (var i = 0, lenI = checkboxItems.length; i < lenI; ++i) {
              checkboxItems[i].checked = false;
  
              for (var j = 0, lenJ = values.length; j < lenJ; ++j) {
                  if(checkboxItems[i].value == values[j]){
                      checkboxItems[i].checked = true;
                      break;
                  }
              }
          }
  
          this.setData({
              checkboxItems: checkboxItems,
              [`formData.checkbox`]: e.detail.value
          });
      },
      bindDateChange: function (e) {
          this.setData({
              date: e.detail.value,
              [`formData.date`]: e.detail.value
          })
      },
      formInputChange(e) {
          const {field} = e.currentTarget.dataset
          this.setData({
              [`formData.${field}`]: e.detail.value
          })
      },
      bindTimeChange: function (e) {
          this.setData({
              time: e.detail.value
          })
      },
      bindCountryCodeChange: function(e){
          console.log('picker country code 发生选择改变，携带值为', e.detail.value);
  
          this.setData({
              countryCodeIndex: e.detail.value
          })
      },
      bindCountryChange: function(e) {
          console.log('picker country 发生选择改变，携带值为', e.detail.value);
  
          this.setData({
              countryIndex: e.detail.value
          })
      },
      bindAccountChange: function(e) {
          console.log('picker account 发生选择改变，携带值为', e.detail.value);
  
          this.setData({
              accountIndex: e.detail.value
          })
      },
      bindAgreeChange: function (e) {
          this.setData({
              isAgree: !!e.detail.value.length
          });
      },
      submitForm() {
          this.selectComponent('#form').validate((valid, errors) => {
              console.log('valid', valid, errors)
              if (!valid) {
                  const firstError = Object.keys(errors)
                  if (firstError.length) {
                      this.setData({
                          error: errors[firstError[0]].message
                      })
  
                  }
              } else {
                  wx.showToast({
                      title: '校验通过'
                  })
              }
          })
      }

  }
});

保存 预览 应该就可以了 相比npm 方法少了包文件 非常推荐

第二种方法

npm 方法
先选择 终端 如图 你的打开 如果出现新建 你就新建就行

输入

npm install weui-miniprogram

执行完 npm 后 目录是这样得

然后再 工具 —> 构建npm

可能会会出现下面这种情况 或 其它提示 没找到 巴拉巴拉 一大堆的东西

在终端中输入：npm init
输入命令之后一直点回车

再重新构建一下应该就可以了

页面是这样得

最后在app.wxss里面顶部引入weui.wxss

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

在你需要用的页面 中 找到 json文件 引入组件如图 这两种文件路径引用 都是可行的

"usingComponents": {
    "mp-dialog": "weui-miniprogram/dialog/dialog",
    "mp-cells": "/miniprogram_npm/weui-miniprogram/cells/cells",
    "mp-cell": "weui-miniprogram/cell/cell",
    "mp-badge": "/miniprogram_npm/weui-miniprogram/badge/badge"
  }

在本页面的 wxml 文件中 写一下 代码

<mp-dialog title="test" show="{{true}}" bindbuttontap="tapDialogButton" buttons="{{[{text: '取消'}, {text: '确认'}]}}">
    <view>test content</view>
</mp-dialog>
<view class="page">
    <view class="page__hd">
        <view class="page__title">Badge</view>
        <view class="page__desc">徽章</view>
    </view>

    <view class="page__bd">
        <mp-cells title="新消息提示跟摘要信息后，统一在列表右侧">
            <mp-cell title="单行列表" link>
                <view slot="footer">
                    <view style="display: inline-block;vertical-align:middle; font-size: 17px;">详细信息</view>
                    <mp-badge style="margin-left: 5px;margin-right: 5px;" ext-class="blue"/>
                </view>
            </mp-cell>
        </mp-cells>

        <mp-cells title="未读数红点跟在主题信息后，统一在列表左侧">
            <mp-cell>
                <view slot="title" style="position: relative;margin-right: 10px;">
                    <image src="../images/pic_160.png" style="width: 50px; height: 50px; display: block"/>
                    <mp-badge content="99+" style="position: absolute;top: -.4em;right: -.4em;"/>
                </view>
                <view>联系人名称</view>
                <view style="font-size: 13px;color: #888888;">摘要信息</view>
            </mp-cell>
            <mp-cell link>
                <view style="display: inline-block; vertical-align: middle">单行列表</view>
                <mp-badge content="8" style="margin-left: 5px;"/>
            </mp-cell>
            <mp-cell link>
                <view style="display: inline-block; vertical-align: middle">单行列表</view>
                <mp-badge style="margin-left: 5px;" content="New"/>
            </mp-cell>
        </mp-cells>
    </view>
</view>

保存运行 应该能出现 和上图右面一样的 页面
恭喜你 构建完成
谢谢