今天學習下微信小程式,打算做一個介面出來來實現我的物聯網功能,首先了解下微信小程式都有哪些基礎元件和相應的控制元件。
首先需要清楚的背景知識: 每一個元件都是由 index.js index.json index.wxml index.wxss 四個檔案組成，但是其中若是Canvas種類的外掛還不太一樣，後面會詳細介紹。
KIMI指令:
(一)假設你是一名微信小程式開發專家,請分條羅列微信開發的知識框架,請逐條羅列並以表格形式輸出
(二)請教授開發環境搭建的流程，按照1，2，3等步驟輸出，要求步驟簡明扼要，邏輯清晰且字數不超過300字，以圖文並茂的方式呈現
(三)請結合一個例子來做小程式程式碼實現
(四)4.1微信小程式開發過程中會使用哪些UI元件
4.1.1 微信小程式開發過程中navigationbar有哪些監聽事件，如何使用，請舉一個例子說明
4.2元件間資料通訊是用什麼元件實現的
1.頁面的WXML結構 (pages/index/index.wxml):
<view class="container">
<button bindtap="onButtonTap">點選我</button>
</view>
2.頁面的樣式 (pages/index/index.wxss):
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
}
button {
margin: 20px;
padding: 10px;
background-color: #1AAD19;
color: white;
border-radius: 5px;
font-size: 16px;
}
3.頁面的邏輯 (pages/index/index.js):
Page({
onButtonTap: function(event) {
console.log('按鈕被點選了')
// 可以在這裡執行更多的操作，如呼叫API、跳轉頁面等
}
})然後深入問下去，學習元件模組的時候，分通訊元件和UI元件，
4.1.1輸出如下：
在微信小程式中，<navigationbar> 元件用於定義頁面的導航欄。這個元件提供了一些監聽事件，允許開發者在使用者與導航欄互動時執行特定的操作。以下是一些常用的監聽事件及其用法：
onSearchInput: 當使用者輸入搜尋框時觸發。
onSearchConfirm: 當使用者點選搜尋鍵盤上的“搜尋”按鈕時觸發。
onSearchCancel: 當使用者點選搜尋鍵盤上的“取消”按鈕時觸發。
onBack: 當使用者點選導航欄的返回按鈕時觸發。
使用方法：
在頁面的 WXML 檔案中，你可以透過新增 bind 屬性來監聽這些事件。例如，如果你想監聽搜尋框的輸入和確認事件，可以這樣寫：
<navigationbar
bind:onSearchInput="onSearchInput"
bind:onSearchConfirm="onSearchConfirm"
bind:onSearchCancel="onSearchCancel"
>
<!-- 導航欄內容，如標題等 -->
</navigationbar>
示例程式碼：
WXML (頁面結構)
<navigationbar
title="搜尋示例"
bind:onSearchInput="onSearchInput"
bind:onSearchConfirm="onSearchConfirm"
bind:onSearchCancel="onSearchCancel"
>
<view class="search-container">
<input type="search" placeholder="輸入搜尋內容" />
</view>
</navigationbar>
WXSS (頁面樣式)
.search-container {
flex: 1;
}
JS (頁面邏輯)
Page({
// 搜尋框輸入時觸發
onSearchInput: function(e) {
console.log('搜尋框輸入內容：', e.detail.value);
},
// 點選搜尋鍵盤上的“搜尋”按鈕時觸發
onSearchConfirm: function(e) {
console.log('搜尋確認，搜尋內容：', e.detail.value);
// 執行搜尋操作
},
// 點選搜尋鍵盤上的“取消”按鈕時觸發
onSearchCancel: function(e) {
console.log('搜尋取消');
// 可以在這裡清空搜尋框或執行其他操作
}
});
在這個例子中，我們定義了一個帶有搜尋框的導航欄，並監聽了三個事件：onSearchInput、onSearchConfirm 和 onSearchCancel。當使用者在搜尋框中輸入時，onSearchInput 事件會被觸發，我們可以透過 e.detail.value 獲取到輸入的內容。當使用者點選搜尋鍵盤上的“搜尋”或“取消”按鈕時，相應的 onSearchConfirm 或 onSearchCancel 事件會被觸發，開發者可以在這些事件的處理函式中實現搜尋邏輯或取消操作。
請注意，<navigationbar> 元件在不同版本的微信小程式基礎庫中支援程度可能有所不同，具體使用時請參考最新的官方文件。元件中的事件通訊:
微信小程式的元件間資料通訊主要透過以下幾種方式實現，而不是特定的元件：
全域性變數：
使用 getApp() 方法訪問全域性的 App() 例項，可以在不同頁面和元件間共享資料。
// 在App()中定義全域性資料
App({
globalData: {
sharedData: {}
}
});
// 在任何頁面或元件中訪問全域性資料
const app = getApp();
console.log(app.globalData.sharedData);
頁面棧：
利用頁面棧，當前頁面可以訪問到前一個頁面的例項，從而進行資料通訊。
// 在前一個頁面
let pages = getCurrentPages();
let prevPage = pages[pages.length - 2];
prevPage.setData({
someData: 'some value'
});
// 注意：這種方法依賴頁面棧，可能受到頁面跳轉方式的影響。
事件系統：
使用 wx.onMessage 和 wx.postMessage 在不同頁面或元件間傳遞訊息。
// 在傳送端
wx.postMessage({
data: {
message: 'Hello from child'
}
});
// 在接收端
wx.onMessage(function(data) {
console.log(data.message);
});
回撥函式：
在頁面跳轉時傳遞迴調函式，子頁面在需要時呼叫這個回撥函式將資料傳回父頁面。
// 在父頁面跳轉時
wx.navigateTo({
url: 'child/page',
success: function(res) {
res.eventChannel = this;
}
});
// 在子頁面
const eventChannel = getCurrentPages().reverse()[0].eventChannel;
eventChannel.emit('passData', {
someData: 'some value'
});
快取（Storage）：
使用 wx.setStorageSync 和 wx.getStorageSync 將資料儲存在本地快取中，然後在其他頁面或元件中讀取。
// 儲存資料
wx.setStorageSync('someKey', 'some value');
// 讀取資料
const value = wx.getStorageSync('someKey');
屬性（Properties）：
在自定義元件中，父元件可以透過屬性將資料傳遞給子元件。
<!-- 父元件