Solutions and methods for componentizing WeChat mini programs-Mini Program Development-php.cn

This article mainly shares with you the solution ideas and methods of componentization of WeChat mini programs. Starting from mini program basic library version 1.6.3, mini programs support simple component programming. To check the version of the mini program basic library you are using, you can click Details on the right side of the developer tools to view: the most basic components.

The component of the mini program is actually a directory. The directory needs to contain 4 files:

xxx.json

xxx.wxml

xxx.wxss

xxx.js

Declare a component

First you need to make a custom component declaration in the json file (set the component field to true to enable this group The file is set as a custom component)

{
"component": true
}

Copy after login

Secondly, in the json file of the page where the component is to be introduced, make a reference statement

{
"usingComponents": {
//自定义的组件名称     ： 组件路径，注意是相对路径，不能是绝对路径  
"component-tag-name": "path/to/the/custom/component"
}
}

Copy after login

In this way, it can be used on the main page.

Compared with the introduction of vue components, the mini program solution is more concise. The introduction of vue components requires import and registration in components at the same time. The components of the mini program only need to be registered in .json before they can be used in wxml.

Using slot

Same as vue, small programs also have the concept of slot.

Single slot

You can provide a node in the component template, which is used to carry the child nodes provided when the component is referenced.

// 主页面内，<addlike>是组件
<addlike item="item" my_properties="sssss">
<text>我是被slot插入的文本</text>
</addlike>
// addlike 组件
<view class="container">
<view>hello, 这里是组件</view>
<view>hello, {{my_properties}}</view>
<slot></slot>
</view>
// 渲染后
<view class="container">
<view>hello, 这里是组件</view>
<view>hello, {{my_properties}}</view>
<text>我是被slot插入的文本</text>
</view>

Copy after login

Multiple slots

If you need to use multiple slots in the component, you need to declare and enable it in the component js:

Component({
 options: {
   multipleSlots: true // 在组件定义时的选项中启用多slot支持
},
 properties: { /* ... */ },
 methods: { /* ... */ }
})

Copy after login

Use:

// 主页面
<addlike item="item" my_properties="sssss">
// 在普通的元素上加入 slot 属性，指定slotname, 就可以变成子元素的slot了
<text slot="slot1">我是被slot1插入的文本</text>
<text slot="slot2">我是被slot2插入的文本</text>
</addlike>

// 子页面
<view class="container">
<view>hello, 这里是组件</view>
<view>hello, {{my_properties}}</view>
<slot name="slot1"></slot>
<slot name="slot2"></slot>
</view>

Copy after login

Component constructor

As we just said, a component should include four files: js, wxml, wxss, and json. wxml is equivalent to HTML, wxss is equivalent to css, so what should be written in js?

In the case provided by WeChat official:

Component({
 behaviors: [],
 properties: {
},
 data: {}, // 私有数据，可用于模版渲染
// 生命周期函数，可以为函数，或一个在methods段中定义的方法名
 attached: function(){},
 moved: function(){},
 detached: function(){},
 methods: {
   onMyButtonTap: function(){
},
   _myPrivateMethod: function(){
},
   _propertyChange: function(newVal, oldVal) {
}
}
})

Copy after login

A Component constructor is called in it. The Component constructor can be used to define components. When calling the Component constructor, you can specify the properties, data, methods, etc. of the component. What can be placed in the specific Component is as follows:

Solutions and methods for componentizing WeChat mini programs

Component and data communication

Componentization must involve data communication. In order to solve the problem of data For maintenance issues between components, vue, react, and angular have different solutions. The solution of mini program is much simpler.

The main page passes in data to the component

Properties are equivalent to vue's props and are the entrance to pass in external data.

// 主页面使用组件
<a add_like="{{add_like}}">
</a>
// 组件a.js 内
Component({
   properties:{
       add_like:{
           type:Array,
           value:[],
           observer:function(){
}
}
}
})

Copy after login

Note: The incoming data, whether it is a simple data type or a reference type, is the same as value copying (it is different from the description in the Red Book that js function parameters are passed in as value copying, Hongbao The meaning in the book is: simple data types directly copy values, and reference types copy references. That is to say, modifying the properties of the parameter object within the function will affect the properties of the object outside the function).

If it is Vue's props, it can be synchronized through .sync. In the mini program sub-component, calling this.setData() to modify the data in the parent component will not affect the data in the parent component. , that is to say, the modification of the child component's property seems to have nothing to do with the parent component. So, if you want to modify the data of the parent component in the child component, or even modify the data in the sibling component, is there a simple way? The following will talk about

components sending data to the main page

Similar to vue, the main form of interaction between components is custom events.

The component triggers custom events through this.triggerEvent(), and the main page receives custom events through bind:component_method="main_page_mehod" on the component.

Among them, the this.triggerEvent() method receives the custom event name and also receives two objects, eventDetail and eventOptions.

