UNIAPP实战项目笔记2 创建项目和引入文件导航开发和顶部开发

约定不等于承诺〃 2024-04-06 12:37 78阅读 0赞

## 创建项目和引入文件 ##

![首页][a79ef964db1d4fe698ed30cd0f33c173.png]  
![分类页][2d0b534c5aba47fea5e8432963c88396.png]

#### 字体图标引入 ####

放大镜,消息,垃圾桶,上箭头,下箭头,购物车

###### 方法: 去iconfont 网站 ######

1.搜索  
2.加入购物车  
3.加入或新建项目  
4.进入项目下载到本地  
5.解压到static目录iconfont下  
6.app.vue 中style 引入`@import '@/static/iconfont/iconfont.css';`  
7. 用 class 的方式使用`<view class="iconfont icon-xiaoxi"></view>`

## 导航开发: ##

#### tabbar图标: ####

首页,分类,购物车,我的  => 选择 | 未选中
    方法: 去iconfont 网站搜索 下载png
    下载后到 static 目录下 tabbar下,
    改名 index.png,indexSelected.png,my.png,
    mySelected.png,list.png,listSelected.png,shop.png,shopSelected.png

*  pages下 新建几个页面  
    index,  
    list,  
    my,  
    shopcart
 *  pages.json下增加 在globalStyle后面

"tabBar": {
                    "color": "#636263",
                    "selectedColor": "#636263",
                    "backgroundColor": "#fff",
                    "spacing": "5px",
                    "list": [
                        {
                            "pagePath": "pages/index/index",
                            "iconPath": "static/tabbar/index.png",
                            "selectedIconPath": "static/tabbar/indexSelected.png",
                            "text": "首页"
                        },{
                            "pagePath": "pages/list/list",
                            "iconPath": "static/tabbar/list.png",
                            "selectedIconPath": "static/tabbar/listSelected.png",
                            "text": "分类"
                        },{
                            "pagePath": "pages/shopcart/shopcart",
                            "iconPath": "static/tabbar/shop.png",
                            "selectedIconPath": "static/tabbar/shopSelected.png",
                            "text": "购物车"
                        },{
                            "pagePath": "pages/my/my",
                            "iconPath": "static/tabbar/index.png",
                            "selectedIconPath": "static/tabbar/indexSelected.png",
                            "text": "我的"
                        }
                    ]
                }

## 顶部开发 ##

> 底色:白色  
> 左侧:放大镜 中间文字 百年奥莱 右侧消息
> 
>     文字 : 改 pages.json的navigationBarTitle 为 百年奥莱
>     更

改pages.json下的 index 页面:

{
            "path": "pages/index/index",
            "style": {
                "navigationBarTitleText": "百年奥莱",
                "navigationBarBackgroundColor": "#fff",
                "app-plus": {
                    "titleNView": {
                        /* 使用字体图标时 unicode 字符表示必须 '\u' 开头，如 "\ue123"（注意不能写成"\e123"）*/
                        "buttons": [
                            {
                                "float": "left",
                                "fontSrc": "./static/iconfont/iconfont.ttf",
                                "text": "\ue616"
                            },{
                                "float": "right",
                                "fontSrc": "./static/iconfont/iconfont.ttf",
                                "text": "\ue711"
                            }
                        ]
                    }
                }
            }
        }

*  使用字体图标时 unicode 字符表示必须 ‘\\u’ 开头，如 “\\ue123”（注意不能写成"\\e123"）

##### 导航栏不支持小程序,小程序需要使用到自定义导航栏和条件编译来实现 #####

*  导航栏设置为自定义 “navigationStyle”: “custom”,  
    页面加条件编译
    
        
          <view class="wx-nav">
              <view class="iconfont icon-ic_search24px"></view>
              <text>百年奥莱</text>
              <view class="iconfont icon-xiaoxi"></view>
          </view>
          
 *  index.vue

