当前位置:首页 > 编程教程 > javascript技术文章 > 小程序实现同页面取值的方法分析

微信小程序实现同页面取值的实例代码

  • 发布时间:
  • 作者:码农之家
  • 点击:82

这篇文章主要知识点是关于微信小程序、页面取值、微信小程序页面间传值与页面取值操作实例分析 的内容,如果大家想对相关知识点有系统深入的学习,可以参阅以下电子书

知晓程序:微信小程序入门指南
  • 类型:小程序开发大小:6.9 MB格式:PDF作者:知晓程序
立即下载

小程序实现同页面取值的方法分析

本文实例讲述了微信小程序实现同一页面取值的方法。分享给大家供大家参考,具体如下:

1.js里单个的值在wxml里取值方法:js里将该值定义为全局变量,在wxml里采用 {{ }}即可获取。

实例:

js里得值:

data{
schoolName:"清华大学"
}

wxml里获取:

<view class="texts">{{schoolName}}</view>

2.js里数组或是集合在wxml里的取值方法:js里将该集合或数组定义为全局变量,在wxml里采用for循环再采用 {{ }}即可获取。

实例:

data{
school:[
{ schoolName:"清华大学",
schoolAddress:"北京",
schoolTime:"1911"},
{ schoolName:"浙江大学",
schoolAddress:"浙江",
schoolTime:"1935"},
]
}

wxml里获取:

<view wx:for="{{school}}">
<view class="texts">{{item.schoolName}}</view>
<view class="texts">{{item.schoolAddress}}</view>
<view class="texts">{{item.schoolTime}}</view>
</view>

3.wxml的值在js里获取的方法:e.detail.value 或是e.target.dataset.值或是 e.currentTarget.dataset.值

实例1:

wxml里的值:

<view class="texts">
<input type="text" value="{{schoolName}}" bindinput="addSchoolName" placeholder="请输入学校名 如:上海大学" />
</view>

js里获取wxml里的值

addSchoolName:function (e) {
this.data.schoolName=e.detail.value
}

实例2:

wxml里的值:

<view class="texts">
<button data-item="{{item}}" data-as="{{item.schoolAddress}}" bindtap="deleteSchoolAddress">删除</button>
</view>

js里获取wxml里的值

deleteSchoolAddress:function (e) {
var SchoolAddrsss=e.currentTarget.dataset.as
var school=e.target.dataset.item
}

附:上述传值方法只在同一页面有效

希望本文所述对大家微信小程序开发有所帮助。

微信小程序页面间传值与页面取值操作实例分析

本文实例讲述了微信小程序页面间传值与页面取值操作。分享给大家供大家参考,具体如下:

微信小程序页面间传值

1.js页面间的传值:url: ' 路径 ? 值='+ 获取该页面取值,

实例1:

pageSkip :function(){
wx.navigateTo({
url: '/page/login/facte?shopsName='+this.data.shopsName,
})
},

实例2:

pageSkip :function(){
wx.navigateTo({
url: '/page/index/poer?sid=2 & shopsName='+this.data.shopsName,
})
},

实例3:

pageSkip :function(){
wx.navigateTo({
url: '/page/index/poerIndex?sid=2 & shopsName='+this.data.shopsName+'&goodsId='+thi.data.goodsId,
})
},

2.wxml里的传值:url=" 页面路径 ? 值=获取该页面值"

实例4:

<navigator url="/pages/admin/goodsOrder?orderNo={{item.NO}}" 
open-type="navigate">

实例5:

<navigator url="/pages/admin/goodsOrder?orderNo={{item.NO}}&num=5" 
open-type="navigate">

微信小程序页面取值

微信小程序js接受页面传值的方法:

1.本页面参数名为局部变量:onLoad: function (options) { var 本页面参数名=options.上一传值页面参数名},

实例:

onLoad: function (options) {
var shopsName=options.shopsName
},

2.本页面参数名为全局变量:onLoad: function (options) { 本页面参数名=options.上一传值页面参数名},

实例:

onLoad: function (options) {
this.data.shopsName=options.shopsName
},

注:无论上一页面是通过js传值还是通过wxml传值,本页面取值方法都如上。

希望本文所述对大家微信小程序开发有所帮助。

