微信小程序（组件）

微信小程序（组件）

忽略文件的设置

"packOptions": {
    "ignore": [
      {
        "value": "static/uploads",
        "type": "folder"
      }
    ],
    "include": []
  },

创建分包，会自动创建文件夹

"subPackages": [

    {

      "root": "subpkg_user",

      "pages": [

        "pages/profile/profile",

        "pages/order/order"

      ]

    }

  ],

配置预加载

 "preloadRule": {
    "pages/index/index":{
      "network":"all",
      "packages": ["subpkg_user"]
    }
  },

 

组件的使用

使用一个新的组件

 定义到页面，就只能当前页面用，定义到 app.json 可以全局使用

 "usingComponents": {
    
    // 组件名    地址
    "my-com1":"/components/my-com1/my-com1"
  }

组件中的样式

组件中的样式不要使用标签选择器，尽量就只使用 class 选择器

在组件中，样式默认是隔离的，自定义组件的样式只能在自定义组件中操作

组件的样式是封闭的，可以打开（一般不这么做）

Component({
  // 关闭保护层，全局样式可用
  options:{
     addGlobalClass:true
   }

})

一般会留一个缺口，给使用者操作样式

Component({

  // 留一个缺口，让别人可以操作样式
  // my-class 缺口样式名

  externalClasses:['my-class'] 
})

具体使用

<!-- 组件引入 -->
<my-com1 my-class="my-class" com-class="col" ></my-com1>

===================================================================

.my-class{
  color: rgb(158, 24, 175);
}
.col{
color: rgb(238, 80, 154);
}

在组件中的函数使用，必须写在 methods 中

  methods:{

    cli(){

      this.setData({mag:'吾将上下而求索'})

    }

  }