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>
方法二: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 标签的好)。