组件化开发

Author: coderwhy

app.js

@@ -0,0 +1,30 @@
+App({
+
+  /**
+   * 当小程序初始化完成时，会触发 onLaunch（全局只触发一次）
+   */
+  onLaunch: function () {
+    
+  },
+
+  /**
+   * 当小程序启动，或从后台进入前台显示，会触发 onShow
+   */
+  onShow: function (options) {
+    
+  },
+
+  /**
+   * 当小程序从前台进入后台，会触发 onHide
+   */
+  onHide: function () {
+    
+  },
+
+  /**
+   * 当小程序发生脚本错误，或者 api 调用失败时，会触发 onError 并带上错误信息
+   */
+  onError: function (msg) {
+    
+  }
+})

components/my-mslot/my-mslot.js

@@ -0,0 +1,80 @@
+// components/my-mslot/my-mslot.js
+Component({
+  // ----------- 让使用者可以给组件传入数据 --------------
+  properties: {
+    title: {
+      type: String,
+      value: '',
+      observer: function(newVal, oldVal) {
+
+      }
+    }
+  },
+
+
+  // ----------- 定义组件内部的初始化数据 --------------
+  data: {
+    counter: 0
+  },
+
+
+  // ----------- 用于定义组件内部的函数 --------------
+  methods: {
+    foo() {
+
+    }
+  },
+
+
+  // ----------- 定义组件的配置选项 --------------
+  // multipleSlots: 在使用多插槽时需要设置true
+  // styleIsolation: 设置样式的隔离方式
+  options: {
+    multipleSlots: true
+  },
+
+
+  // ----------- 外界给组件传入额外的样式 --------------
+  externalClasses: [],
+
+
+  // ----------- 可以监听properties/data的改变 --------------
+  observers: {
+    counter: function(newVal) {
+      console.log(newVal)
+    }
+  },
+
+  // ----------- 组件中监听生命周期函数 --------------
+  // 1.监听所在页面的生命周期
+  pageLifetimes: {
+    show() {
+      console.log('监听组件所在页面显示出来时')
+    },
+    hide() {
+      console.log('监听组件所在页面隐藏起来时')
+    },
+    resize() {
+      console.log('监听页面尺寸的改变')
+    }
+  },
+
+  // 2.监听组件本身的生命周期
+  lifetimes: {
+    created() {
+      console.log('组件被创建出来')
+    },
+    attached() {
+      console.log('组件被添加到页面')
+    },
+    ready() {
+      console.log('组件被渲染出来')
+    },
+    moved() {
+      console.log('组件被移动到另外一个节点')
+    },
+    detached() {
+      console.log('组件被移除掉')
+    }
+  }
+})

components/my-mslot/my-mslot.json

@@ -0,0 +1,4 @@
+{
+  "component": true,
+  "usingComponents": {}
+}

components/my-mslot/my-mslot.wxml

@@ -0,0 +1,6 @@
+<!--components/my-mslot/my-mslot.wxml-->
+<view>我是mslot组件的开始</view>
+<view class='slot1'><slot name="slot1"/></view>
+<view class='slot2'><slot name="slot2"/></view>
+<view class='slot3'><slot name="slot3"/></view>
+<view>我是mslot组件的结尾</view>

components/my-mslot/my-mslot.wxss

@@ -0,0 +1 @@
+/* components/my-mslot/my-mslot.wxss */

components/my-sel/my-sel.js

@@ -0,0 +1,26 @@
+// components/my-sel/my-sel.js
+Component({
+  /**
+   * 组件的属性列表
+   */
+  properties: {
+  },
+
+  /**
+   * 组件的初始数据
+   */
+  data: {
+    counter: 0
+  },
+
+  /**
+   * 组件的方法列表
+   */
+  methods: {
+    incrementCounter(num) {
+      this.setData({
+        counter: this.data.counter + num
+      })
+    }
+  }
+})

components/my-sel/my-sel.json

@@ -0,0 +1,4 @@
+{
+  "component": true,
+  "usingComponents": {}
+}

components/my-sel/my-sel.wxml

@@ -0,0 +1,2 @@
+<!--components/my-sel/my-sel.wxml-->
+<view>组件内的计数: {{counter}}</view>

components/my-sel/my-sel.wxss

@@ -0,0 +1 @@
+/* components/my-sel/my-sel.wxss */

components/my-slot/my-slot.js

@@ -0,0 +1,23 @@
+// components/my-slot/my-slot.js
+Component({
+  /**
+   * 组件的属性列表
+   */
+  properties: {
+
+  },
+
+  /**
+   * 组件的初始数据
+   */
+  data: {
+
+  },
+
+  /**
+   * 组件的方法列表
+   */
+  methods: {
+
+  }
+})