组件化开发1

Author: coderwhy

app.json

@@ -2,5 +2,9 @@
   "pages": [
     "pages/home/home",
     "pages/about/about"
-  ]
+  ],
+  "usingComponents": {
+    "my-cpn": "/components/my-cpn/my-cpn"
+  },
+  "sitemapLocation": "sitemap.json"
 }

components/cpn1/cpn1.js

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

components/cpn1/cpn1.json

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

components/cpn1/cpn1.wxml

@@ -0,0 +1,2 @@
+<!--components/cpn1/cpn1.wxml-->
+<view class='box'>我是cpn1</view>

components/cpn1/cpn1.wxss

@@ -0,0 +1,4 @@
+/* components/cpn1/cpn1.wxss */
+.box {
+  background: orange;
+}

components/my-cpn/my-cpn.js

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

components/my-cpn/my-cpn.json

@@ -0,0 +1,6 @@
+{
+  "component": true,
+  "usingComponents": {
+    "cpn1": "/components/cpn1/cpn1"
+  }
+}

components/my-cpn/my-cpn.wxml

@@ -0,0 +1,5 @@
+<!--components/my-cpn/my-cpn.wxml-->
+<view class='title'>{{title}}</view>
+<view class='content'>我是自定义组件的内容</view>
+<cpn1/>
+

components/my-cpn/my-cpn.wxss

@@ -0,0 +1,9 @@
+/* components/my-cpn/my-cpn.wxss */
+.title {
+  font-size: 40rpx;
+  font-weight: 700;
+}
+
+.content {
+  font-size: 30rpx;
+}

components/my-event/my-event.js

@@ -0,0 +1,9 @@
+// components/my-event/my-event.js
+Component({
+  methods: {
+    handleIncrement() {
+      // console.log('---------')
+      this.triggerEvent('increment', {name: 'why', age: 18}, {})
+    }
+  }
+})