小程序界面如何传参,另一界面如何接收的方法, 如何获取小程序中data参数的值

这篇具有很好参考价值的文章主要介绍了小程序界面如何传参,另一界面如何接收的方法, 如何获取小程序中data参数的值。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

A界面 WXML 示例


<view class="">

  <button bindtap="onTiaozhuan">跳转界面按钮</button>

</view>

A界面 js 示例

      Page({
             data: {
			    pro_src: '/statics/img/25431.jpg'
			  },
            
			onTiaozhuan() {	
			    // 获取data中的图片路径值
				const pro_src = this.data.pro_src;
				console.log("跳转界面传参的图片路径========"+pro_src);   
             //跳转到分享页
               wx.navigateTo({
                 url: '/pages/share/share?src='+ psrc
              })
          }})

B界面 WXML 示例


<view class="demo-wrap">

   <image class="section__ctn" src="https://www.pwxvr.com/wave/{{pro_src}}"></image>

</view>

B界面 WXSS 示例


		.demo-wrap {
		  position: absolute;
		  left: 0;
		  top: 0;
		  width: 100%;
		  height: 100%;
		}
		.section__ctn{
		  width: 100%;
		  /* height: 100%; */
		  height:100%
		}


B界面 js 示例

      Page({
              /**
			   * 页面的初始数据
			   */
			  data: {
			    pro_src: ''
			  },
             /**
			   * 生命周期函数--监听页面加载
			   */
			  onLoad(options) {
			
			    console.log('pro_src=======', options.src)//接收 获取到传过来的图片路径
			   
			   // let that = this;
			    this.setData({
			      pro_src: options.src
			    })
			  
			 
              
			  },




       })

文章来源地址https://www.toymoban.com/news/detail-852747.html

到了这里,关于小程序界面如何传参,另一界面如何接收的方法, 如何获取小程序中data参数的值的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 如何获取data中的值?如何取出,存储数据?跳转外部链接?与非本机联调?修改头部标题?动态更改样式?动态获取设备宽高?(微信小程序)

    工具:微信开发者工具 1.如何获取data中的值? 使用 this.data. 2.如何修改data中的值?使用 this.setData({key: value}),其中key为data中修改的数据,value为要修改的值 3.如何存储数据? 1.简单数据wx.setStorage({ key: ‘key’,data: value} 2.对象类数据wx.setStorage({ key: ‘key’,data: {}} 4.跳转外部

    2024年02月10日
    浏览(61)
  • 使用postman测试接口的时候,遇到form-data类型如何传参

    formData里面存储的数据形式,一对key/value组成一条数据,key是唯一的,一个key可能对应多个value json常用的格式 1.数组方式 [ ] 2.对象方式 { }

    2024年02月11日
    浏览(48)
  • ros中常见问题处理:延迟问题解决方法、订阅的数据感觉比发布的数据要多;如果没有正在接收消息,那么状态如何获取?

    在ROS中,消息的发布和订阅是异步的,也就是说,当你调用pub.publish(output_msg)发布消息时,该函数会立即返回,并不会等待所有订阅者接收消息。因此,如果你的程序出现延迟,可能是由于某些原因导致消息被堵塞或丢失。 以下是几种可能导致延迟的原因和解决方法: 1,消

    2024年02月06日
    浏览(39)
  • uniapp微信小程序 页面跳转传参(uni.switchTab传参无法获取,uni.reLaunch传参可以获取)

      因为是tab页面,我首先想到的就是通过:uni.switchTab进行页面跳转。 代码如下: 然后在首页的onShow生命周期函数中进行监听路由参数。 代码如下: 结果uni.switchTab跳转的页面是不能够将路由参数传递到页面中的。  这样就可以拿到路由中的参数了。  这样问题就解决了。

    2024年02月10日
    浏览(60)
  • Python 实现http server接收mutipart/form-data文件 方法1

    PostMan生成Python 代码: 代码基本功能 :实现将客户端发送的文件转发到本地。 代码中的打印 :为了调试方便代码中增加了一些关于boudary的打印。 代码中的自定义字段 :代码中的 ‘file’ 就是postman客户端请求中的文件名称。

    2024年02月07日
    浏览(42)
  • 如何使用useNavigate 进行路由的跳转以及传参,并且获取参数。

    本文章主要是讲述如何通过 useNavigate携带参数并在对应组件进行接收。 提示:以下是本篇文章正文内容,下面案例可供参考 一定一定要在App组件外面包裹一层router,比如BrowerRouter 获取Params参数使用useParams 获取search参数使用useSearchParams 使用useLocation获取search参数 不同的路由

    2024年02月12日
    浏览(49)
  • 简述data-属性的用法(如何设置,如何获取),有何优势?

    (1)data-定义 data- 属性是全局属性,是一类被称为 自定义数据属性 的属性,它能让我们在所有html元素上嵌入自定义数据属性的能 力,并且通过脚本在HTML和DOM之间实现专有数据交换。 (2)data-用法: 属性名不应该包含任何大写字母,并且在前缀 \\\"data-\\\" 之后必须有至少一个字符

    2024年02月16日
    浏览(41)
  • 小程序页面路由传参的方法?

    在小程序中,可以使用页面路由传递参数。有以下几种方式可以实现: 通过 URL 参数传递:在跳转到目标页面时,可以在 URL 中添加参数。例如: 在目标页面的 onLoad 方法中可以通过 options 参数获取传递的参数: 通过全局变量传递:可以通过小程序的全局变量来传递参数。在

    2024年01月17日
    浏览(48)
  • requests之post请求data传参和json传参区别

    在一次接口post测试请求传参异常的记录 传输到后台服务器报了异常 显而易见我的请求头的content-type类型有异常了,但我明明传的是application/json为什么给我转成了另外的格式呢? 在解释之前先提一下 httpbin.org 这个网站,这个网站的介绍是 A simple HTTP Request Response Service. ,简

    2024年02月10日
    浏览(49)
  • 微信小程序跳转传参的方法

    目的: 带着第一个页面的id,传到第二个页面,实现同一个页面,点击不同商品显示对应的数据 首先在第一个页面的js文件中写好接口 随后在wxml中写上点击事件,注意这个 data-id=\\\"{{item.id}}\\\" 随后在写上点击事件 先console一个e 看需要拿到什么数据  console的结果是 currentTarget下

    2024年02月06日
    浏览(52)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包