小程序页面间数据传输模板

news/2024/7/20 3:23:23 标签: 小程序, 微信小程序, 前端

小程序数据传输

  • 缓存传输数据
  • get方式传参
  • 全局变量传参
    • index页面
    • test页面
    • 全局变量

缓存传输数据

get方式传参

全局变量传参

index页面

index.wxml

<view>
  <input type="text" name="username" placeholder="请输入内容" bindinput="getinput"/js>
  <button bindtap="click1">通过缓存传输数据到test页面</button>
  <button bindtap="click2">通过get方式传输数据到test页面</button>
  <button bindtap="click3">通过全局变量传输数据到test页面</button>
</view>

index.js

const app = getApp()
Page({
  data: {
    name:"",
  },

  click1(){
    var name1 =  this.data.name;
    wx.setStorageSync('name',name1);
    wx.reLaunch({
      url: '/pages/test/test',
    })
  },

  click2(){
    var name2 = this.data.name;
    wx.reLaunch({
      url: '/pages/test/test?name='+name2,
    })
  },

  click3(){
    var name3 = this.data.name;
    app.globalData.name = name3;
    wx.reLaunch({
      url: '/pages/test/test',
    })
  },

  getinput(e){
    this.setData({
      name:e.detail.value
    })
  },

})


test页面

test.wxml

<view>
  <text>跳转页面</text>
  <view>
    接收由Page页面传输过来的数据
  </view>
  <view>
    <view>方式一:{{name1}}</view>
    <view>方式二:{{name2}}</view>
    <view>方式三:{{name3}}</view>
  </view>
</view>

test.js

// pages/test/test.js
const app = getApp()
Page({
  /**
   * 页面的初始数据
   */
  data: {
    name1:"",
    name2:"",
    name3:""
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    console.log(options);
    var name1 = wx.getStorageSync('name');
    this.setData({
      name2:options.name,
      name3:app.globalData.name,
      name1
    })
  },

})

全局变量

app.js

  globalData: {
    userInfo: null,
    name:"jack"
  }

http://www.niftyadmin.cn/n/912874.html

相关文章

各种“Phone”辈出 购置裸机或更划算

明天不日&#xff0c;深圳的手机市场正演出一场名为“Phone”的大戏&#xff0c;但主角不但要iPhone了。联想“乐Phone”热卖、挪动多款新的“OPhone”蓄势待发。中国联公则在3月1日高调推出了具有自主常识产权的智能操纵体系的“沃Phone”&#xff0c;华为、再起也已准备推出响…

Operational Amplifiers 知识整理

1. 关于供电 https://ezchina.analog.com/thread/11710 需要特别指出的是输入和输出不一定都能够承受Rail-To-Rail 的电压。虽然器件被指明是轨至轨&#xff08;Rail-To-Rail&#xff09;的&#xff0c;如果运放的输出或者输入不支持轨至轨&#xff0c;接近输入或者接近输出电压…

云技术的思想领袖:与BitRock的CEO Erica Brescia 的谈话

公告 &#xff1a;本博客为微软云计算中文博客 的镜像博客。 部分文章因为博客兼容性问题 &#xff0c;会影响阅读体验 。如遇此情况&#xff0c;请访问 原博客 。 Erica Brescia是BitRock公司的CEO&#xff0c;一个多平台软件部署自动化提供商。浏览BitNami.or网页…

SpringBoot初体验

SpringBoot初体验创建一个maven工程引入springboot依赖主程序类、主入口类Controller类pom.xml文件导入依赖application.properties启动项目网页访问创建一个maven工程 引入springboot依赖 在pom.xml中引入 <parent><groupId>org.springframework.boot</grou…

android studio 2018.4.16 intent

setClass相当于是对组建名&#xff08;compontent&#xff09;封装了 action_call 拨打电话&#xff0c;同时需要在manifest中添加权限 添加发送短信 打开百度网页 播放音频 转载于:https://www.cnblogs.com/aliceluorong/p/8854828.html

System.ArgumentException: 另一个SqlParameterCollection中已包含SqlParameter。

一般情况下&#xff0c;我们定义的一个SqlParameter参数数组&#xff0c;如&#xff1a; SqlParameter[] parms { new SqlParameter("DateTime1", dtBegin), new SqlParameter("DateTime2", dtEnd) …

Spring初体验之IOC

Spring初体验之IOCIOC原理xml方式基于xml创建对象基于xml实例化对象&#xff08;注入属性&#xff09;基于xml调用对象基于xml注入集合属性xml自动装配基于xml连接数据库注解方式基于注解创建对象基于注解实例化对象&#xff08;注入属性&#xff09;完全注解开发IOC 原理 sp…

UPDATE SELECT OUTPUT

-- 定义临时表变量&#xff0c;用于 output into 使用 DECLARE VarOrderStatus table ( OrderNo nvarchar(50) NULL) -- update 表UPDATE Order_StatusSET Order_Status.QueryTakeOut 1,Order_Status.QueryCount Order_Status.QueryCount1 OUTPUT INSERTED.OrderNo -- output…