小程序开发基础(一)

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

<!-- 父组件 -->
<custom-component some-prop="some value"></custom-component>
// 在子组件中定义属性
Component({
  properties: {
    someProp: {
      type: String,
      value: ''
    }
  }
});
事件（Events）：
子组件可以通过触发事件将数据传递给父组件。

// 在子组件中触发事件
this.triggerEvent('customEvent', {
  detail: 'some data'
});
环境变量（Environment Variables）：
在微信开发者工具中，可以设置环境变量，这些变量可以在小程序的代码中使用。

云函数：
通过云函数和云数据库，可以在客户端之间进行间接的数据通信。

这些方法各有适用场景，开发者可以根据实际需求选择最合适的数据通信方式。

然后我问了专家，目前主流的缓存处理法比较合适，先不问为什么，作为小白的我，先做一个DEMO出来再去问吧，实践出真知。
其中KIMI目前只能以文字的方式教授，相关的链接资料和Reference 如下:
https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

https://developers.weixin.qq.com/miniprogram/dev/framework/

https://vant-ui.github.io/vant-weapp/#/home