美文网首页
2.搭建项目架构

2.搭建项目架构

作者: LucXion | 来源:发表于2023-11-13 14:28 被阅读0次
一、新建页面
二、在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>

相关文章

网友评论

      本文标题:2.搭建项目架构

      本文链接:https://www.haomeiwen.com/subject/yiacwdtx.html