微信小程序插件内页面跳转和参数传递(转)
在此以插件开发中文章列表跳传文章详情为例。
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即可根据上面的参数来调取文章详情的接口
微信小程序插件内页面跳转和参数传递(转)的更多相关文章
- 微信小程序插件内页面跳转和参数传递
在此以插件开发中文章列表跳传文章详情为例. 1.首先在插件中的文章列表页面wxml中绑定跳转事件. bindtap='url' data-id="{{item.article_id}}&qu ...
- 微信小程序之----navigator页面跳转
navigator navigator跳转页面样式分为两种一种是左上角带返回按钮跳转到新的页面,另一种不带即在本页跳转,通过控制redirect属性 .js <view> <navi ...
- 【微信小程序】Page页面跳转(路由/返回)并传参
页面跳转的方法参考官方文档: https://mp.weixin.qq.com/debug/wxadoc/dev/framework/app-service/route.html 问题:使用wx.na ...
- 微信小程序开发之页面跳转并携带参数
接口: wx.navigateTo({url:......}) 保留当前页面,跳转到应用内指定URL页面,导航栏左上角有返回按钮 wx.redirecTo({url:.....}) 关 ...
- 微信小程序插件 - 开发教程
昨天(2018.3.13),微信小程序发布了重大功能更新,支持插件的使用和开发,个人预计,不超过2个月,优质服务的插件将会如雨后春笋般涌现. 这篇文章,我将会带大家,从0开始,学习如何开发和使用插件. ...
- 完整微信小程序授权登录页面教程
完整微信小程序授权登录页面教程 1.前言 微信官方对getUserInfo接口做了修改,授权窗口无法直接弹出,而取而代之是需要创建一个button,将其open-type属性绑定getUseInfo方 ...
- Java Web项目,Android和微信小程序的初始页面配置
Java Web项目 我们在Eclipse里开了Java Web项目之后,Run As Tomcat或者Apache服务器,本地运行,如果直接用http://localhost:8080访问项目,会发 ...
- (十二)微信小程序实现登陆页面+登陆逻辑
微信小程序实现登陆页面 实现上面两个页面 第一个页面 <view> <!-- 上侧部分 --> <view class="top-view"> ...
- 【微信】微信小程序 应用内的页面跳转在添加了tab以后就跳转不成功的问题解决
在微信小程序中,本来应用页面内绑定在按钮上跳转页面可以成功,但是将页面添加在tab以后就不能实现跳转了 原本代码如下: //事件处理函数 bindViewTap: function() { wx.na ...
随机推荐
- Python WSGI开发随笔
本文记录学习WSGI时的一些知识点,值得后续学习中注意. wsgi应用接口只要是一个可调用的对象就行,这个可调用的对象需要: 1. 接受两个位置参数: a. 包含CGI形式变量的字典: b. 应用调用 ...
- Chrome Adobe Flash Player 因过期而 阻止
百度搜索重装不管用 作者:胡中元链接:https://www.zhihu.com/question/32223811/answer/60456561来源:知乎著作权归作者所有.商业转载请联系作者获得授 ...
- phd文献阅读日志-博一上学期
为了记住并提醒自己阅读文献,进行了记录(这些论文都是我看过理解的),论文一直在更新中. 博一上学期: 1.week 6,2017.10.16 2014-Automatic Semantic Model ...
- windows 找不到文件'igfxHK.exe'
现象:开机时windows报:windows 找不到文件'igfxHK.exe' 解决办法:win+r 输入services.msc 进入服务管理, 找到服务名称为: Intel(R) HD Gr ...
- UIView - CAGradientLayer
CAGradientLayer *layer = [[CAGradientLayer alloc] init]; layer.frame = self.bounds; //渐变转折点 layer.lo ...
- 通过tarball形式安装HBASE Cluster(CDH5.0.2)——HBASE 真分布式集群配置
一.应该先配置好zookeeper并成功启动,否则hbase无法启动 二.配置HBASE集群 1,配置hbase-env.sh,下面是最少配置项目 [hadoop@zk1 conf]$ vim hba ...
- SCXcodeSwitchExpander自动填充switch语句下枚举类型case
下载地址:https://github.com/stefanceriu/SCXcodeSwitchExpander 跟VVDocumenter规范注释生成器的安装方式一样: 下载开源工程在Xcode重 ...
- 禁止页面内按F5键进行刷新(扩展知识:禁止复制信息内容)
禁止页面内按F5键进行刷新: //禁止页面内按F5键进行刷新 function f_DisableF5Refresh(event) { var e = event || window.event; v ...
- 【12月06日】A股全市场情绪指标整理分析
1. A股全市场的股权质押比例 2018年11月30日,A股全市场,质押股数占全市场总股本数比:9.997%,最近2周出现了3.2%的轻微回落.同历史时期相比,仍然处于高位. 2. A股全市场的解禁市 ...
- Fade out transition effect using CSS3
摘要: css3已经被应用到很多网站了,对于创建动态交互的网站是非常有益的.今天就分享一个使用transition实现的鼠标悬停淡阴淡出的效果. 代码: <!DOCTYPE html> & ...