一 概念

• 這是一套基于樣式庫weui-wxss開發的小程序擴展組件庫，同微信原生視覺體驗一致的UI組件庫
• 由微信官方設計團隊和小程序團隊為微信小程序量身設計，令用戶的使用感知更加統一
• 支持擴展庫導入，不占用小程序體積

二 WeUI介紹

2.1 WeUI下載

Github-Tencent/weui-wxss

2.2 項目導入小程序

解壓后，用微信開發者工具打開dist目錄

2.3 WeUI組件介紹

編號大分類組件

1	表單	button、input、form、list、Slideview、slider、uploader
2	基礎組件	article、badge、flex、footer、gallery、grid、icons、loading、loadmore、panel、preview、progress
3	操作反饋	actionsheet、dialog、half-screen-dialog、msg、picker、toast、top-tips
4	導航相關	navigation-bar、tabbar
5	搜索相關	searchbar

三 如何使用

3.1 方式一(useExtendedLib+style文件夾)

3.1.1 配置

• app.json下添加useExtendedLib擴展

  "useExtendedLib": {"weui": true}

• 將Github-Tencent/weui-wxss解壓后的style文件夾整體復制到項目目錄下

• app.wxss 里面引入 weui.wxss

  @import "./style/weui.wxss";

3.1.2 使用(pages/index頁面)

• 頁面的 json 文件加入 usingComponents 配置字段(index.json)

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

• 頁面的布局頁面wxml中直接使用該組件

  <mp-dialog title="test" show="{{true}}" bindbuttontap="tapDialogButton" buttons="{{buttons}}"><view>test content</view> </mp-dialog>

• 根據需要添加頁面的邏輯文件數據

  Page({data: {buttons: [{ text: '取消' },{ text: '確認' }]} })

3.1.3 效果圖

3.2 方式二(useExtendedLib+npm)

3.2.1 配置

• app.json下添加useExtendedLib擴展

  "useExtendedLib": {"weui": true}

• 打開調試器——>終端，輸入如下指令初始化

  npm init

• 通過npm方式安裝weui

  npm install weui-miniprogram

• 注：此時app.wxss 里面不需要引入 weui.wxss

3.2.2 使用(同3.1.2)

3.2.3 效果圖

3.3 方式三(npm+工具欄->構建npm)

3.3.1 配置

• 打開調試器——>終端，輸入如下指令初始化

  npm init

• 通過npm方式安裝weui

  npm install weui-miniprogram

• 點擊工具——>構建npm，并點擊確定，生成miniprogram_npm文件夾

• app.wxss 里面引入 weui.wxss

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

3.3.2 使用(同3.1.2)

3.3.3 效果圖

四 參考

• 官方技術文檔——快速上手
• 官方文檔——WeUI組件庫簡介
• 官方文檔——快速上手

總結

以上是生活随笔為你收集整理的微信小程序开发之——WeUI快速上手的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。