微信小程序插件內頁面跳轉和參數傳遞

在此以插件開發中文章列表跳傳文章詳情為例。

1、首先在插件中的文章列表頁面wxml中綁定跳轉事件。

bindtap='url' data-id="{{item.article_id}}"

2、在文章列表頁面js中接收事件，並觸發冒泡事件。

/**
    * 跳轉至詳情
    */
    url: function (e) {

      var eventDetail = {
        data: a.pdata(e).id,
      }
      // 觸發事件的選項 bubbles是否冒泡，composed是否可穿越組件邊界，capturePhase 是否有捕獲階段
      var eventOption = {
        composed: true
      }
      this.triggerEvent('click_btn', eventDetail, eventOption);
    },
  }

3、在插件調試的文章列表頁面里獲取插件層點擊事件

小程序的文章列表.js代碼

var p = requirePlugin("myPlugin");
Page({
  data: {
    show: false,
    ReachBottom: 0,
    PullDown: 0,
  },

  onLoad: function () {
    var that = this;
    that.setData({
      app_key: 'e31vry7y2j',
      class_id:42,
      ident: '',//article_1
      wz_type: 'find',
      show:true
    })
    var interval = setInterval(function () {
      var arr = p.arr['article_' + that.data.app_key],
      i=0;i++;
      if (arr || i>10) {
        clearInterval(interval);
        wx.setNavigationBarTitle({
          title: p.arr['article_' + that.data.app_key] ? p.arr['article_' + that.data.app_key] : '列表'
        }) 
      }
    }.bind(this), 1000);    
  },
 sub_fun: function (e) { 30  //console.log(e.detail.data); 31  var id = e.detail.data; 32  wx.navigateTo({ 33  url: '/pages/detail/index?id='+id, 34  }) 35  }, 36   /**
  * 下拉刷新
  */
  onPullDownRefresh: function () {
    this.setData({
      PullDown: this.data.PullDown + 1
    })
    wx.stopPullDownRefresh();
  },
  /**
   *上拉加載
   */
  onReachBottom: function () {
    this.setData({
      ReachBottom: this.data.ReachBottom + 1
    })
  },
})

.json代碼

{
  "navigationBarTitleText": "列表",
  "usingComponents": {
    "list": "plugin://myPlugin/article_list"
  }
}

.wxml代碼（bind:click_btn綁定插件層點擊事件，在頁面以sub_fun函數接收）

<view wx:if="{{show}}">
<list app_key="{{app_key}}" class_id="{{class_id}}" ident="{{ident}}" wz_type="{{wz_type}}" PullDown="{{PullDown}}" ReachBottom="{{ReachBottom}}"  bind:click_btn="sub_fun"/>
</view>

4、在頁面完成跳轉，跳到小程序的文章詳情后，再傳參給插件層的文章詳情

小程序的詳情頁主要是把參數傳到插件層（下面代碼中的s_id）

<view wx:if="{{show}}">
<article_detail s_id="{{id}}" app_key="{{app_key}}"  ident="{{ident}}"  PullDown="{{PullDown}}" bind:suport="suport" bind:click_btn="sub_fun"/>
</view>

5、在插件中的文章詳情內js中接收參數（用properties接收，並存在data中以供調用）

properties: {
    s_id: {
      type: String,
      value: '',
      observer: function (newVal, oldVal) {
         console.log('newVal:'+newVal)
        this.setData({ id: newVal })
        this.detail()
      }
    },

  },

關於Component構造器的使用方法（https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/component.html）

6、插件中的文章詳情中js即可根據上面的參數來調取文章詳情的接口