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

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

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代码

 1 var p = requirePlugin("myPlugin");
 2 Page({
 3   data: {
 4     show: false,
 5     ReachBottom: 0,
 6     PullDown: 0,
 7   },
 8
 9   onLoad: function () {
10     var that = this;
11     that.setData({
12       app_key: 'e31vry7y2j',
13       class_id:42,
14       ident: '',//article_1
15       wz_type: 'find',
16       show:true
17     })
18     var interval = setInterval(function () {
19       var arr = p.arr['article_' + that.data.app_key],
20       i=0;i++;
21       if (arr || i>10) {
22         clearInterval(interval);
23         wx.setNavigationBarTitle({
24           title: p.arr['article_' + that.data.app_key] ? p.arr['article_' + that.data.app_key] : '列表'
25         })
26       }
27     }.bind(this), 1000);
28   },
29   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   /**
37   * 下拉刷新
38   */
39   onPullDownRefresh: function () {
40     this.setData({
41       PullDown: this.data.PullDown + 1
42     })
43     wx.stopPullDownRefresh();
44   },
45   /**
46    *上拉加载
47    */
48   onReachBottom: function () {
49     this.setData({
50       ReachBottom: this.data.ReachBottom + 1
51     })
52   },
53 })

.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即可根据上面的参数来调取文章详情的接口

转载于:https://www.cnblogs.com/mverting/p/9051817.html

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

微信小程序两个页面跳转，传值
微信小程序两个页面跳转,传值在小程序界面,需要点击后跳转界面并且传递一个值. 具体实现如下:首先在wxml界面需要绑定事件,绑定需要传的值 a.wxml `<view bindtap=&quo ...
小程序内嵌h5页面分享_微信小程序webview内页面分享
因为项目原因,之前在微信小程序内部使用 webview 嵌套了 h5 页面,现在要添加一个新的功能,用户在哪个页面进行了分享,被分享的用户从链接进来就跳转到哪个分享页面. 先了解一下 web-view ...
微信小程序webview内页面分享
因为项目原因,之前在微信小程序内部使用 webview 嵌套了 h5 页面,现在要添加一个新的功能,用户在哪个页面进行了分享,被分享的用户从链接进来就跳转到哪个分享页面. 先了解一下 web-view ...
微信小程序系列3——页面跳转详解
前言首先,微信页面跳转的是一个页面栈进栈出栈的过程,也可以简单的理解对页面跳转的操作就是一个栈的操作. 微信小程序主要一下两类样式的跳转(JS.WXML控件): JS控制的跳转: navigat ...
【微信小程序】使用页面跳转并携带多个特定参数
前言在我们项目的搭建时常常会用到页面跳转,在微信小程序中也支持多个跳转类型.如(wx.switchTab\wx.reLauch\wx.redirectTo\wx.navigateTo\wx.navi ...
【微信小程序】在页面跳转时如何进行页面导航
1. 什么是页面导航页面导航指的是页面之间的相互跳转.例如,浏览器中实现页面导航的方式有如下两种: ① a链接 ② location.href 2. 小程序中实现页面导航的两种方式 ① 声明式导航 ...
微信小程序事件和页面跳转
一.页面跳转 1.非TabBar页面一个小程序拥有多个页面,我们通过wx.navigateTo进入一个新的页面我们通过下边点击事件实现页面跳转进行代码实现及参考 wx.navigateBack() ...
微信小程序中的页面跳转（通过点击按钮、调用方法的形式）
页面跳转用的多吧.tabBar的空间有限.通过路由的方式跳转时Vue中常用的方式.小程序采用类似的做法. – 这里通过给按钮绑定点击事件.调用方法.方法中实现页面跳转.(其它方式暂不考虑) 1.效果 ...
【微信小程序】实现页面跳转功能

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

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

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

最新文章

热门文章