一诀紊、頁面布局
position: relative; 相對布局。使用top隅俘、left邻奠、bottom、right为居。
position: absolute; 絕對布局碌宴。
display: flex;
flex-direction: row; 左右布局。
z-index 層級關(guān)系蒙畴。position: relative 生效贰镣。
假如text需要垂直居中顯示
先給text添加一個(gè)view,在view中樣式設(shè)置
display: flex;
justify-content: center;
再在text中樣式設(shè)置
line-height: 100rpx; /*對應(yīng)需要顯示的高度膳凝,一般和view保持一致*/
text-align: center;
左右布局flex彈性盒模型對象
父視圖view
display: flex;
flex-direction: row;
align-items: center; /*內(nèi)容居中
其中flex-direction屬性:
flex-start(默認(rèn)值):左對齊
flex-end:右對齊
center: 居中
space-between:兩端對齊碑隆,項(xiàng)目之間的間隔都相等。
space-around:每個(gè)項(xiàng)目兩側(cè)的間隔相等鸠项。所以干跛,項(xiàng)目之間的間隔比項(xiàng)目與邊框的間隔大一倍子姜。
視圖固定底部
position:fixed;
bottom:0;
二祟绊、npm導(dǎo)入及使用
1、npm install -y(npm install)哥捕,初始化牧抽,根目錄創(chuàng)建package.json package-lock.json。
2遥赚、導(dǎo)入需要導(dǎo)入的庫扬舒。npm install xxx。編輯器詳情勾選構(gòu)建npm凫佛,工具->構(gòu)建讲坎。
3、.json中引入對應(yīng)需要使用的庫愧薛。
三晨炕、WebUI使用
1、$ npm install weui-miniprogram
2毫炉、app.wxss 導(dǎo)入
@import '/miniprogram_npm/weui-miniprogram/weui-wxss/dist/style/weui.wxss';
3瓮栗、對應(yīng).json導(dǎo)入需要使用的組件,
"usingComponents": {
"mp-gallery": "../../miniprogram_npm/weui-miniprogram/gallery/gallery"
},
4、.wxml/.js使用對應(yīng)組件標(biāo)簽费奸。
注意:可查看對應(yīng)組件中的代碼弥激,可修改WebUI組件中的代碼達(dá)到自定義效果,或者復(fù)制對應(yīng)class愿阐,在使用頁面的.xcss中自定義樣式微服。
如設(shè)置cells中的icon寬高。首先查看cell.wxml中icon class為weui-cell__icon缨历,可在WebUI組件的cell.wxml中直接修改style职辨,但為了不影響后續(xù)其他引用,所以在需要修改樣式的.xcss中設(shè)置.weui-cell__icon{屬性}戈二。
四舒裤、string 獲取 length
五、網(wǎng)絡(luò)請求wx.request
POST請求需要設(shè)置content-type和服務(wù)器對應(yīng)觉吭,否則服務(wù)器取不到對應(yīng)的傳參數(shù)據(jù)
header: {
'content-type': 'application/x-www-form-urlencoded',
},
六腾供、字符串操作
截取:從第1位截取到第3位(不是從第一位開始往后截三位)
string.substring(1,3)
七鲜滩、布局 display屬性
常用方法:
none:隱藏伴鳖,不會顯示
block:設(shè)置元素為塊級元素,理解為每個(gè)元素的類容單獨(dú)占據(jù)一行徙硅。默認(rèn)情況下榜聂,block元素寬度自動填滿其父元素寬度。類似h1嗓蘑、h1须肆。
inline:設(shè)置元素為內(nèi)聯(lián)元素,元素不會單獨(dú)占據(jù)一行桩皿,設(shè)置width,height屬性無效豌汇。其寬度隨元素的內(nèi)容而變化。
inline-block:不會單獨(dú)占據(jù)一行泄隔,同時(shí)有塊級元素和行內(nèi)元素的屬性拒贱,可以設(shè)置width,height。類似標(biāo)簽功能佛嬉,一行內(nèi)顯示逻澳,但需要固定每個(gè)標(biāo)簽寬高。
八暖呕、align-items斜做、align-self、align-content使用及區(qū)別
使用前需要將父視圖設(shè)置為 display: flex;
align-items:設(shè)置每個(gè)flex子視圖的對齊方式缰揪。常用屬性:
flex-start頂部對齊陨享;
flex-end底部對齊葱淳;
center居中對齊;
stretch拉伸適應(yīng)容器抛姑。
九赞厕、setdata給data中子元素設(shè)置值
var keyStr = 'carNoNumData[' + i + '].value';
this.setData({
[keyStr]: "",
})
數(shù)組添加元素:push
數(shù)組添加數(shù)組:concat
十、Vant有贊控件導(dǎo)入及使用
1定硝、安裝:先初始化npm—— cd到小程序工程根目錄皿桑,執(zhí)行 npm init
對應(yīng)的工程描述可一直按回車鍵跳過,最后按照提示輸入yes即可初始化成功蔬啡。
2诲侮、執(zhí)行導(dǎo)入命令:npm i @vant/weapp -S --production
3、小程序工程勾選使用npm模板
4箱蟆、工具->構(gòu)建npm
5沟绪、在miniprogram_npm文件夾中可查看vant代碼