第7课 微信小程序实现图片搜索器案例
效果图首先，我们来看看这个图片搜索器的效果图：
![图片搜索器效果图]( 全局样式在实现这个小程序之前，我们需要在 `app.json` 文件中注册两个页面： `index1` 和 `index2`。
```json{
"pages": [
"index1/index",
"index2/index"
],
...
}
```
然后，我们只需写这两个页面的代码即可实现图片搜索小案例。
index1 页面 index1.wxml```wxml
```
index1.js```javascriptPage({
data: {
imgUrl: ''
},
handleTap() {
wx.navigateTo({ url: 'index2' })
}
})
```
index2 页面 index2.wxml```wxml
```
index2.js```javascriptPage({
data: {
imgUrl: ''
},
handleTap() {
wx.navigateTo({ url: 'index1' })
}
})
```
全局样式我们需要在 `app.wxss` 文件中定义全局样式。
```css.searcher {
width:100vw;
height:100vh;
background-color: f7f7f7;
}
```
这样，我们就实现了一个简单的图片搜索器小程序。
总结在这个案例中，我们使用微信小程序的 `page` 组件和 `image` 组件来实现图片搜索器。我们定义了两个页面： `index1` 和 `index2`，并在每个页面中定义了一个 `handleTap` 方法来切换到另一个页面。
这个案例展示了微信小程序的基本使用方法和组件之间的交互方式。
