微信小程序 自定义组件

Intro.自定义tabBar的配置

在app.json文件的UsingComponents下注册

  "tabBar": {
    "borderStyle": "white",
    "selectedColor": "#333333",
    "color": "999999",
    "list": [
      {
        "text": "阅读",
        "pagePath": "pages/post/post",
        "iconPath": "/images/tab/post.png",
        "selectedIconPath" : "/images/tab/post@highlight.png"

      },
      {
        "text": "电影",
        "pagePath": "pages/movies/movies",
        "iconPath": "/images/tab/movie.png",
        "selectedIconPath" : "/images/tab/movie@highlight.png"
      }
    ]
  }

tabBar的案例可以接触到什么是自定义，但是自定义的程度很小，大部分还是内置完成的。
注意跳转到有选项卡的页面需要使用switchTab

如何创建第一个自定义组件

①根目录下创建components>post>index
②components>post>index.js中定义属性
properties: {
text: {
type: String,//类型
value: ‘123’//默认值
}
}
③在page > xx.json 定义名称
“usingComponents”: {
“c-post”:"/components/post/index"
}
④在page > xx.wxml中使用
⑤components > post > index.wxml
{{text}}

自定义组件属性

自定义的属性 text 也可以做数据绑定
快速自定义属性时，无法自定义默认值
properties: {
text: String // 也可以为Number（默认值为0）、Object、Boolean（默认值为false）
}

把原来post页面的文章部分作为一个组件，wxml和wxss复制到组件对应下wxml和wxss下

为什么index.wxml（组件的）打印data和posts.wxml不一样:
posts里面data是自带的，所以不用，直接去打印res。然而index是接受到res放进properties