整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
索框自動搜索是一種常見的功能，它可以提升用戶體驗(yàn)，使用戶能夠更快速地找到所需的信息。在Vue中實(shí)現(xiàn)搜索框自動搜索可以通過以下步驟來完成：
1. 創(chuàng)建一個Vue實(shí)例，并在data中定義一個用于存儲搜索關(guān)鍵字的變量，例如`keyword`。
```javascript
new Vue({
el: '#app',
data: {
keyword: ''
},
methods: {
search() {
// 在這里執(zhí)行搜索的邏輯
console.log('搜索關(guān)鍵字：', this.keyword);
}
}
});
```
2. 在HTML中添加一個輸入框和一個按鈕，并將輸入框的值綁定到`keyword`變量上。
```html
<div id="app">
<input type="text" v-model="keyword" placeholder="請輸入關(guān)鍵字">
<button @click="search">搜索</button>
</div>
```
3. 在`search`方法中執(zhí)行實(shí)際的搜索邏輯。可以使用`watch`屬性來監(jiān)聽`keyword`變量的變化，并在變化時觸發(fā)搜索邏輯。
```javascript
new Vue({
el: '#app',
data: {
keyword: ''
},
methods: {
search() {
// 在這里執(zhí)行搜索的邏輯
console.log('搜索關(guān)鍵字：', this.keyword);
}
},
watch: {
keyword(newKeyword) {
// 在這里執(zhí)行搜索的邏輯
console.log('搜索關(guān)鍵字：', newKeyword);
}
}
});
```
4. 可以使用`debounce`函數(shù)來延遲搜索的觸發(fā)，以避免在用戶輸入過程中頻繁觸發(fā)搜索。
```javascript
new Vue({
el: '#app',
data: {
keyword: ''
},
methods: {
search() {
// 在這里執(zhí)行搜索的邏輯
console.log('搜索關(guān)鍵字：', this.keyword);
}
},
watch: {
keyword: _.debounce(function(newKeyword) {
// 在這里執(zhí)行搜索的邏輯
console.log('搜索關(guān)鍵字：', newKeyword);
}, 500)
}
});
```
以上就是在Vue中實(shí)現(xiàn)搜索框自動搜索的步驟。通過使用Vue的數(shù)據(jù)綁定和監(jiān)聽功能，可以很方便地實(shí)現(xiàn)這一功能。
子們，這一章接著講Button 標(biāo)簽。
button標(biāo)簽的開放能力是指open-type 屬性。
其中，這個屬性的合法值包括如下：
這一部分呢，需要分為兩個方式來演示。
一是可在模擬器中直接看效果； 二是要通過真機(jī)調(diào)試看效果。
button開發(fā)能力是指open-type 的合法值。我們將其全部屬性寫入demo13.wxml文件中。
<button open-type="contact">contact</button>
<button open-type="share">share</button>
<button open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber">getPhoneNumber</button>
<button open-type="getUserInfo" bindgetuserinfo="getUserInfo">getUserInfo</button>
<button open-type="launchApp">launchApp</button>
<button open-type="openSetting">openSetting</button>
<button open-type="feedback">feedback</button>下面一一介紹其屬性。
可直接打開客服對話功能，需在微信小程序的后臺進(jìn)行配置。
保存代碼后，點(diǎn)擊左側(cè)contact按鈕，彈出"模擬進(jìn)入客服對話"的窗口。
但是這個功能是無法在模擬器中看效果的，需要進(jìn)行真機(jī)調(diào)試才能進(jìn)行演示。
詳細(xì)了解該屬性用法和特征，請戳下方官方文檔。
https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/customer-message/customer-message.html
分享、轉(zhuǎn)發(fā)此小程序。
保存代碼后，頁面出現(xiàn)"share"按鈕，點(diǎn)擊后，可分享給好友小程序。
詳細(xì)了解該屬性用法和特征，請戳官方文檔。
https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/share.html#%E4%BD%BF%E7%94%A8%E6%8C%87%E5%BC%95
用來獲取用戶手機(jī)號碼信息。僅限于企業(yè)用戶，否則無此權(quán)限。使用此屬性，需要綁定一個事件，從bindgetphonenumber回調(diào)中，通過參數(shù)來獲取??信息。
操作步驟如下：
先是在demo13.wxml文件中寫入如下代碼：
Page({
// 獲取用戶的手機(jī)號碼信息
getPhoneNumber(e){
console.log(e);
},
})復(fù)制getPhoneNumber，回到demo13.js文件中，刪除原先的代碼，只保留page部分。
寫入如下代碼：
Page({
// 獲取用戶的手機(jī)號碼信息
getPhoneNumber(e){
console.log(e);
},
})保存后，點(diǎn)擊調(diào)試器-console，可以看到detail部分是顯示如下信息
（注意這里登錄要用企業(yè)賬戶，個人賬戶會獲取失敗。）
如上，detail信息是難以理解的，看不懂。因?yàn)樾畔⒁呀?jīng)被加密過了。
如果需要解析手機(jī)號，就需要用戶搭建小程序的后臺服務(wù)器，在后臺服務(wù)器中進(jìn)行解析手機(jī)號。
同getPhoneNumber，都是用來獲取??信息，可以從bindgetuserinfo回調(diào)中獲取到??信息
步驟同getPhoneNumber
先在demo13.wxml文件中寫入如下代碼：
<button open-type="getUserInfo" bindgetuserinfo="getUserInfo">getUserInfo</button>復(fù)制getUserInfo，回到demo13.js文件中，寫入如下代碼：
Page({
// 獲取用戶個人信息
getUserInfo(e){
console.log(e);
}
})保存后，點(diǎn)擊調(diào)試器-console，可以看到detail部分是顯示如下信息
userinfo部分顯示個人的基本信息，可直接獲取，不加密。
用來打開APP，可以通過app-parameter屬性設(shè)定向APP傳的參數(shù)
敲黑板：
要在app中的某個鏈接中，才能打開小程序；
在小程序中，通過launchApp重新打開app;
此效果難以重現(xiàn)，可以直接參考京東app、小程序進(jìn)行學(xué)習(xí)。
詳細(xì)了解該屬性用法和特征，請戳下方官方文檔。
https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/launchApp.html
用來打開小程序內(nèi)置的授權(quán)界面。
在授權(quán)界面中，只會出現(xiàn)用戶點(diǎn)擊過的權(quán)限。
點(diǎn)擊開發(fā)者工具菜單欄的"編譯"進(jìn)行刷新，再點(diǎn)擊小程序頁面中的"openSetting"按鈕，
出現(xiàn)如下界面，只顯示通訊地址和用戶信息兩欄。
這兩個是在前面使用getPhoneNumber 和 getUserInfo 兩個屬性中被允許的，所以會出現(xiàn)。
我們點(diǎn)擊菜單欄的清除緩存—— 全部清除。
點(diǎn)擊開發(fā)者工具菜單欄的"編譯"進(jìn)行刷新，再點(diǎn)擊小程序頁面中的"openSetting"按鈕，
出現(xiàn)如下界面，沒有被允許的用戶選項(xiàng)。
用來打開小程序的意見反饋頁面。
此屬性和contact 屬性一樣，都無法在模擬器中演示，均需要使用真機(jī)調(diào)試了演示。
先來看一下contact 屬性的實(shí)現(xiàn)流程
（1）將小程序的appid 修改為自己的id，之前用的是測試號，現(xiàn)在也要改為自己的。
步驟：打開微信公眾號平臺——點(diǎn)擊登錄——點(diǎn)擊開發(fā)按鈕——開發(fā)設(shè)置選項(xiàng)——復(fù)制ID
回到小程序中，點(diǎn)擊詳情——修改按鈕——粘貼新的ID
（2）準(zhǔn)備兩個客服賬號，A是普通用戶的賬號；B是客服的微信賬號。
（3）手動為小程序添加客服微信，也就是微信B
步驟：登錄微信官網(wǎng)——客服——添加——輸入自己的微信號
（4）回到微信開發(fā)者工具中，點(diǎn)擊"預(yù)覽"按鈕——用賬號A掃碼——點(diǎn)擊contact按鈕
手機(jī)截屏顯示如下：
在對話框中輸入信息，客服微信B就會收到消息。
接著，我們再來看一下feedback 屬性，真機(jī)調(diào)試如下：
手機(jī)掃碼后，在微信中打開該小程序，點(diǎn)擊"feedback"按鈕，頁面如下：
ok，button標(biāo)簽的內(nèi)容通過兩章已經(jīng)完全講解完畢了，大家認(rèn)真操練起來吧~
不懂得地方歡迎評論區(qū)留言告訴我哦~~~
搜索并關(guān)注微信公眾號：飛寢旺食
獲取更多小程序運(yùn)營干貨、免費(fèi)的開發(fā)教程、源代碼等！
做小程序我們是認(rèn)真的！
為大家介紹使用 CSS 來制作按鈕。
基本按鈕樣式
默認(rèn)按鈕 CSS 按鈕
CSS 實(shí)例
.button {
background-color: #4CAF50; /* Green */
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
}
按鈕顏色
GreenBlueRedGrayBlack
我們可以使用 background-color 屬性來設(shè)置按鈕顏色:
CSS 實(shí)例
.button1 {background-color: #4CAF50;} /* Green */
.button2 {background-color: #008CBA;} /* Blue */
.button3 {background-color: #f44336;} /* Red */
.button4 {background-color: #e7e7e7; color: black;} /* Gray */
.button5 {background-color: #555555;} /* Black */
嘗試一下 ?
按鈕大小
10px12px16px20px24px
我們可以使用 font-size 屬性來設(shè)置按鈕大小:
CSS 實(shí)例
.button1 {font-size: 10px;}
.button2 {font-size: 12px;}
.button3 {font-size: 16px;}
.button4 {font-size: 20px;}
.button5 {font-size: 24px;}
圓角按鈕
2px4px8px12px50%
我們可以使用 border-radius 屬性來設(shè)置圓角按鈕:
CSS 實(shí)例
.button1 {border-radius: 2px;}
.button2 {border-radius: 4px;}
.button3 {border-radius: 8px;}
.button4 {border-radius: 12px;}
.button5 {border-radius: 50%;}
嘗試一下 ?
按鈕邊框顏色
綠藍(lán)紅灰黑
我們可以使用 border 屬性設(shè)置按鈕邊框顏色:
CSS 實(shí)例
.button1 {
background-color: white;
color: black;
border: 2px solid #4CAF50; /* Green */
}
...
嘗試一下 ?
鼠標(biāo)懸停按鈕
綠藍(lán)紅灰黑
綠藍(lán)紅灰黑
我們可以使用 :hover 選擇器來修改鼠標(biāo)懸停在按鈕上的樣式。
提示: 我們可以使用 transition-duration 屬性來設(shè)置 "hover" 效果的速度:
CSS 實(shí)例
.button {
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;
}
.button:hover {
background-color: #4CAF50; /* Green */
color: white;
}
...
按鈕陰影
陰影按鈕鼠標(biāo)懸停后顯示陰影
我們可以使用 box-shadow 屬性來為按鈕添加陰影:
CSS 實(shí)例
.button1 {
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}
.button2:hover {
box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
}
嘗試一下 ?
禁用按鈕
正常按鈕禁用按鈕
我們可以使用 opacity 屬性為按鈕添加透明度 (看起來類似 "disabled" 屬性效果)。
提示: 我么可以添加 cursor 屬性并設(shè)置為 "not-allowed" 來設(shè)置一個禁用的圖片:
CSS 實(shí)例
.disabled {
opacity: 0.6;
cursor: not-allowed;
}
嘗試一下 ?
按鈕寬度
250px
50%100%
默認(rèn)情況下，按鈕的大小有按鈕上的文本內(nèi)容決定( 根據(jù)文本內(nèi)容匹配長度 )。 我們可以使用 width 屬性來設(shè)置按鈕的寬度:
提示: 如果要設(shè)置固定寬度可以使用像素 (px) 為單位，如果要設(shè)置響應(yīng)式的按鈕可以設(shè)置為百分比。
CSS 實(shí)例
.button1 {width: 250px;}
.button2 {width: 50%;}
.button3 {width: 100%;}
嘗試一下 ?
按鈕組
ButtonButtonButtonButton
移除外邊距并添加 float:left 來設(shè)置按鈕組:
CSS 實(shí)例
.button {
float: left;
}
嘗試一下 ?
帶邊框按鈕組
ButtonButtonButtonButton
我們可以使用 border 屬性來設(shè)置帶邊框的按鈕組:
CSS 實(shí)例
.button {
float: left;
border: 1px solid green
}
嘗試一下 ?
按鈕動畫
CSS 實(shí)例
鼠標(biāo)移動到按鈕上后添加箭頭標(biāo)記:
Hover
嘗試一下 ?
CSS 實(shí)例
點(diǎn)擊時添加 "波紋" 效果:
Click
CSS 實(shí)例
點(diǎn)擊時添加 "壓下" 效果:
Click
如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！
*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
