小程序开发基础(一)
今天学习下微信小程序,打算做一个界面出来来实现我的物联网功能,首先了解下微信小程序都有哪些基础组件和相应的控件。
首先需要清楚的背景知识: 每一个组件都是由 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）：
在自定义组件中，父组件可以通过属性将数据传递给子组件。
<!--