以上就是本次给大家分享的关于java的全部知识点内容总结,大家还可以在下方相关文章里找到相关文章进一步学习,感谢大家的阅读和支持。

您可能感兴趣的文章:

  • 微信小程序视图容器创建轮播图实例
  • 本文为大家分享了微信小程序swiper组件创建轮播图的具体代码,供大家参考,具体内容如下 一、视图容器(Swiper) 1、swiper:滑块视图容器 微信官方文档 二、swiper应用 1、页面逻辑(index.js) Page({ data: { imgUrls: [ { link: /pages/index/index, url: /images/001.jpg }, { link: /pages/list/list, url: /images/002.jpg }, { link: /pages/list/list, url: /images/003.jpg } ], indicatorDots: true, //小点 indicatorColor: white,//指示点颜色……

  • 微信小程序与内嵌网页交互实现支付功能实现方法
  • 上个月,小程序开放了新功能,支持内嵌网页,所以我就开始了小程序内嵌网页之路,之前我只是个小安卓。 内嵌网页中可使用JSSDK 1.3.0提供的接口,可坑就来了,居然不支持支付接口的调用,经过一番研究,总算打通了两边的交互。 大概流程 1、先说明涉及到的文件,下面会用到 1.1 app.js:小程序的app.js文件,在globalData里定义一个全局变量paySuccessUrl: ,用来保存支付成功跳转url 1……

  • NodeJs微信事件交互实例的详解
  • 微信公众号有个规则,一旦开启了开发者模式,其他的常规功能就都必须通过接口调用完成。比如说自定义菜单功能,必须通过发送post请求的方式生成。本章就通过关注到取消关注的整个过程来谈一谈nodejs是怎么样与微信交互的。这些功能的入口就是你在测试公众号里面填写的URL(以下用/login/wechat代替)。 事件交互 扫码关注微信公众号后,微信会调用你的接口/login/wechat,并且……

  • 微信小程序三级联动选择器实例用法
  • 本文实例为大家分享了微信小程序三级联动选择器的具体代码,供大家参考,具体内容如下 效果图 实现原理 利用微信小程序的picker组件,其中: 1,普通选择器:mode = selector实现一级选择实例; 2,省市区选择器:mode = region实现省市区三级联动; 3, 多列选择器:mode = multiSelector实现二级和三级联动的10以内数字的乘法。 WXML view class=tui-picker-content view class=tui-picker-name一级选择实……

  • 微信小程序动态添加分享数据的实操方法
  • 微信小程序分享效果: js代码: page({ /** * 用户点击分享按钮或右上角分享 */ onShareAppMessage: function (res) { var that = this; return { title: that.data.common.act_name, desc: that.data.common.introduction, path: /pages/xiangqing/xiangqing?id=+that.data.id, success: function (res) { // 转发成功 }, fail: function (res) { // 转发失败 } } }}) 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持码农之家。 ……

    微信小程序页面取值 相关电子书
    学习笔记
    网友NO.369990

    微信小程序传值以及获取值方法的详解

    微信小程序传值以及获取值方法,传值有两种方法,对应也有获取值得方法, 1、设置id的方法标识跳转后传递的参数值; 2、通过使用data - xxxx 的方法来标识要传递的值 微信小程序设置id的方法标识来传值 在要跳转的item处,设置一个id并给当前的id赋值上对应的key值,比如一部电影的id(后面带着id去下一个页面查询,详细信息)如: 后我们在js的bindtap的响应事件中获取,并传递到下一个界面中; 获取到id传的值 通过e.currentTarget.id;获取设置的id值,并通过设置全局对象的方式来传递数值, 获取全局对象 var app=getApp(); //设置全局的请求访问传递的参数 app.requestDetailid=id; 提示:其实我们也可以在,wxml中查看到我们设置的每一个item的id值 通过使用data - xxxx 的方法标识来传值 通过使用data - xxxx 的方法标识来传值,xxxx可以自定义取名 比如data-key等等都可以……

    网友NO.298207

    微信小程序实现页面跳转传值以及获取值的方法分析

    本文实例讲述了微信小程序实现页面跳转传值以及获取值的方法。分享给大家供大家参考,具体如下: 在安卓中页面跳转传值都是通过bundle,现在研究一下小程序的列表跳转及页面传值。 my.wxml view class="container" view bindtap="bindViewTap" class="userinfo" image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"/image text class="userinfo-nickname"{{userInfo.nickName}}/text /view view class="info_list" block wx:for="{{userListInfo}}" view class="weui_cell" data-index="{{item.index}}" id="{{item.index}}" bindtap="userinfo_item" view class="weui_cell_hd" image src="{{item.icon}}"/image /view view class="weui_cell_bd" view class="weui_cell_bd_p" {{item.text}} /view /view view wx:if="{{item.isunread}}" class="badge"{{item.unreadNum}}/view view class="with_arrow"/view /view /block /view/view my.js var app = getApp()Page({ data: { userInfo: {}, userListInfo: [{ icon: '../../images/iconfont-dingdan.png……

    网友NO.332832

    微信小程序数据存储与取值详解

    在小程序开发的过程,经常要需要这个页面输入的数据,在下一个页面中进行取值赋值。 比如: 在A页面input输入框,输入电话号码,点击添加。需要在B页面电话区域中,显示刚刚输入的电话号码。 因为这是两个页面,就需要先存储,再取值。微信小程序提供了数据存储的API, wx.setStorage(OBJECT) 可以将数据存储在本地缓存中指定的 key 中,如果重复会覆盖掉原来该 key 对应的内容。 思路是,在A页面,使用 bindinput 获取input输入的值,赋值给一个变量(自定义),点击添加按钮时,如果变量不为空,将变量的值存储在本地缓存中,在B页面,使用 wx.getStorage(OBJECT) 方法取值; ps : 源代码在页面底部 代码如下: 对input输入框,绑定事件 bindinput="bindKeyInput" ,设置 value="{{inputValue}}" ,因为电话号码为数字,设置 type="number" 。对按钮添加点击事件 bindtap="addbtn" 在……

    网友NO.690664

    微信小程序:数据存储、传值、取值详解

    小程序界面传值 父级界面:A界面 子级界面:B界面 一、url传值 详细的配置参数可以查看组件导航:navigator,这里不再做过多的解释。 1. 正向传值:A界面 –B界面 用 navigator标签或 wx.navigator传值,A界面向B界面传id值 A界面获取id值传向B界面如果需要传多个参数, 用 lt;navigator url="/page/index/index?id=110" 传值/navigator navigator url="/page/index/index?id=110password=123456" 传值/navigator // 方法二: wx.navigator标签传值单值、多值传递 wx.navigateTo({ url: '/page/index/index?id=' + id }) wx.navigateTo({ url: '/page/index/index?id=' + id +'password='+ password }) B界面接受id值 /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { var id = options.id; this.setData({ id:id, username:username, password:password, }) }, 反向传值:B界面 –A界面 在B界面需要传值地方代码如下 var pages = getCurrentPages() // 获取栈中全部界面的, 然后把数……

    网友NO.975540

    微信小程序页面间传值与页面取值操作实例分析

    本文实例讲述了微信小程序页面间传值与页面取值操作。分享给大家供大家参考,具体如下: 微信小程序页面间传值 1.js页面间的传值:url: ' 路径 ? 值='+ 获取该页面取值, 实例1: pageSkip :function(){wx.navigateTo({url: '/page/login/facte?shopsName='+this.data.shopsName,})}, 实例2: pageSkip :function(){wx.navigateTo({url: '/page/index/poer?sid=2 shopsName='+this.data.shopsName+'lt;navigator url="/pages/admin/goodsOrder?orderNo={{item.NO}}" open-type="navigate" 实例5: navigator url="/pages/admin/goodsOrder?orderNo={{item.NO}}gt; 微信小程序页面取值 微信小程序js接受页面传值的方法: 1.本页面参数名为局部变量: onLoad: function (options) { var 本页面参数名=options.上一传值页面参数名}, 实例: onLoad: function (options) {var shopsName=options.shopsName}, 2.本页面参数名为全局变量: onLoad: function (options) { 本页面参数名=options.上一传值页面参数名}……

    <
    1
    >

    Copyright 2018-2020 xz577.com 码农之家

    本站所有电子书资源不再提供下载地址,只分享来路

    版权投诉 / 书籍推广 / 赞助:QQ:520161757