// 子组件触发自定义事件
ontap () {
// 所有要带到主页面的数据，都装在eventDetail里面
var eventDetail = {
name:&#39;sssssssss&#39;,
test:[1,2,3]
}
// 触发事件的选项 bubbles是否冒泡，composed是否可穿越组件边界，capturePhase 是否有捕获阶段
var eventOption = {
composed: true
}
this.triggerEvent(&#39;click_btn&#39;, eventDetail, eventOption)
}
// 主页面里面
main_page_ontap (eventDetail) {
   console.log(eventDetail)
// eventDetail
// changedTouches
// currentTarget
// target
// type
// ……
// detail   哈哈，所有的子组件的数据，都通过该参数的detail属性暴露出来
}

Copy after login

Data communication between components

Different from the vuex solution proposed by vue, the communication between components of the mini program is simple and compact. You can use custom events to communicate just like the main page communicates with components. Of course, a simpler and more convenient way is to use the relations provided by the mini program.

relations is a property in the Component constructor, as long as The relations properties of the two components are related, and they can capture each other, and can access each other and modify each other's properties just like modifying their own properties.

Component({
  relations:{
&#39;./path_to_b&#39;: { // &#39;./path_to_b&#39;是对方组件的相对路径
       type: &#39;child&#39;, //  type可选择两组：parent和child、ancestor和descendant
       linked:function(target){ } // 钩子函数，在组件linked时候被调用 target是组件的实例，
       linkChanged: function(target){}
       unlinked: function(target){}
}
},
})

Copy after login

For example, there are two components as shown in the code:

// 组件a slot 包含了组件b<a><b></b></a>

Copy after login

The relationship between them is as shown below:

Solutions and methods for componentizing WeChat mini programs

Two components capture instances of each other's components through this.getRelationNodes('./path_to_a') method. Now that you have obtained the instance of the other party's component, you can access the data on the other party's component, and you can also set the data on the other party's component, but you cannot call methods on the other party's component.

// 在a 组件中
Component({
  relations:{
&#39;./path_to_b&#39;: {
          type: &#39;child&#39;,
          linked:function(target){ } // target是组件b的实例，
          linkChanged: function(target){}
          unlinked: function(target){}
}
},
  methods:{
      test () {
var nodes = this.getRelationNodes(&#39;./path_to_b&#39;)
var component_b = nodes[0];

// 获取到b组件的数据
          console.log(component_b.data.name)

// 设置父组件的数据
// 这样的设置是无效的
this.setData({
              component_b.data.name:&#39;ss&#39;
})
// 需要调用对方组件的setData()方法来设置
          component_b.setData({
              name:&#39;ss&#39;
})
}
}
})

// 在b 组件里面
Component({
  relations:{
&#39;./path_to_a&#39;: { //注意！必须双方组件都声明relations属性
          type:&#39;parent&#39;
}
},
  data: {
      name: &#39;dudu&#39;
}
})
注意：1. 主页面使用组件的时候，不能有数字，比如说 <component_sub1> 或 <component_sub_1>，可以在主页面的json 里面设置一个新名字
{
"usingComponents":{
"test_component_subb": "../../../components/test_component_sub2/test_component_sub2"
}
}

Copy after login

2. The path in relations, for example here:

Solutions and methods for componentizing WeChat mini programs

is the real relative path of the other component, not the logical path between components.

3. If relations are not related, then this.getRelationNodes cannot obtain the other component

4. 本组件无法获取本组件的实例，使用this.getRelatonsNodes('./ path_to_self ') 会返回一个null

4. type 可以选择的 parent 、 child 、 ancestor 、 descendant

现在我们已经可以做到了两个组件之间的数据传递，那么如何在多个组件间传递数据呢？

3Solutions and methods for componentizing WeChat mini programs

如上图所示，同级的组件b 和同级的组件c , b 和 c 之间不可以直接获取，b可以获取到a， c 也可以获取到a，而a可以直接获取到 b 和 c。所以，如果想获取到兄弟元素，需要先获取到祖先节点，然后再通过祖先节点获取兄弟节点

我在组件b 里面，我需要先找到祖先组件a的实例，然后用祖先组件a的实例的getRelationNodes方法获取到组件c的实例。

看见没？恐怕我们又要写一大堆重复性的代码了。

幸好，微信小程序还提供了behavior 属性, 这个属性相当于 mixin，很容易理解的，是提高代码复用性的一种方法。

思路：

假设目前有三个组件，组件a, 组件b, 组件c，其中组件b和组件c是兄弟组件，组建a是b和c的兄弟组件。为了减少代码的重复性，我们把获取父组件的方法，和获取兄弟组件的方法封装一下，封装在 behavior 的 methods 中。只要是引入该behavior的组件，都可以便捷的调用方法。

实现：

