メソッド呼び出しに使用されるアプレットカスタムマイクロチャネルコンポーネントとカスタムコンポーネント

　小さなプログラムを書くとき時々ページの内容が大きすぎる、より複雑なロジックで全てのページに書かれている場合は、それがコードのより複雑な、比較的貧しい可読性になり、コードは時間がかかることが後のメンテナンス、することは容易ではありません内部に単一のコンポーネントとしてパッケージ化機能の一部に出て、それがしばしばありページに類似カスタムコンポーネント、カスタムコンポーネントと言われているwxml テンプレート、wxss スタイルやJSファイルを、ページにカスタムコンポーネントを使用しますが。

　　たとえば、次のように私のカスタムアセンブリコードの構造は次のとおりです。

　　　　　　

　　私は、ファイルがカスタムコンポーネントによって作成されたMyComponentという、myComponent.wxmlファイルコード：　

<view class="inner">
  <Text>I am learning 微信小程序</Text>
</view>

　　

　　myComponent.jsファイルのコードです：

const app = getApp()
Component({
  properties: {
    // 这里定义了innerText属性，属性值可以在组件使用时指定
    innerText: {
      type: String,
      // value: '',
    }
  },
  data: {
    // 这里是一些组件内部数据
    someData: {}
  },
  methods: {
    customMethod(){
      console.log('hello world! I am learning 微信小程序')
    }
  }
})

 

　　コードのmyComponent.wxss一部を次のように

.inner{
  color:red
}

　　

　　今私はそれを行う方法を、ページ/インデックスファイルにカスタムアセンブリを使用したいですか？

　　1、myComponent.jsonファイルに次のコードを追加します。

{
  "component": true
}

　　

　　2は、カスタムコンポーネントを呼び出すために、このようなページ/インデックスファイルなどのカスタムコンポーネントファイルを、コールする必要が、あなたは、次のコードページ/インデックス/ index.jsonファイルを追加する必要があります。

{
  "usingComponents": {
    "myComponent": "../../components/myComponent/myComponent"   // 组件名以及组件所在路径
  }
}

　　

　　3、その後、myComponent.wxmlファイルでカスタムコンポーネントを使用することができ、

　　index.wxmlドキュメントのコードは次のとおりです。

<view>
    <myComponent id="myComponent"></myComponent>
</view>

　　次のようにカスタムコンポーネントと呼ばれるこの時間の後、効果は次のとおりです。

                      

　　4は、今便宜上、私はイベントを呼び出すために、ボタンをクリックすることで、ここで使用し、そうすることができるように方法でカスタムコンポーネントと呼ばれ、そのindex.wxmlファイルコードは次のようになります。

<view>
    <button bindtap="showComponent">组件调用</button>
    <myComponent id="myComponent"></myComponent>
</view>

　　

　5、myComponent.jsは、コードの一部としてファイル：

// pages/index/index.js
Page({
  /**
   * 页面的初始数据
   */
  data: {

  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    //  页面初次渲染完成后，使用选择器选择组件实例节点，返回匹配到组件实例对象
    this.myComponent = this.selectComponent('#myComponent')
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },
   showComponent: function () {
      let myComponent = this.myComponent
      myComponent.customMethod()  // 调用自定义组件中的方法
   }
})

　　

　　カスタムコンポーネントを呼び出すことができた後、今​​すぐボタンをクリックしてください。結果は以下の通りであります：

　　 

 

 

 

転載元：http://www.cnblogs.com/jf-67/