微信小程序插件内页面跳转和参数传递

在此以插件开发中文章列表跳传文章详情为例。

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) {
     //console.log(e.detail.data);
     var id = e.detail.data;
     wx.navigateTo({
       url: '/pages/detail/index?id='+id,
     })
   },
   /**
   * 下拉刷新
   */
   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即可根据上面的参数来调取文章详情的接口