<template>
    	<view class="content">
            
            
            
            
            
            <view class="f-active-color">
                文字
            </view>
            <view class="iconfont icon-xiaoxi"></view>
    		<view class="text-area">
    			<text class="title">{
       {title}}</text>
    		</view>
    	</view>
    </template>
    
    <script>
    	export default {
    		data() {
    			return {
    				title: 'Hello'
    			}
    		},
    		onLoad() {
    
    		},
    		methods: {
    
    		}
    	}
    </script>
    
    <style>
    	.content {
    		display: flex;
    		flex-direction: column;
    		align-items: center;
    		justify-content: center;
    	}
    
    	.logo {
    		height: 200rpx;
    		width: 200rpx;
    		margin-top: 200rpx;
    		margin-left: auto;
    		margin-right: auto;
    		margin-bottom: 50rpx;
    	}
    
    	.text-area {
    		display: flex;
    		justify-content: center;
    	}
    
    	.title {
    		font-size: 36rpx;
    		color: #8f8f94;
    	}
        
        .wx-nav{
            text-align: center;
            height: 200rpx;
            width: 100%;
            line-height: 200rpx;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
    </style>

*  list.vue

<template>
        <view>
            分类
        </view>
    </template>
    
    <script>
        export default {
            data() {
                return {
                    
                }
            },
            methods: {
                
            }
        }
    </script>
    
    <style>
    
    </style>

*  pages.json

{
    	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
    		{
    			"path": "pages/index/index",
    			"style": {
    				"navigationBarTitleText": "百年奥莱",
                    "navigationBarBackgroundColor": "#fff",
                    // "navigationStyle": "custom",
                    "app-plus": {
                        "titleNView": {
                            /* 使用字体图标时 unicode 字符表示必须 '\u' 开头，如 "\ue123"（注意不能写成"\e123"）*/
                            "buttons": [
                                {
                                    "float": "left",
                                    "fontSrc": "./static/iconfont/iconfont.ttf",
                                    "text": "\ue616"
                                },{
                                    "float": "right",
                                    "fontSrc": "./static/iconfont/iconfont.ttf",
                                    "text": "\ue711"
                                }
                            ]
                        }
                    }
    			}
    		}
    	    ,{
                "path" : "pages/my/my",
                "style" :                                                                                    
                {
                    "navigationBarTitleText": "",
                    "enablePullDownRefresh": false
                }
                
            }
            ,{
                "path" : "pages/shopcart/shopcart",
                "style" :                                                                                    
                {
                    "navigationBarTitleText": "",
                    "enablePullDownRefresh": false
                }
                
            }
            ,{
                "path" : "pages/list/list",
                "style" :                                                                                    
                {
                    "navigationBarTitleText": "",
                    "enablePullDownRefresh": false
                }
                
            }
        ],
    	"globalStyle": {
    		"navigationBarTextStyle": "black",
    		"navigationBarTitleText": "uni-app",
    		"navigationBarBackgroundColor": "#F8F8F8",
    		"backgroundColor": "#F8F8F8"
    	},
        "tabBar": {
            "color": "#636263",
            "selectedColor": "#636263",
            "backgroundColor": "#fff",
            "spacing": "5px",
            "list": [
                {
                    "pagePath": "pages/index/index",
                    "iconPath": "static/tabbar/index.png",
                    "selectedIconPath": "static/tabbar/indexSelected.png",
                    "text": "首页"
                },{
                    "pagePath": "pages/list/list",
                    "iconPath": "static/tabbar/list.png",
                    "selectedIconPath": "static/tabbar/listSelected.png",
                    "text": "分类"
                },{
                    "pagePath": "pages/shopcart/shopcart",
                    "iconPath": "static/tabbar/shop.png",
                    "selectedIconPath": "static/tabbar/shopSelected.png",
                    "text": "购物车"
                },{
                    "pagePath": "pages/my/my",
                    "iconPath": "static/tabbar/index.png",
                    "selectedIconPath": "static/tabbar/indexSelected.png",
                    "text": "我的"
                }
            ]
        }
        
    }

[a79ef964db1d4fe698ed30cd0f33c173.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/85e7b99c74bd4d4d972362f91e40031e.png
[2d0b534c5aba47fea5e8432963c88396.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/e052526aea52485581fbbc0bff27e3dc.png