开发环境配置

1. 实现效果：搜索组件
2. 1. 创建搜索区域样式
3. 2. data属性声明
4. 3. 点击事件
5. 4. 创建搜索结果页
6. 课后脑补知识点（flex 布局 & box 模型 & uni.showToast & uni.setStorage & uni.navigateTo）

实现效果：搜索组件

1. 创建搜索区域样式

编辑pages/index/index.vue

<template>
	<view>
		<!-- 下面是搜索框 -->
		<view
			style="width: 750rpx;height: 90rpx;background-color: #00414B;display: flex; align-items: center;justify-content:space-around;">
			<view style="width: 600rpx; background-color: #fff;border-radius: 15rpx;">
				<input type="text" v-model="search_value"
					style="height: 50rpx; border-radius: 15rpx;box-sizing: border-box;padding-left: 30rpx;font-size: 23rpx;color:red;"
					maxlength="40" placeholder="搜索商品名,如:iphone12 pro max" />
			</view>
			<view
				style="width:120rpx;height: 50rpx;background-color:#ff4777; text-align: center;line-height: 50rpx;color: #fff;border-radius: 25rpx;"
				@click="search">搜索
			</view>
		</view>
		<!-- 上面是搜索框 -->
	</view>
</template>

2. data属性声明

data() {
  return {
    search_value: '' // 搜索框绑定的输入值
    }
}

3. 点击事件

methods: {	
    search() { // 搜索函数
        console.log("搜索的关键词是......", this.search_value);
        if (this.search_value.trim() == '') {
            uni.showToast({
                title: '请输入产品关键词进行搜索',
                icon: 'none',
                duration: 1000
            });
            return;
        }
        uni.setStorage({
            key: 'search_value',
            data: this.search_value
        });
        uni.navigateTo({
            url: '/pages/search_goods/search_goods?id=' + this.search_value
        });
    
    } // 搜索函数END
}

4. 创建搜索结果页

在pages目录上右键创建页面search_goods

课后脑补知识点（flex 布局 & box 模型 & uni.showToast & uni.setStorage & uni.navigateTo）

• css flex布局

  • Flex 布局教程：语法篇
  • Flex 布局教程：实例篇

• css box盒子模型

  • CSS盒子模型总结

• line-height

  • 真正的能理解CSS中的line-height，height与line-height

• uni.showToast(OBJECT)

  • 显示消息提示框

    uni.showToast({
        title: '标题',
        duration: 2000
    });

• uni.hideToast()

  • 隐藏消息提示框

    uni.hideToast();

• uni.setStorage(OBJECT)

  • 将数据存储在本地缓存中指定的 key 中

    uni.setStorage({
        key: 'storage_key',
        data: 'hello',
        success: function () {
            console.log('success');
            }
    });

• uni.getStorage(OBJECT)

  • 从本地缓存中异步获取指定 key 对应的内容

    uni.getStorage({
        key: 'storage_key',
        success: function (res) {
            console.log(res.data);
        }
    });

• uni.navigateTo(OBJECT)

  • 保留当前页面，跳转到应用内的某个页面
    使用uni.navigateBack可以返回到原页面

• uni.navigateBack(OBJECT)

  • 关闭当前页面，返回上一页面或多级页面
    可通过 getCurrentPages() 获取当前的页面栈，决定需要返回几层

• uni.redirectTo(OBJECT)

  • 关闭当前页面，跳转到应用内的某个页面

• uni.switchTab(OBJECT)

  • 跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面

---

转载请注明来源，欢迎对文章中的引用来源进行考证，欢迎指出任何有错误或不够清晰的表达。