微信小程序怎么安装使用WeUI组件

WeUi 框架

这是一套基于样式库weui-wxss开发的小程序扩展组件库，同微信原生视觉体验一致的UI组件库，由微信官方设计团队和小程序团队为微信小程序量身设计，令用户的使用感知更加统一。

WeUi 新版本使用

微信基础库在2.2.1 以上（包含）可以直接在app.json 里面配置就可以

app.json
{
  "useExtendedLib": {
    "weui": true
  }
}

组件的用法

index.json
{
  "usingComponents": {
    "mp-badge": "weui-miniprogram/badge/badge"
  }
}

下面的是老版本的安装方式 不推荐使用

安装

1. 要先设置微信编辑器
2. npm i weui-miniprogram
3. 微信小程序构建 npm
4. app.wxss 全局引入weui-miniprogram 样式
5. 对应的页面按需加载 weui-miniprogram 组件
   

npm install weui-miniprogram

安装完毕要构建npm

app.wxss 全局引入

要自己注意自己的目录结构，可能每个人的下载目录不一样！

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

index.wxml 使用例子

index.json 注册mp-searchbar 组件

{
  "usingComponents": {
    "mp-searchbar": "/weui-miniprogram/searchbar/searchbar"
  }
}

index.wxml 使用 mp-searchbar 组件

index.js

Page({
  data: {
    inputShowed: false,
    inputVal: ""
  },
  onLoad() {
    this.setData({
      search: this.search.bind(this)
    })
  },
  search: function (value) {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve([{ text: '搜索结果', value: 1 }, { text: '搜索结果2', value: 2 }])
      }, 200)
    })
  },
  selectResult: function (e) {
    console.log('select result', e.detail)
  },
});