微信小程序（1）

I`ivresse

已于 2022-07-04 20:36:05 修改

阅读量452

点赞数 22

文章标签：微信小程序前端 vue.js

于 2022-07-04 20:34:32 首次发布

本文链接：https://blog.csdn.net/Taojia9958/article/details/125607706

版权

本文档介绍了如何使用uni-app为微信小程序配置导航栏，包括创建app、组织文件结构、设置tabBar以及利用插槽创建搜索栏。在uni-app中，通过在pages.json配置导航栏图标，并在components文件夹内创建search-slot.vue组件来实现搜索功能。

摘要由CSDN通过智能技术生成

一、通过uniapp官网文档配置导航栏（参考：uni-app官网）

1、首先创建一个app，名为online retailers

2、在online retailers中创建一个common文件夹，在common中创建一个名为lib的子文件夹，通过阿里巴巴矢量图标库下载需要的icon图标文件，把icon.css文件放入lib文件夹中，font、image、tabbar文件夹放入static文件夹中（static文件夹一般存放静态文件），在app.vue中style引入

<style>
	@import url("./common/lib/icon.css");
	/*每个页面公共css */
</style>

3、右击pages文件，新建页面，分别创建index、cart、cate、myfile.vue文件，注意在创建前一定要勾选在pages.json中注册和创建同名目录，创建完成之后pages.json中也会同时自动配置

{
	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
		{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "web2208",
			}
		}
	    ,{
            "path" : "pages/cart/cart",
            "style" :                                                                                    
            {
                "navigationBarTitleText": "",
                "enablePullDownRefresh": false
            }
            
        }
        ,{
            "path" : "pages/cate/cate",
            "style" :                                                                                    
            {
                "navigationBarTitleText": "",
                "enablePullDownRefresh": false
            }
            
        }
        ,{
            "path" : "pages/myfile/myfile",
            "style" :