binnng / wx-component

微信小程序组件化解决方案

wx-component

一种微信小程序组件化解决方案

使用

拷贝文件

拷贝src路径下的所有文件到项目里，例如到libs/目录下

引用

在app.js中引用wx-component组件

app.js

require("/libs/wx-component/index")
...

App({
	onLaunch() {

  },
  globalData: {
    ...
  }
})

推荐的目录结构

├─project                小程序前端
  ├─components           业务功能组件
    ├─login              登录组件
      ├─index.wxss
      ├─index.wxml
      ├─index.js
  ├─pages                小程序页面

定义component

/components/login/index.js

module.exports = {
  // 组件名
  // 也可以不填，不填写会用`components/X/index.js`中的X命名
  name: "login",

  // 组件私有数据
  data: {
    item: [1, 2, 3]
  },

  // 组件属性
  // 可以预先定义默认值
  // 也可以外部传入覆盖默认值
  props: {
    text: "start"
  },

  // 当组件被加载
  onLoad() {
    this.setData({
      is_loaded: true
    })
  },
  // 当组件被卸载
  onUnload() {
    this.setData({
      is_unloaded: true
    })
  },

  // 组件私有方法
  methods: {
    getMsg() {
      ...
    },
    sendMsg() {
      ...
    }
  },

  // 其他
  ....
}

JS中注册component

/components/grabRedPacket/index.js

Page({
  data: {
   state: 1
  },
  components: {
   login: {
     text: "start from parent",
     onLogin() {
     	  ...
     }
   }
  },
  onShow() {
    ...
  }
  ...
})

WXML中引入component

/components/grabRedPacket/index.wxml 注意 template 便签中的两处 data需要固定写 {{...componentName}}

<import src='../../components/login/index.wxml'/>

<view>
  <template is="login" data="{{...login}}"></template>
</view>

app.wxss中引入component

/app.wxss

@import "../../components/login/index.wxss";

命名规范 组件最外层的className用双下划线开头的命名空间，如：__login。

API

Page依赖组件

每次组件被依赖，都会实例化(new)一个Component，防止被多次依赖不停修改。

Page的children

每个Page如果依赖组件，都有一个children属性，组件的集合。

Page({
  components: {
    login: {}
  },
  onShow() {
    console.log(this.children) // {login: ....}
  }
})

组件的parent方法

components/login/index.js

module.exports = {
  data: {
    text: "start"
  },
  props: {
    ...
  },
  attached() {
    console.log(this.parent) // Page
  }
}

pages/index/index.js

module.exports = {
  data: {}
  components: {
    login: {
      ...
    }
  }
}

组件的setData方法

每个被实例化的组件都有自己的setData方法，只能设置自身的data，不能改变父级Page的data，如：

Page({
  components: {
    login: {}
  },
  onShow() {
    this.children.login.setData({
      text: "start"
    })
  }
})

Page的data

Page的data结构：

data: {
  // Page自身的data
  state: "index",
  // 组件的data
  login: {
    text: "state"
  },
  another_component: {
    text: "state"
  }
}

注意

不管是 page 的 data 或是 component 的 data，都不要出现和组件名一样的字段，例如：存在一个叫banner的组件，那么都不要存在如下的data结构：

Page{
	data: {
	  banner: "...."
  }
}

因为banner字段是留给组件的，不要自定义它，否则会被组件data覆盖。