当前位置: 首页 > news >正文

c++builder跨form传参数_小程序参数传递的几种方式

在微信小程序的开发中,我们会经常遇到页面间数据传递或者相互影响的问题。在实际的开发过程中,可以通过以下几种方法来实现。

方法一:使用全局变量

全局变量实际上是定义了一个全局的对象,并在每个页面中引入。

在初始化代码的时候,小程序会读取一个 app.js的文件,首先在app.js 里对全局变量进行定以

app.js

 App({  globalData: {    mingzi: 'i am songyanan app js',  }  })

Pages/index/index.js

我们将index看作A页面
首先在该文件下声明var app=getApp(); 然后对全局变量进行引用和赋值

//将全局变量的值赋给页面的一个变量//index.jsvar app = getApp()Page({  /**   * 页面的初始数据   */  data: {    msg:  app.globalData.mingzi    //拿到全局变量 到时候就方便直接用msg去获取到app.js中的具体变量  },   /**   * 生命周期函数--监听页面加载   */  onLoad: function () {      console.log(app.globalData);   //全局变量值的获取  }})

Pages/index/index.wxml

<view>{{msg}}view>

5ca5505b89498ca8a2bbe5de9447a060.png

72ae8c3940fffff18229d35a7f2b2ac6.png

方法二:navigator跳转时

wxml页面(参数多时可用“&”)

<navigator url="../navigator/navigator?title=我是navigate">跳转到新页面navigator><navigator url="../redirect/redirect?title=我是redirect" open-type="redirect">在当前页打开navigator>

或者

// 跳转到新页面wx.navigateTo({      url: "../navigator/navigator?title=我是navigate"})// 在当前页打开wx.redirectTo({     url:  "../redirect/redirect?title=我是redirect"})

在跳转的js代码可以获取到title参数

 在onLoad里直接获取传过来的值。options为页面跳转所带来的参数

