一：創(chuàng)建我們的組件文件夾
文件目錄
二：把我們需要封裝的組件，按類目歸好
彈窗組件
彈窗組件根據(jù)按鈕的不同，分為三類喜每，如上圖
下面，重點(diǎn)來了
三：右鍵新建component
新建component
一定是新建雳攘，不是在app.json里面寫路徑
新建好的component
新建component之后带兜，會(huì)出現(xiàn).js .json .wxml .wxss文件，界面布局和正常文件的界面布局一樣
現(xiàn)在来农，重點(diǎn)來了鞋真，介紹一下怎么進(jìn)行邏輯處理
1、把需要傳值的屬性放在 properties 中
properties: {
// btn按鈕標(biāo)題
btnTitle: {
type: String,
value: 'btn按鈕標(biāo)題'
},
// 提示內(nèi)容
content: {
type: String,
value: '提示內(nèi)容'
}
},
2沃于、把私有屬性放在 data 中初始化
data: {
// 控制界面顯示隱藏
showTips:false
},
3涩咖、把所有要用到的方法放在 methods 中
methods: {
hiddenView:function() {
this.setData({
showTips:false
})
},
showView:function() {
this.setData({
showTips:true
})
},
// 外部使用方法，用下劃線 _ 區(qū)分一下
_onTap:function() {
this.triggerEvent('onTap')
}
}
此處注意一下繁莹，在外部使用的方法最好用 下劃線 _ 區(qū)分一下
貼一下.wxml的代碼吧
<!-- 黑色背景 -->
<view class='tips_container' hidden='{{!showTips}}'>
<!-- 白色背景框 -->
<view class='bgWhiteView'>
<text>{{content}}</text>
<!-- 頂部背景圖片 -->
<image src='/imgs/tips/icon_tips_bg.png' mode='scaleToFill'>
</image>
<!-- 底部按鈕 -->
<button bindtap='_onTap'>{{btnTitle}}</button>
</view>
</view>
組件中.wxss的代碼
.tips_container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background: rgba(0, 0, 0, 0.5);
width: 100%;
height: 100%;
}
.bgWhiteView {
display: flex;
flex-direction: column;
justify-content: center;
width: 574rpx;
height: 395rpx;
border-radius: 10rpx;
background: #fff;
}
.bgWhiteView image {
top: 0;
left: 0;
width: 100%;
height: 287rpx;
}
.bgWhiteView text {
position: absolute;
vertical-align: middle;
padding: 0 80rpx 108rpx 80rpx;
width: 424rpx;
color: #4a474a;
font: 36rpx;
}
.bgWhiteView button {
left: 0;
bottom: 0;
width: 100%;
height: 108rpx;
background: #fff;
color: #cbbb90;
}
button::after {
border: none;
}
使用
在.json文件中檩互，需要添加組件路徑
"usingComponents": {
"tips_oneBtn":"/component/tips/tipsOneBtn/tipsOneBtnView"
}
在.wxml中，對組件傳值
<!-- 此標(biāo)簽名需要和 .json 文件中相呼應(yīng) -->
<tips_oneBtn
id='tips_oneBtn'
content='**要獲取您的個(gè)人信息咨演，您是否允許闸昨？'
btnTitle='允許'
bind:onTap='tipsOneBtnViewTap'
wx:if='{{!hasUserInfo && canIUse}}'>
</tips_oneBtn>
記得在 .wxss中對組件進(jìn)行布局
#tips_oneBtn {
left: 0;
top: 0;
width: 100%;
height: 100%;
}
在.js中的使用
this.tips_oneBtn = this.selectComponent("#tips_oneBtn")
this.tips_oneBtn.showView()
組件中點(diǎn)擊按鈕調(diào)用的方法
tipsOneBtnViewTap: function() {
console.log('點(diǎn)擊了允許按鈕')
},
新手一枚，哪里不合適可以指出來薄风，耽誤了我沒事饵较，別耽誤了別人??
