ミニプログラム使用コンポーネント/ミニプログラムコンポーネントパッケージ/ミニプログラムコンポーネントパス値

ミニプログラムの基本ライブラリのバージョン1.6.3以降、ミニプログラムは単純なコンポーネントプログラミングをサポートしています。開発者は、ページ内の機能モジュールをカスタムコンポーネントに抽象化して、別のページで再利用できるようにします。また、複雑なページを複数の低結合モジュールに分割して、コードのメンテナンスを支援することもできます。
コンポーネントの詳細は紹介しません詳細は公式ドキュメント
[https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/wxml-wxss.html] を参照してください

トピックに足を踏み入れる

コンポーネントを使用する手順

パッケージコンポーネント
親コンポーネントの紹介
親コンポーネントの呼び出し（親子通信）

1.コンポーネントのパッケージ

コンポーネントも4つのファイルです：xx.json、xx.js、xx.wxml、xx.wxss

カスタムコンポーネントを作成するには、まずjsonファイルでカスタムコンポーネントを宣言する必要があります（componentフィールドをtrueに設定して、このファイルのグループをカスタムコンポーネントとして設定します）。

/**
*组件中不使用组件
/
{
      "component": true,  // 这是一个组件
      "usingComponents": {}  // 是否使用组件---组件中依然可以继续使用组件
}

/**
* 组件中使用组件
* /
{
    "component": true,  // 这是一个组件
   	"usingComponents": {
        "warm-prompt": "/components/warm-prompt/warm-prompt" // 组件中还使用了warm-prompt组件
    }
}

次はJSファイルです

Component({
  properties: {
    /**
     * 这里定义的变量都是父组件传过来的， innerText是父组件传过来的字段名
     * type是传过来的数据格式，可以是 String，Number， array等等
     * value是默认值，例如果type是String时，value可以是 '' 空字符串， 也可以是 ‘hello’
     * 如果默认了hello，那么当父组件没传值时，innerText='Hhello'
     * /
    innerText: {
      type: String,
      value: 'default value',
      observer: function (newVal, oldVal, changedPath) {
    		/** 
    		* 属性被改变时执行的函数（可选），也可以写成在methods段中定义的方法名字符串
    		* 通常 newVal 就是新设置的数据， oldVal 是旧数据
    		* 这里通常进行父组件传值的接收
    		* 例如
    		* this.setData({
            *  specGroups: this.data.goodsDetail
            * })
    		* /
  	  }
    }
  },
  data: {
    // 这里是一些组件内部数据
    someData: {
		xxx: xxx,
	}
  },
  methods: {
    // 这里是一个演示向父组件传值的方法
    customMethod(event){
    	// 定义一个对象用于传给父组件
  		var dates= {
    		id: event.currentTarget.dataset.id,
    		num: event.currentTarget.dataset.num
  		} 
  		// 传给父级的方法
 		var setFunction = {} 
  		// 使用 triggerEvent 传递给父组件 指定事件名、detail对象和事件选项
  		this.triggerEvent('close', dates, setFunction )
		// 父组件将通过 close 拿到  dates 数据 以及 setFunctoin 方法 (setFuncton 是可选参数，可传也可不传)
	}
  }
})

HTMLファイルとwxssファイルは通常のページと同じように使用されます

コンポーネントについて話し終え、シンボルコンポーネントの使用について話します

まず、コンポーネントを使用するページのJSONファイルでコンポーネントを紹介します

{
    "usingComponents": {
        "warm-prompt": "/components/warm-prompt/warm-prompt" // 前面是使用的标签名，后面是组件的路径
    },
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "首页"
}

使用したいページでコンポーネントを使用する

/**
* showPrompt 是控制组件的显示/隐藏
* closePrompt 是接收组件传回来的close方法
* innerText是传给组件的值，(因为MVVM的开发方式，所以是可以动态更新修改的)
* 此处接收方法的应该是bindclose而不是close，使用格式：bind+自定义名称
* /
<warm-prompt wx:if="{
   
   {showPrompt}}" bindclose="closePrompt" innerText='{
   
   {innerText}}'></warm-prompt>

コンポーネントを使用するページのJSでパラメーターを受け取ります。

Page({

  /**
   * 页面的初始数据
   */
  data: {
   	someValue: []
  },

  // 当自定义组件使用 triggerEvent 来传值时触发函数
  closePrompt(event) {
    // 自定义组件触发事件时提供的detail对象，用来获取子组件传递来的数据
    var id = event.detail.id;
    var num = event.detail.num ;
    
    console.log('子组件传递来的数据 id:', id, '子组件传过来的数据num:',num);
    // 其他操作...
  }
})

これがコンポーネントの使用の終わりであり、次に注意すべきいくつかのポイント

詳細についてのご注意

注意すべきいくつかの詳細：

WXMLノードのラベル名には小文字、アンダースコア、アンダースコアの組み合わせしか使用できないため、カスタムコンポーネントのラベル名にはこれらの文字のみを含めることができます。
カスタムコンポーネントはカスタムコンポーネントを参照することもできます。参照方法は、ページがカスタムコンポーネントを参照する方法（usingComponentsフィールドを使用）に似ています。
カスタムコンポーネントとページが配置されているプロジェクトのルートディレクトリ名の前に「wx-」を付けることはできません。そうしないと、エラーが報告されます。

ページファイルでusingComponentsを使用するかどうかによって、ページのthisオブジェクトのプロトタイプが少し異なります。

	使用 usingComponents 页面的原型与不使用时不一致，即 Object.getPrototypeOf(this) 结果不同。
	使用 usingComponents 时会多一些方法，如 selectComponent 。 
	出于性能考虑，使用usingComponents 时， setData 内容不会被直接深复制，即 this.setData({ field: obj })后 
	this.data.field === obj 。（深复制会在这个值被组件间传递时发生。）