Page({     data:{       title: "",   }, onLoad: function (options) {  //页面初始化 options为页面跳转所带来的参数  var title = options.title //获取值}, })

方法三:列表index下标取值

wxml页面

<button bindtap='clickMe' data-id='1'>点击button>

如果需要传递多个,可以写多个data-[参数]的方式进行传递

js页面

clickMe: function (e) {     var id = e.currentTarget.dataset.id         console.log(id);  },

方法四:form表单传值 

通过设置变量值保存表单数据

这种方式也比较好实现,就是给表单项绑定事件,当内容发生变化时,set一下变量值。所以,提交表单的时候直接获取变量值就OK了~

type=

可以给input绑定事件(bindinput="inputTitle"),然后在inputTitle里面简单处理一下:

  inputTitle: function (e) {    this.setData({      title: e.detail.value,  //title值            titleEmpty: e.detail.value.length == 0  //长度        })  },

上面的titleEmpty是为了判断title是否为空,如果为空,就不显示右侧的"清除icon"。这种方式很容易实现上面说的清空内容~

在form的submit时,直接var title = this.data.title; 就获取到了表单数据,很方便~

但是,如果有多个输入控件,我们不可能为每个控件添加 bindinput、bindchange 这类方法来获取值。我们得这样做:

第一步、添加 from 控件,并为其指定 bindsubmit 属性值。第二步、添加输入控件到 form 中,并为其指定 name 属性值。第三步、添加 button 控件,并为其指定 form-type="submit"。第四步、在 js 中取值时,用 e.detail.value.xxx 或 e.detail.value["xxx"],其中 xxx 为 name 属性值。

.wxml 代码

<form bindsubmit="reg">  <view>用户:<input type="text" name="username" />view>  <view>密码:<input password name="password" />view>  <view>兴趣:<checkbox-group name="cb">    <label><checkbox value="A" />乒乓球label>    <label><checkbox value="B" checked="false" />羽毛球label>    <label><checkbox value="C" checked="{{checked}}" />排球label>  checkbox-group>view>  <view>级别:<radio-group name="r">    <label><radio value="a" />初级label>    <label><radio value="b" />中级label>    <label><radio value="c" />高级label>  radio-group>view>  <view><button type="primary" form-type="submit">注册button>view>form>

.js 代码

 reg: function (e) {    console.log(e.detail.value)    wx.showToast({      title: e.detail.value["cb"].join(","),      icon: "success",      duration: 2000    });  },

重要说明

微信小程序的 input 有个属性叫 type,这个 type 有几个可选值:

text:不必解释number:数字键盘(无小数点)idcard:数字键盘(无小数点、有个 X 键)digit:数字键盘(有小数点)

注意:number 是无小数点的,digit 是有小数点的。

表示密码框(个人认为太怪异,不如直接叫 password 标签的好)。

相关文章:

  • c#分页_用 C# 写一个 Redis 数据同步小工具
  • 一年小结
  • cmfclistctrl设置单行文字颜色_IntelliJ IDEA 超全优化设置,效率杠杠的!
  • Automatic Update prompting to download KB890859 again and again?
  • jsp登录功能的实现_3-2【微信小程序全栈开发课程】登录功能(一)--实现登录功能
  • 《Spring 2.0核心技术与最佳实践》即将上市
  • 兵法:掌上千秋史 胸中百万兵
  • go语言怎么 控制一个变量输入的范围_go 学习笔记之值得特别关注的基础语法有哪些...
  • 颜率护鼎:读《战国策:秦兴师临周章》有感
  • python函数手册 stata_Python与Stata数据交互之时间变量
  • 知音少,弦断有谁听
  • python server酱_Python3和Server酱实现微信通知
  • 潜龙勿用,蓄积待用
  • python 不等于None 不等于空_python中输入0.1+0.2结果却不等于0.3?原来编程语言是这么算的……...
  • ihtml2document能不能根据id获取dom_javascript的DOM对象
  • IE9 : DOM Exception: INVALID_CHARACTER_ERR (5)
  • 345-反转字符串中的元音字母
  • C++入门教程(10):for 语句
  • canvas 五子棋游戏
  • C学习-枚举(九)
  • gf框架之分页模块(五) - 自定义分页
  • HTTP传输编码增加了传输量,只为解决这一个问题 | 实用 HTTP
  • Javascripit类型转换比较那点事儿,双等号(==)
  • php ci框架整合银盛支付
  • Protobuf3语言指南
  • select2 取值 遍历 设置默认值
  • sessionStorage和localStorage
  • Webpack 4 学习01(基础配置)
  • 分享一个自己写的基于canvas的原生js图片爆炸插件
  • 后端_MYSQL
  • 基于Javascript, Springboot的管理系统报表查询页面代码设计
  • 爬虫模拟登陆 SegmentFault
  • 前端技术周刊 2019-01-14:客户端存储
  • 腾讯优测优分享 | Android碎片化问题小结——关于闪光灯的那些事儿
  • 我是如何设计 Upload 上传组件的
  • ​io --- 处理流的核心工具​
  • ​软考-高级-系统架构设计师教程(清华第2版)【第1章-绪论-思维导图】​
  • ###C语言程序设计-----C语言学习(6)#
  • #100天计划# 2013年9月29日
  • $(function(){})与(function($){....})(jQuery)的区别
  • (13)[Xamarin.Android] 不同分辨率下的图片使用概论
  • (delphi11最新学习资料) Object Pascal 学习笔记---第5章第5节(delphi中的指针)
  • (ibm)Java 语言的 XPath API
  • (分布式缓存)Redis哨兵
  • (附源码)ssm本科教学合格评估管理系统 毕业设计 180916
  • (蓝桥杯每日一题)love
  • (理论篇)httpmoudle和httphandler一览
  • (转)为C# Windows服务添加安装程序
  • .net mvc部分视图
  • .NET/C# 使窗口永不获得焦点
  • .NetCore项目nginx发布
  • @Transactional注解下,循环取序列的值,但得到的值都相同的问题
  • [ linux ] linux 命令英文全称及解释
  • [2019.3.5]BZOJ1934 [Shoi2007]Vote 善意的投票
  • [20190113]四校联考