微信小程序 详解页面跳转与返回并回传数据

发布时间:2019-08-17  栏目:计算机教程  评论:0 Comments

微信小程序 详解页面跳转与返回并回传数据

在小程序开发的过程,经常要需要这个页面输入的数据,在下一个页面中进行取值赋值。

A页面:

比如:

.wxml文件

美高梅娱乐场网站 1

<view class="flex-wrp">
    <text style="width: 32%;">选择城市</text>
    <input style="width: 68%;" type="text" bindtap="city" placeholder="请选择城市" value="{{cityName}}"/>
   </view>

美高梅娱乐场网站 2

.js文件

在A页面input输入框,输入电话号码,点击添加。需要在B页面电话区域中,显示刚刚输入的电话号码。

Page({
 data: {
  cityName:"深圳"  #用来回传的关键字,默认深圳
 },
 city: function(e){
  wx.navigateTo({
    url: '../city/city'
  })
 }

})

因为这是两个页面,就需要先存储,再取值。微信小程序提供了数据存储的API,wx.setStorage(OBJECT)
可以将数据存储在本地缓存中指定的 key 中,如果重复会覆盖掉原来该 key
对应的内容。

A页面跳转B页面之后返回:

思路是,在A页面,使用bindinput获取input输入的值,赋值给一个变量(自定义),点击添加按钮时,如果变量不为空,将变量的值存储在本地缓存中,在B页面,使用wx.getStorage(OBJECT) 方法取值;

cityNameClick: function (event) {
  var cityName = event.currentTarget.dataset.cityname;
  console.log(cityName);

  var pages = getCurrentPages();
  var currPage = pages[pages.length - 1];  //当前页面
  var prevPage = pages[pages.length - 2]; //上一个页面

  //直接调用上一个页面的setData()方法,把数据存到上一个页面中去
  prevPage.setData({
   cityName: cityName
  })

  wx.navigateBack();
 },

ps : 源代码在页面底部

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

代码如下:

您可能感兴趣的文章:

美高梅娱乐场网站 3

对input输入框,绑定事件bindinput=”bindKeyInput” ,设置value=”{{inputValue}}”
,因为电话号码为数字,设置type=”number”
。对按钮添加点击事件bindtap=”addbtn”

在JS文件中添加代码

美高梅娱乐场网站 4

B页面代码

美高梅娱乐场网站 5

在JS文件中,声明变量addtel。在页面切换过来的时候,取出我们刚存储的值,赋值给变量addtel。在需要显示电话号码的地方,用变量来接收。

在JS文件中添加代码

留下评论

网站地图xml地图