索框自動搜索是一種常見的功能，它可以提升用戶體驗，使用戶能夠更快速地找到所需的信息。在Vue中實現搜索框自動搜索可以通過以下步驟來完成：

1. 創建一個Vue實例，并在data中定義一個用于存儲搜索關鍵字的變量，例如`keyword`。

```javascript

new Vue({

el: '#app',

data: {

keyword: ''

},

methods: {

search() {

// 在這里執行搜索的邏輯

console.log('搜索關鍵字：', this.keyword);

}

}

});

```

2. 在HTML中添加一個輸入框和一個按鈕，并將輸入框的值綁定到`keyword`變量上。

```html

<div id="app">

<input type="text" v-model="keyword" placeholder="請輸入關鍵字">

<button @click="search">搜索</button>

</div>

```

3. 在`search`方法中執行實際的搜索邏輯?？梢允褂胉watch`屬性來監聽`keyword`變量的變化，并在變化時觸發搜索邏輯。

```javascript

new Vue({

el: '#app',

data: {

keyword: ''

},

methods: {

search() {

// 在這里執行搜索的邏輯

console.log('搜索關鍵字：', this.keyword);

}

},

watch: {

keyword(newKeyword) {

// 在這里執行搜索的邏輯

console.log('搜索關鍵字：', newKeyword);

}

}

});

```

4. 可以使用`debounce`函數來延遲搜索的觸發，以避免在用戶輸入過程中頻繁觸發搜索。

```javascript

new Vue({

el: '#app',

data: {

keyword: ''

},

methods: {

search() {

// 在這里執行搜索的邏輯

console.log('搜索關鍵字：', this.keyword);

}

},

watch: {

keyword: _.debounce(function(newKeyword) {

// 在這里執行搜索的邏輯

console.log('搜索關鍵字：', newKeyword);

}, 500)

}

});

```

以上就是在Vue中實現搜索框自動搜索的步驟。通過使用Vue的數據綁定和監聽功能，可以很方便地實現這一功能。

子們，這一章接著講Button 標簽。

開放能力的屬性

button標簽的開放能力是指open-type 屬性。

其中，這個屬性的合法值包括如下：

這一部分呢，需要分為兩個方式來演示。

一是可在模擬器中直接看效果； 二是要通過真機調試看效果。

button開發能力是指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>

下面一一介紹其屬性。

1、contact

可直接打開客服對話功能，需在微信小程序的后臺進行配置。

保存代碼后，點擊左側contact按鈕，彈出"模擬進入客服對話"的窗口。

但是這個功能是無法在模擬器中看效果的，需要進行真機調試才能進行演示。

詳細了解該屬性用法和特征，請戳下方官方文檔。

https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/customer-message/customer-message.html

2、share

分享、轉發此小程序。

保存代碼后，頁面出現"share"按鈕，點擊后，可分享給好友小程序。

詳細了解該屬性用法和特征，請戳官方文檔。

https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/share.html#%E4%BD%BF%E7%94%A8%E6%8C%87%E5%BC%95

3、getPhoneNumber

用來獲取用戶手機號碼信息。僅限于企業用戶，否則無此權限。使用此屬性，需要綁定一個事件，從bindgetphonenumber回調中，通過參數來獲取??信息。

操作步驟如下：

先是在demo13.wxml文件中寫入如下代碼：

Page({
// 獲取用戶的手機號碼信息
getPhoneNumber(e){
console.log(e);
},
})

復制getPhoneNumber，回到demo13.js文件中，刪除原先的代碼，只保留page部分。

寫入如下代碼：

Page({
// 獲取用戶的手機號碼信息
getPhoneNumber(e){
console.log(e);
},
})

保存后，點擊調試器-console，可以看到detail部分是顯示如下信息

（注意這里登錄要用企業賬戶，個人賬戶會獲取失敗。）

如上，detail信息是難以理解的，看不懂。因為信息已經被加密過了。

如果需要解析手機號，就需要用戶搭建小程序的后臺服務器，在后臺服務器中進行解析手機號。

4、getUserInfo

同getPhoneNumber，都是用來獲取??信息，可以從bindgetuserinfo回調中獲取到??信息

步驟同getPhoneNumber

先在demo13.wxml文件中寫入如下代碼：

<button open-type="getUserInfo" bindgetuserinfo="getUserInfo">getUserInfo</button>

復制getUserInfo，回到demo13.js文件中，寫入如下代碼：

Page({
// 獲取用戶個人信息
getUserInfo(e){
console.log(e);
}
})

保存后，點擊調試器-console，可以看到detail部分是顯示如下信息

userinfo部分顯示個人的基本信息，可直接獲取，不加密。

5、launchApp

用來打開APP，可以通過app-parameter屬性設定向APP傳的參數

敲黑板：

要在app中的某個鏈接中，才能打開小程序；

在小程序中，通過launchApp重新打開app;

此效果難以重現，可以直接參考京東app、小程序進行學習。

詳細了解該屬性用法和特征，請戳下方官方文檔。

https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/launchApp.html

6、openSetting

用來打開小程序內置的授權界面。

在授權界面中，只會出現用戶點擊過的權限。

點擊開發者工具菜單欄的"編譯"進行刷新，再點擊小程序頁面中的"openSetting"按鈕，

出現如下界面，只顯示通訊地址和用戶信息兩欄。

這兩個是在前面使用getPhoneNumber 和 getUserInfo 兩個屬性中被允許的，所以會出現。

我們點擊菜單欄的清除緩存—— 全部清除。

點擊開發者工具菜單欄的"編譯"進行刷新，再點擊小程序頁面中的"openSetting"按鈕，

出現如下界面，沒有被允許的用戶選項。

7、feedback

用來打開小程序的意見反饋頁面。

此屬性和contact 屬性一樣，都無法在模擬器中演示，均需要使用真機調試了演示。

先來看一下contact 屬性的實現流程

（1）將小程序的appid 修改為自己的id，之前用的是測試號，現在也要改為自己的。

步驟：打開微信公眾號平臺——點擊登錄——點擊開發按鈕——開發設置選項——復制ID

回到小程序中，點擊詳情——修改按鈕——粘貼新的ID

（2）準備兩個客服賬號，A是普通用戶的賬號；B是客服的微信賬號。

（3）手動為小程序添加客服微信，也就是微信B

步驟：登錄微信官網——客服——添加——輸入自己的微信號

（4）回到微信開發者工具中，點擊"預覽"按鈕——用賬號A掃碼——點擊contact按鈕

手機截屏顯示如下：

在對話框中輸入信息，客服微信B就會收到消息。

接著，我們再來看一下feedback 屬性，真機調試如下：

手機掃碼后，在微信中打開該小程序，點擊"feedback"按鈕，頁面如下：

ok，button標簽的內容通過兩章已經完全講解完畢了，大家認真操練起來吧~

不懂得地方歡迎評論區留言告訴我哦~~~

搜索并關注微信公眾號：飛寢旺食

獲取更多小程序運營干貨、免費的開發教程、源代碼等！

做小程序我們是認真的！