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

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

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

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

知晓程序:微信小程序入门指南

本教程是一本分析小程序生态、解读小程序产品设计与开发的入门图书。全书共7章,全面讲解了小程序的基本知识、小程序将给我们带来什么改变、小程序上手案例、如何转行小程序开发、电

查看详情

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

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

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传值,本页面取值方法都如上。

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

以上就是本次给大家分享的关于Javascript的全部知识点内容总结,大家还可以在下方相关文章里找到echarts中箱线图的分析与绘、 让JS验证密码不能为空的实、 JavaScript中的call、apply方法、 等javascript文章进一步学习,感谢大家的阅读和支持。

上一篇:JS实现的JSON序列化的代码

下一篇:在JS中getUTCMilliseconds()实例方法

展开 +

收起 -

微信小程序页面取值 相关内容
微信小程序视图容器创建轮播图实例

这篇文章主要为大家详细介绍了微信小程序视图容器(swiper)组件创建轮播图,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

查看详情
微信小程序与内嵌网页交互实现支付功能实现方法

这篇文章主要介绍了详解微信小程序与内嵌网页交互实现支付功能,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

查看详情
NodeJs微信事件交互实例的详解

这篇文章主要介绍了使用NodeJs 开发微信公众号(三)微信事件交互实例的相关资料,需要的朋友可以参考下

查看详情
微信小程序三级联动选择器实例用法

这篇文章主要为大家详细介绍了微信小程序三级联动选择器使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

查看详情
微信小程序动态添加分享数据的实操方法

这篇文章主要为大家详细介绍了微信小程序动态添加分享数据的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

查看详情
微信小程序开发入门精要

本书系统全面、循序渐进地介绍了进行微信小程序开发的各方面知识、经验和技巧。微信小程序开发入门精要 内容包含目前微信小程序支持的所有组件和API的详细介绍,以及使用方法演示,并

查看详情
微信小程序:分享微信创业2.0时代千亿红利

小程序是一个新的概念,给创业者、投资者、程序员带来了福音。小程序是互联网创业的新方向,是投资机构的热门话题,也为程序员降低了工作强度。面对这一热点,很多人想投身其中,但

查看详情
微信开发深度解析:微信公众号、小程序高效开发秘籍

《微信开发深度解析:微信公众号、小程序高效开发秘籍》 以深度剖析Senparc.Weixin SDK框架的设计思想和使用方法为主干,全面介绍了开发微信公众号(包含了订阅号、服务号和小程序)所需的

查看详情
微信小程序运营实战

小程序给用户带来怎样的价值?小程序给中小企业带来怎样的机遇?传统企业如何借助小程序实现移动化转型?企业如何利小程序实现品牌营销?商家如何借助小程序进行运营推广

查看详情
微信小程序:开发入门及案例详解

《微信小程序:开发入门及案例详解》 本书全面介绍微信小程序的开发思路、技术、工具与案例,涉及小程序开发的方方面面。主要内容包括:前端开发基础、小程序开发基础、小程序组件、

查看详情
从零开始学微信小程序开发

《从零开始学微信小程序开发》 共分3篇12章,第1篇介绍微信小程序的基础知识,包括微信小程序开发工具、微信小程序架构分析;第2篇介绍微信小程序的常用模块,通过一些小案例详细介绍

查看详情
微信小程序开发零基础入门

★从易到难、由浅入深,更轻轻松松地把握小程序开发设计的各种各样专业知识。 ★普遍涉及到、重中之重凸出,更全方位系统化学习培训小程序定制开发的各种各样方式 。 ★基础理论相结

查看详情
微信小程序页面取值 学习笔记
网友NO.343566

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

微信小程序传值以及获取值方法,传值有两种方法,对应也有获取值得方法, 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.252390

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

本文实例讲述了微信小程序实现页面跳转传值以及获取值的方法。分享给大家供大家参考,具体如下: 在安卓中页面跳转传值都是通过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.223255

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

在小程序开发的过程,经常要需要这个页面输入的数据,在下一个页面中进行取值赋值。 比如: 在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.841204

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

小程序界面传值 父级界面: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.737246

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

本文实例讲述了微信小程序页面间传值与页面取值操作。分享给大家供大家参考,具体如下: 微信小程序页面间传值 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 码农之家

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

免责声明:网站所有作品均由会员网上搜集共同更新,仅供读者预览及学习交流使用,下载后请24小时内删除

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