一 概念

• 這是一套基于樣式庫weui-wxss開發(fā)的小程序擴(kuò)展組件庫，同微信原生視覺體驗(yàn)一致的UI組件庫
• 由微信官方設(shè)計(jì)團(tuán)隊(duì)和小程序團(tuán)隊(duì)為微信小程序量身設(shè)計(jì)，令用戶的使用感知更加統(tǒng)一
• 支持?jǐn)U展庫導(dǎo)入，不占用小程序體積

二 WeUI介紹

2.1 WeUI下載

Github-Tencent/weui-wxss

2.2 項(xiàng)目導(dǎo)入小程序

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

2.3 WeUI組件介紹

編號(hào)大分類組件

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

三 如何使用

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

3.1.1 配置

• app.json下添加useExtendedLib擴(kuò)展

  "useExtendedLib": {"weui": true}

• 將Github-Tencent/weui-wxss解壓后的style文件夾整體復(fù)制到項(xiàng)目目錄下

• 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>

• 根據(jù)需要添加頁面的邏輯文件數(shù)據(jù)

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

3.1.3 效果圖

3.2 方式二(useExtendedLib+npm)

3.2.1 配置

• app.json下添加useExtendedLib擴(kuò)展

  "useExtendedLib": {"weui": true}

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

  npm init

• 通過npm方式安裝weui

  npm install weui-miniprogram

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

3.2.2 使用(同3.1.2)

3.2.3 效果圖

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

3.3.1 配置

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

  npm init

• 通過npm方式安裝weui

  npm install weui-miniprogram

• 點(diǎn)擊工具——>構(gòu)建npm，并點(diǎn)擊確定，生成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 效果圖

四 參考

• 官方技術(shù)文檔——快速上手
• 官方文檔——WeUI組件庫簡(jiǎn)介
• 官方文檔——快速上手

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。