51dev.com IT技术开发者社区

51dev.com 技术开发者社区

微信小程序页面之间的参数传递,编辑完当前页面返回数据到上一页更新

IT技术学习阅读(616)2018-05-07 收藏0次评论

一:页面之间的参数传递

有两种方式进行页面传值

1.使用WXML中的导航控件navigator带参数

2.使用接口wx.redirectTo、wx.navigateTo 带参数

目标页面统一在onload事件的参数option取到相应的参数值

WXML中的导航控件navigator,设置url的中使用“ ? ”后就是定义参数

如下:定义参数(wxml页面) 

 

 

 

 

目标页面接收参数(js页面,通常会定义成页面局部变量来存储,以便其它地方可直接调用) 如下: 

 

 

接口wx.redirectTo、wx.navigateTo 带参数

在JS页面中执行跳转页面中直接加入参数 如: 

 

 

 

 

目标页面同样是在onload事件中的参数option可获得所传递的参数值 

 

 

二:模板使用

主要分为,先定义模板,后引用模板

注:模板是无法默认对应CSS样式的,如要配对使用CSS样式,有三种方法

a.在全局样式中定义,即app.wxss

b.在业务页面对应的.wxss样式定义

c.先在模板中定义对应的CSS样式,再在业务页面的.wxss文件中import进去

1.定义模板 

 

 

 

 

 

 

 

 

2.引用模板

先引入import 模板路径

再使用 is=""

传入数据 data="" 

 

 

 

 

3.定义模板CSS样式,业务页面引用 

 

 

 

 

明细: 

 

 

 

 

 

 

 

 

 

 

 

 

附加代码段:

WXSS:

@import "../../../template/wideRowDetail/wideRowDetail.wxss";
page{
background-color: #ffffff;
color: #000000;
}

WXML:

 src="../../../template/wideRowDetail/wideRowDetail.wxml" />
 is="wideRowDetail" data="{{dataitem}}">

JS :

var testData=require('../../../utils/testData');
Page({
data:{
dataitem:testData.teadata
},
onLoad:function(options){
// 生命周期函数--监听页面加载
this.setData({
dataitem:{
id:2,
description:"小罐茶 小罐茶组合装 茶叶礼品礼盒装八位大师八款作品",
price:100,
qty:50,
imgdata:[
{"imgurl":"http://www.51dev.com//FileUpload/news/201805/20180507102820271.jpg"},
{"imgurl":"http://www.51dev.com//FileUpload/news/201805/20180507102821756.jpg"},
{"imgurl":"http://www.51dev.com//FileUpload/news/201805/20180507102821292.jpg"}
],
imgDetail:[
{"imgurl":"http://www.51dev.com//FileUpload/news/201805/20180507102820271.jpg"},
{"imgurl":"http://www.51dev.com//FileUpload/news/201805/20180507102821756.jpg"},
{"imgurl":"http://www.51dev.com//FileUpload/news/201805/20180507102821292.jpg"}
]
}
});
}

三:编辑完当前页面返回数据到上一页更新

总共有三种方法

利用本地缓存,先存储再取出 
利用全局变量,先更新再取出 
利用页面栈更新,直接通过调用方法更新

假设有页面A,和页面B,页面A是通过wx.navigateTo跳转到页面B的(如果是使用wx.redirectTo,则第三种方法不适用)

本地缓存,在页面B中直接写入本地缓存,返回到页面A后再直接取出本地缓存数据

页面B:wx.setStorageSync('key',{data:allData});
页面A:var data = wx.getStorageSync('key');

全局变量,首先在App.js定义一个全局变量(g_var),在页面B中直接更新这个全局变量(g_var),返回到页面A后再直接取出此变量(g_var)更新。

App.js:

globalData:{
user:''
}
页面B:app.globalData.user='hello!';
页面A:var data=app.globalData.user;

页面栈,首先在页面A定义一个方法,然后在页面B中通过getCurrentPages 获取页面A的实例,再调用其方法直接进行更新数据。(注意页面A必须使用wx.navigateTo跳转到页面B,不能使用wx.redirectTo,这样会关闭上一个页面,导致页面B无法获取上一页Page实例。)

页面A:

Page({
data: {
nickname: ''
},
setData: function(name){
this.setData({
nickname: name
})
}
})

页面B:

Page({
edtinputname: function (e) {
var pagelist = getCurrentPages;
if(pagelist.length > 1){
//获取上一个页面实例对象
var prePage = pagelist[pagelist.length - 2];

 

以上就是微信小程序页面之间的参数传递,编辑完当前页面返回数据到上一页更新的全部内容。