資訊專欄INFORMATION COLUMN
摘要：這是一套基于樣式庫開發的小程序擴展組件庫，同微信原生視覺體驗一致的組件庫，由微信官方設計團隊和小程序團隊為微信小程序量身設計，令用戶的使用感知更加統一。
在學習微信小程序過程中，很多組件的樣式需要自己調整，且很多不是我們想要的樣子。所以找到了WeUI這樣的擴展組件庫，預覽了組件庫，真的非常nice！
但是找不到怎么去引用。網上資料又很少，最后還是要依賴官方文檔去學習，下面把如何入使用總結一下。
這是一套基于樣式庫weui-wxss開發的小程序擴展組件庫，同微信原生視覺體驗一致的UI組件庫，由微信官方設計團隊和小程序團隊為微信小程序量身設計，令用戶的使用感知更加統一。
WeUI樣式庫展示：https://weui.io/
微信官方WeUI相關文檔：https://wechat-miniprogram.github.io/weui/docs/
WeUI-wxss 項目地址：https://github.com/Tencent/weui-wxss
直奔主題，如何使用！
直接預覽WeUI-wxss示例代碼，直接引用上手~
打開[WeUI-wxss](https://github.com/Tencent/weui-wxss)項目地址，可以看到有一個dist目錄，這個目錄就是WeUI示例代碼，下載下來，用小程序打開該dist目錄，一定是該目錄哦！
然后，想用什么直接copy吧！
這里如果沒有安裝NodeJs的自行安裝。
確保有NodeJs，在你小程序項目根目錄，執行以下命令，然后一路回車鍵即可安裝完成。
npm init執行完以后，會在項目根目錄看到package.json文件
在項目根目錄執行以下命令：
npm install --save weui-miniprogram --production會在根目錄出現node_modules目錄
打開微信小程序開發工具，點擊頂部菜單【工具】–【構建npm】，構建完成后會在項目根目錄生成miniprogram_npm文件夾，如下圖：
點擊小程序開發工具右上角【詳情】–【本地設置】，勾選上【使用npm模塊】，這里有個坑需要注意一下，記得把基準庫選擇最新的。
在小程序根目錄app.wxss中引入樣式文件（按照自己的路徑引入）
@import "/miniprogram_npm/weui-miniprogram/weui-wxss/dist/style/weui.wxss";在需要頁面的json文件引入需要的組件，例如：
"usingComponents": { "mp-form_page": "/miniprogram_npm/weui-miniprogram/form/form_page" }在對應的wxml頁面就可以使用了，示例：
<page-meta root-font-size="system"/><view class="page" data-weui-theme="{{theme}}"> <view class="weui-form"> <view class="weui-form__text-area"> <h2 class="weui-form__title">表單結構h2> <view class="weui-form__desc">展示表單頁面的信息結構樣式, 分別由頭部區域/控件區域/提示區域/操作區域和底部信息區域組成。view> view> <view class="weui-form__control-area"> <view class="weui-cells__group weui-cells__group_form"> <view class="weui-cells__title">表單組標題view> <view class="weui-cells weui-cells_form"> <view class="weui-cell weui-cell_active"> <view class="weui-cell__hd"><label class="weui-label">微信號label>view> <view class="weui-cell__bd"> <input class="weui-input" placeholder="填寫本人微信號" placeholder-class="weui-input__placeholder" /> view> view> <view class="weui-cell weui-cell_active"> <view class="weui-cell__hd"> <label class="weui-label">昵稱label> view> <view class="weui-cell__bd"> <input class="weui-input" placeholder="填寫本人微信號的昵稱" placeholder-class="weui-input__placeholder" /> view> view> <view class="weui-cell weui-cell_active"> <view class="weui-cell__hd"> <label class="weui-label">聯系電話label> view> <view class="weui-cell__bd"> <input class="weui-input" placeholder="填寫綁定的電話號碼" type="number" placeholder-class="weui-input__placeholder" /> view> view> view> view> view> <view class="weui-form__opr-area"> <a aria-role="button" class="weui-btn weui-btn_primary">確定a> view> view>view>文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/121227.html
摘要：利用這篇教程存儲一些常用的微信小程序開發技巧，方便查找。但是第一，微信小程序是國內的，有中文文檔，雖然它的文檔說明有點坑，但好歹有文檔，閱讀理解對小伙伴們來說不是問題。 Create by jsliang on 2018-9-17 17:58:56 Recently revised in 2018-11-19 08:19:13 ?Hello 小伙伴們，如果覺得本文還不錯，記得給個...
摘要：利用這篇教程存儲一些常用的微信小程序開發技巧，方便查找。但是第一，微信小程序是國內的，有中文文檔，雖然它的文檔說明有點坑，但好歹有文檔，閱讀理解對小伙伴們來說不是問題。 Create by jsliang on 2018-9-17 17:58:56 Recently revised in 2018-11-19 08:19:13 ?Hello 小伙伴們，如果覺得本文還不錯，記得給個...
摘要：利用這篇教程存儲一些常用的微信小程序開發技巧，方便查找。但是第一，微信小程序是國內的，有中文文檔，雖然它的文檔說明有點坑，但好歹有文檔，閱讀理解對小伙伴們來說不是問題。 Create by jsliang on 2018-9-17 17:58:56 Recently revised in 2018-11-19 08:19:13 ?Hello 小伙伴們，如果覺得本文還不錯，記得給個...
摘要：微信小程序框架框架請求項目初始化注如果沒有安裝環境的請先去網上下載下來安裝，安裝后默認安裝了接下到你要建項目的目錄下打開窗口快捷方法打開到目錄后按住鍵盤，然后點擊鼠標右鍵選擇在此處打開窗口即可默認從外網下載包，可能會比較慢，可以換成國內的 微信小程序框架：mpvueui框架：mpvue-weuirequest請求：fly.js 1.項目初始化 注：如果沒有安裝node環境的請先去網上下...
閱讀 1870·2023-04-25 23:28
閱讀 582·2023-04-25 22:49
閱讀 2265·2021-09-27 13:34
閱讀 5234·2021-09-22 15:09
閱讀 3624·2019-08-30 12:52
閱讀 2754·2019-08-29 15:26
閱讀 666·2019-08-29 11:12
閱讀 2201·2019-08-26 12:24