新建一个behavior文件，命名无所谓，比如说relation_behavior.js

// 在 get_relation.js 文件里面
module.exports = Behavior({
methods:{
// 获取父组件实例的快捷方法
_parent () {
// 如果根据该路径获取到acestor组件为null，则说明this为ancesor
var parentNode = this.getRelationNodes(&#39;../record_item/record_item&#39;)
if (parentNode&&parentNode.length !== 0) {
return parentNode[0]
} else {
return this
}
},
// 获取兄弟组件实例的快捷方法
_sibling(name) {
var node = this._parent().getRelationNodes(`../${name}/${name}`)
if (node &&node.length > 0) {
return node[0]
}
}
}
})

Copy after login

然后在组件b, 和组件c 上引入该behavior，并且调用方法，获取父组件和兄弟组件的实例

// 组件b中
var relation_behavior = require(&#39;./path_to_relation_behavior&#39;)
Component({
   behaviors:[relation_behavior],
   methods:{
       test () {
// 获得父组件的实例
let parent = this._parent()
// 访问父组件的数据d
           console.log(parent.data.name)
// 修改父组件的数据
           parent.setData({
               name: &#39;test1&#39;
})
// 获得兄弟组件的实例
let sibling = this._sibling(&#39;c&#39;)
// 访问兄弟组件的数据
           console.log(sibling.data.name)
// 修改兄弟组件的数据
           sibling.setData({
               name:"test"
})
}
}
})
// 组件c中
var relation_behavior = require(&#39;./path_to_relation_behavior&#39;)
Component({
   behaviors:[relation_behavior],
   methods:{
       test () {
// 获得父组件的实例
let parent = this._parent()
// 访问父组件的数据d
           console.log(parent.data.name)
// 修改父组件的数据
           parent.setData({
               name: &#39;test1&#39;
})
// 获得兄弟组件的实例
let sibling = this._sibling(&#39;b&#39;)
// 访问兄弟组件的数据
           console.log(sibling.data.name)
// 修改兄弟组件的数据
           sibling.setData({
               name:"test"
})
}
}
})

Copy after login

同时需要注意，c和b两个组件，从relations属性的角度来说，是a的后代组件。

但是组件b和组件c 所处的作用域, 都是主页面的作用域，传入的property都是主页面的property，这样就保证了组件数据的灵活性。relations 像一个隐形的链子一样把一堆组件关联起来，关联起来的组件可以相互访问，修改对方的数据，但是每一个组件都可以从外界独立的获取数据。

看了这么多理论的东西，还是需要一个具体的场景来应用。

比如说，我们有个一个分享记录图片心情的页面，当用户点击【点赞】的按钮时候，该心情的记录点赞按钮会变红，下面的一栏位置会多出点赞人的名字。

Solutions and methods for componentizing WeChat mini programs

如果不通过组件化，很可能的做法是修改一个点赞按钮，然后遍历数据更新数据，最后所有记录列表的状态都会被重新渲染一遍。

如果是通过组件化拆分：把点赞的按钮封装为组件b, 下面点赞人的框封装为组件c, 每一个心情记录都是一个组件a

Solutions and methods for componentizing WeChat mini programs

下面是代码实现

// 在主页面内
<view wx:for=&#39;{{feed_item}}&#39;>
<a item=&#39;{{item}}&#39;>
<b></b>
<c></c>
</a>
<view>
// 在组件a内
var behavior_relation = require(&#39;../../relation_behavior.js)  //这里引入上文说的Behavior
Component({
   behaviors:[behavior_relation],
   relations:{
       &#39;../b/b&#39;:{
           type: &#39;descendant&#39;
       }
   }
})
// 在组件b内
var behavior_relation = require(&#39;../../relation_behavior.js) //这里引入上文说的Behavior
Component({
   behaviors:[behavior_relation]
   relations:{
&#39;../a/a&#39;:{
           type: &#39;ancestor&#39;
}
},
   data: {
       is_like: false //控制点赞图标的状态
},
   methods:{
// 当用户点赞的时候
       onClick () {
//  修改本组件的状态
this.setData({
               is_like: true
})
// 修改 c 组件的数据
this._sibling(&#39;c&#39;).setData({
               likeStr: this._sibling(&#39;c&#39;).data.likeStr + &#39;我&#39; 
})
}
}
})
// 在组件c内
var behavior_relation = require(&#39;../../relation_behavior.js)  //这里引入上文说的Behavior
Component({
   behaviors:[behavior_relation],
   relations:{
       &#39;../a/a&#39;:{
           type: &#39;ancestor&#39;
       }
   },
   data:{
       likeStr:&#39;晓红，小明&#39;
   }
})

Copy after login

这样，组件b 可以修改组件c中的数据。同时，组件b 和组件c 又可以通过 properties 和事件系统，和主页面保持独立的数据通信。