2.搭建项目架构

一、新建页面

二、在pages.json中配置tabbar中的list属性

"tabBar": {
                "list": [{
                    "pagePath": "pages/home/home",
                    "iconPath": "static/tab-icons/hot.png",
                    "selectedIconPath": "static/tab-icons/hot-active.png",
                    "text": "首页",
                    "iconfont": { 
                        "text": "\ue102",
                        "selectedText": "\ue103",
                        "fontSize": "17px",
                        "color": "#000000",
                        "selectedColor": "#0000ff"
                    }
                }, {
                    "pagePath": "pages/video/video",
                    "iconPath": "static/tab-icons/hot-video.png",
                    "selectedIconPath": "static/tab-icons/hot-video-active.png",
                    "text": "热播",
                    "iconfont": { 
                        "text": "\ue102",
                        "selectedText": "\ue103",
                        "fontSize": "17px",
                        "color": "#000000",
                        "selectedColor": "#0000ff"
                    }
                },{
                    "pagePath": "pages/my/my",
                    "iconPath": "static/tab-icons/my.png",
                    "selectedIconPath": "static/tab-icons/my-active.png",
                    "text": "我的",
                    "iconfont": { 
                        "text": "\ue102",
                        "selectedText": "\ue103",
                        "fontSize": "17px",
                        "color": "#000000",
                        "selectedColor": "#0000ff"
                    }
                }]
            }

三、分析 .vue 文件

• template：定义当前页面的结构。相当于 wxml
• script：定义当前页面的逻辑。相当于 js
• style：定义当前页面的样式。相当于 wxss

// scoped属性 表示当前样式只在当前页面生效
<style lang="scss" scoped>
.bannerIcon {
    width: 755rpx;
    height: 40px;
}
</style>

四、创建自定义组件

1. 在项目根目录新建文件，命名 components
2. 右键 components 文件，选择新建组件
3. 在需要使用组件的页面直接使用，无需注册或其他额外操作。

• 父组件向子组件传值

子组件内，通过props属性声明接收的变量名和变量类型

<script>
    export default {
        name:"my_search",
        props : {
            placeHolderText : {
                type:String,
                default:"imdefault"
            }
        },
        data() {
            return {
                
            };
        }
    }
</script>

父组件内，创建组件时给对应的 placeHolderText 属性赋值

<my_search placeHolderText="我说要有光"></my_search>