国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

微信小程序使用WeUI入門教程

fredshare / 2240人閱讀

摘要：這是一套基于樣式庫開發(fā)的小程序擴(kuò)展組件庫，同微信原生視覺體驗(yàn)一致的組件庫，由微信官方設(shè)計(jì)團(tuán)隊(duì)和小程序團(tuán)隊(duì)為微信小程序量身設(shè)計(jì)，令用戶的使用感知更加統(tǒng)一。

微信小程序使用WeUI入門教程

在學(xué)習(xí)微信小程序過程中，很多組件的樣式需要自己調(diào)整，且很多不是我們想要的樣子。所以找到了WeUI這樣的擴(kuò)展組件庫，預(yù)覽了組件庫，真的非常nice！

但是找不到怎么去引用。網(wǎng)上資料又很少，最后還是要依賴官方文檔去學(xué)習(xí)，下面把如何入使用總結(jié)一下。

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

1. 學(xué)習(xí)參考

WeUI樣式庫展示：https://weui.io/

微信官方WeUI相關(guān)文檔：https://wechat-miniprogram.github.io/weui/docs/

WeUI-wxss 項(xiàng)目地址：https://github.com/Tencent/weui-wxss

直奔主題，如何使用！

直接預(yù)覽WeUI-wxss示例代碼，直接引用上手~

打開[WeUI-wxss](https://github.com/Tencent/weui-wxss)項(xiàng)目地址，可以看到有一個(gè)dist目錄，這個(gè)目錄就是WeUI示例代碼，下載下來，用小程序打開該dist目錄，一定是該目錄哦！

然后，想用什么直接copy吧！

2.NodeJs初始化

這里如果沒有安裝NodeJs的自行安裝。

確保有NodeJs，在你小程序項(xiàng)目根目錄，執(zhí)行以下命令，然后一路回車鍵即可安裝完成。

npm init

執(zhí)行完以后，會(huì)在項(xiàng)目根目錄看到package.json文件

3.安裝WeUI組件庫

在項(xiàng)目根目錄執(zhí)行以下命令：

npm install --save weui-miniprogram --production

會(huì)在根目錄出現(xiàn)node_modules目錄

4.配置

4.1 構(gòu)建npm

打開微信小程序開發(fā)工具，點(diǎn)擊頂部菜單【工具】–【構(gòu)建npm】，構(gòu)建完成后會(huì)在項(xiàng)目根目錄生成miniprogram_npm文件夾，如下圖：

4.2 支持npm

點(diǎn)擊小程序開發(fā)工具右上角【詳情】–【本地設(shè)置】，勾選上【使用npm模塊】，這里有個(gè)坑需要注意一下，記得把基準(zhǔn)庫選擇最新的。

5.項(xiàng)目使用WeUI

在小程序根目錄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"  }

在對(duì)應(yīng)的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">表單結(jié)構(gòu)h2>			<view class="weui-form__desc">展示表單頁面的信息結(jié)構(gòu)樣式, 分別由頭部區(qū)域/控件區(qū)域/提示區(qū)域/操作區(qū)域和底部信息區(qū)域組成。view>		view>		<view class="weui-form__control-area">			<view class="weui-cells__group weui-cells__group_form">				<view class="weui-cells__title">表單組標(biāo)題view>				<view class="weui-cells weui-cells_form">					<view class="weui-cell weui-cell_active">						<view class="weui-cell__hd"><label class="weui-label">微信號(hào)label>view>						<view class="weui-cell__bd">							<input class="weui-input" placeholder="填寫本人微信號(hào)" 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="填寫本人微信號(hào)的昵稱" placeholder-class="weui-input__placeholder" />						view>					view>					<view class="weui-cell weui-cell_active">						<view class="weui-cell__hd">                            <label class="weui-label">聯(lián)系電話label>                        view>						<view class="weui-cell__bd">							<input class="weui-input" placeholder="填寫綁定的電話號(hào)碼" 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>

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/121227.html

相關(guān)文章

  • 微信小程序 bug 集中營

    摘要：利用這篇教程存儲(chǔ)一些常用的微信小程序開發(fā)技巧，方便查找。但是第一，微信小程序是國內(nèi)的，有中文文檔，雖然它的文檔說明有點(diǎn)坑，但好歹有文檔，閱讀理解對(duì)小伙伴們來說不是問題。 Create by jsliang on 2018-9-17 17:58:56 Recently revised in 2018-11-19 08:19:13 ?Hello 小伙伴們，如果覺得本文還不錯(cuò)，記得給個(gè)...

    he_xd 評(píng)論0 收藏0

  • 微信小程序 bug 集中營

    摘要：利用這篇教程存儲(chǔ)一些常用的微信小程序開發(fā)技巧，方便查找。但是第一，微信小程序是國內(nèi)的，有中文文檔，雖然它的文檔說明有點(diǎn)坑，但好歹有文檔，閱讀理解對(duì)小伙伴們來說不是問題。 Create by jsliang on 2018-9-17 17:58:56 Recently revised in 2018-11-19 08:19:13 ?Hello 小伙伴們，如果覺得本文還不錯(cuò)，記得給個(gè)...

    PascalXie 評(píng)論0 收藏0

  • 微信小程序 bug 集中營

    摘要：利用這篇教程存儲(chǔ)一些常用的微信小程序開發(fā)技巧，方便查找。但是第一，微信小程序是國內(nèi)的，有中文文檔，雖然它的文檔說明有點(diǎn)坑，但好歹有文檔，閱讀理解對(duì)小伙伴們來說不是問題。 Create by jsliang on 2018-9-17 17:58:56 Recently revised in 2018-11-19 08:19:13 ?Hello 小伙伴們，如果覺得本文還不錯(cuò)，記得給個(gè)...

    lordharrd 評(píng)論0 收藏0

  • 微信小程序搭建（mpvue+mpvue-weui+fly.js），多圖

    摘要：微信小程序框架框架請(qǐng)求項(xiàng)目初始化注如果沒有安裝環(huán)境的請(qǐng)先去網(wǎng)上下載下來安裝，安裝后默認(rèn)安裝了接下到你要建項(xiàng)目的目錄下打開窗口快捷方法打開到目錄后按住鍵盤，然后點(diǎn)擊鼠標(biāo)右鍵選擇在此處打開窗口即可默認(rèn)從外網(wǎng)下載包，可能會(huì)比較慢，可以換成國內(nèi)的 微信小程序框架：mpvueui框架：mpvue-weuirequest請(qǐng)求：fly.js 1.項(xiàng)目初始化 注：如果沒有安裝node環(huán)境的請(qǐng)先去網(wǎng)上下...

    msup 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

fredshare

男|高級(jí)講師

TA的文章

閱讀更多
最新活動(dòng)
閱讀需要支付1元查看
<