WeChat ミニ プログラムをコンポーネント化するためのソリューションと方法

この記事では、主に WeChat ミニ プログラムのコンポーネント化のソリューションのアイデアと方法について説明します。ミニ プログラムの基本ライブラリ バージョン 1.6.3 以降、ミニ プログラムは単純なコンポーネント プログラミングをサポートします。使用しているミニ プログラムの基本ライブラリのバージョンを確認するには、開発者ツールの右側にある [詳細] をクリックして、最も基本的なコンポーネントを表示します。

アプレットのコンポーネントは実際にはディレクトリであり、次の 4 つのファイルを含める必要があります:

xxx.json

xxx.wxml

xxx.wxss

xxx.js

まずコンポーネントを宣言します

json ファイルでカスタム コンポーネント宣言を作成します (この一連のファイルをカスタム コンポーネントとして設定するには、コンポーネント フィールドを true に設定します)

{
"component": true
}

次に、コンポーネントが導入されるページの json ファイルで、このような参照宣言

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

は、メインページで利用できます。

vue コンポーネントの導入と比較して、ミニプログラム ソリューションはよりシンプルです。 vue コンポーネントを導入するには、インポートとコンポーネントへの登録を同時に行う必要があります。ミニ プログラムのコンポーネントは、wxml で使用する前に .json に登録するだけで済みます。

スロットを使用する

vueと同じように、ミニプログラムにもスロットの概念があります。

単一のスロット

は、コンポーネントが参照されるときに提供される子ノードを運ぶために使用される、コンポーネント テンプレート内の ノードを提供できます。

// 主页面内，<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>

複数のスロット

コンポーネントで複数のスロットを使用する必要がある場合は、コンポーネント js で有効化を宣言する必要があります:

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

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>

コンポーネント コンストラクター

今、コンポーネントには以下を含める必要があると言いました。 js 、 wxml 、 wxss 、 json の 4 つのファイル。 wxmlはHTML、wxssはcssに相当しますが、jsでは何を書けばいいのでしょうか？

WeChat によって公式に提供されている場合:

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

はコンポーネント コンストラクターを呼び出します。 Component コンストラクターを使用してコンポーネントを定義する場合、コンポーネントのプロパティ、データ、メソッドなどを指定できます。特定のコンポーネントに配置できるものは次のとおりです。

コンポーネントとデータ通信

コンポーネント間のデータメンテナンスの問題を解決するには、vue、react、angular は別のコンポーネントである必要があります。解決。ミニ プログラムの解決策ははるかに簡単です。

メインページはコンポーネントにデータを渡します

プロパティはvueのpropsに相当し、外部データを渡すための入り口です。

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

注: 受信データは、単純データ型であろうと参照型であろうと、値のコピーと同じです (渡される js 関数のパラメーターが値のコピーであるという Red Book の説明とは異なります)。 Red Book での意味 はい: 単純なデータ型は値を直接コピーし、参照型は参照をコピーします。つまり、関数内でパラメーター オブジェクトのプロパティを変更すると、関数の外のオブジェクトのプロパティに影響します。

Vue の props の場合は、.sync を通じて同期できます。ミニ プログラムのサブコンポーネントでは、this.setData() を呼び出して親コンポーネントのデータを変更しても、親コンポーネントのデータには影響しません。つまり、子コンポーネントのプロパティの変更は親コンポーネントとは何の関係もないようです。では、子コンポーネントの親コンポーネントのデータを変更したい場合、または兄弟コンポーネントのデータを変更したい場合、簡単な方法はあるのでしょうか?

コンポーネントがメイン ページ

にデータを送信することについては以下で説明します。 vue と同様に、コンポーネント間の対話の主な形式はカスタム イベントです。

コンポーネントは this.triggerEvent() を通じてカスタム イベントをトリガーし、メイン ページはコンポーネントの binding:component_method="main_page_mehod" を通じてカスタム イベントを受け取ります。

そのうち、 this.triggerEvent() メソッドはカスタム イベント名を受け取り、eventDetail とeventOptions という 2 つのオブジェクトも受け取ります。

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

コンポーネント間のデータ通信

vueが提案するvuexソリューションとは異なり、ミニプログラムのコンポーネント間の通信はシンプルかつコンパクトです。メイン ページがコンポーネントと通信するのと同じように、カスタム イベントを使用して通信することもできます。もちろん、より簡単で便利な方法は、コンポーネント コンストラクターの属性である

関係を使用することです。 2 つのコンポーネント リレーション属性は関連付けられており、それら 2 つはお互いをキャプチャし、お互いにアクセスして、自分の属性を変更するのと同じように互いの属性を変更できます。

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

たとえば、コードに示されているように 2 つのコンポーネントがあります:

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

それらの間の関係は、以下の図に示されているとおりです:

2 つのコンポーネントは、this.getRelationNodes を通じて他のコンポーネントのインスタンスをキャプチャします。 (' ./path_to_a') メソッド。相手のコンポーネントのインスタンスを取得したので、相手のコンポーネントのデータにアクセスしたり、相手のコンポーネントにデータを設定したりすることはできますが、相手のコンポーネントのメソッドを呼び出すことはできません。

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

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

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

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

2. リレーション内のパス (例:

) は、コンポーネント間の論理パスではなく、他のコンポーネントの実際の相対パスです。

3. リレーションが関連付けられていない場合、this.getRelationNodes は他のコンポーネントを取得できません

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

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

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

如上图所示，同级的组件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('../record_item/record_item')
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]
}
}
}
})

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

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

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

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

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

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

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

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

下面是代码实现

// 在主页面内
<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;
   }
})

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

相关推荐：

微信小程序版2048小游戏

微信小程序实现流程进度功能实例分享

微信小程序实现上传头像详解

以上がWeChat ミニ プログラムをコンポーネント化するためのソリューションと方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。