微信小程序URL里带参数怎么设置,怎么取值

微信小程序URL里带参数怎么设置,怎么取值,第1张

在小程序开发中经常会用到跨页面传值,我们常用的一般为全局变量传值和URL参数传值。在全局变量传值过程中,我们可通过var app=getApp(),获取到全局变量app,然后将需要传递的值赋值到全局变量中,如appgetID='18996759675'。

此时,我们已经将需要传递的值存储到全局变量中,然后我们在需要调用的地方,调用全局变量getApp()中之前存储的值,如phone:getApp()getId,随即取出了之前传递的值。

除了全局变量传值,我们还可以通过URL参数传值,URL参数传值的话,从上一个页面中传递某一个参数到编辑页面,以读取数据供填充之用

在读取页面实现onLoad(options)方法,从url路径中获取传递的参数值getId

可以使用全局变量,在当前页面对全局变量赋值,新页面当中对变量取值就可以达到这样的效果。

也可以使用localStorage,sessionStorage等先保存数据到本地,在新页面获取本地保存的数据就可以了。

js ---------- JavaScrip文件

json -------- 项目配置文件,负责窗口颜色等等

wxml ------- 类似HTML文件

wxss ------- 类似CSS文件

在根目录下用app来命名的这四中类型的文件,就是程序入口文件。

appjson

必须要有这个文件,如果没有这个文件,IDE会报错,因为微信框架把这个作为配置文件入口,

你只需创建这个文件,里面写个大括号就行

以后我们会在这里对整个小程序的全局配置。记录了页面组成,配置小程序的窗口  背景色,配置导航条样式,配置默认标题。

appjs

必须要有这个文件,没有也是会报错!但是这个文件创建一下就行 什么都不需要写

以后我们可以在这个文件中监听并处理小程序的生命周期函数、声明全局变量。

appwxss

这个文件不是必须的。因为它只是个全局CSS样式文件

appwxml

这个也不是必须的,而且这个并不是指主界面哦~因为小程序的主页面是靠在JSON文件中配置来决定的

有了这两个文件你运行程序,IDE就不会报错了,也意味着这是最简单的微信小程序

{

appjson

appjs

}

写小程序时候,经常遇到使用下拉框选项,不过每次都手写很麻烦,所有我就发一个例子吧,因为我包在其他模块中,所有样式不知道有没有复制全,大家见谅!

·

每一个值的高度等你们可以随意设置,看个人喜好。

这个原理很简单,首先准备一些标签,准备一张(展开与折叠用),数据绑定就不说了。

设置变量:selectShow, 控制下拉框列表是否显示隐藏,我设置的是高度,显示就设置高度,不显示就设置为0; index,设置显示第几个数据,默认可以设置为0,根据需求; selectData,你要选择的数据组[];

当点击三角时候,设置下拉框option选项显示(高度)。当点击选项值的时候,设置全局变量的下标值,标签中会根据下标在数组中选中,绑定数据显示, 然后设置下拉框option选项不显示(高度0)。

option总高度设置,根据你有多少选项以及selectShow值是否显示,我设置的是小于5个时候默认高度325rpx,超过五个时候,选项组length 每一个50rpx,

height:{{selectShow(selectDatalength>5325:selectDatalength 50):0}}rpx;

这个是写的一个样式,我的是倒三角,当展开时候,添加一个样式,rotate180度。

class='select_img {{selectShow&&"select_img_rotate"}}' src='//images/b2png'

这个是我的选项内容是一组数组,所有我循环出来,顺便绑定一个数据到标签中data-index,也就是这个值在数组中的下标,点击时候获取方便用。然后添加一个事件catchtap='optionTap'。

wx:for='{{selectData}}' wx:key='this' data-index='{{index}}' catchtap='optionTap'

wxss样式:

不解释,,看设计需求写样式。不过大多通用。

写程序时候,很多地方会用到时间选项,送大家一个函数。获取一天时间分割数组。["00:00","00:05","00:10"] 参数minute ,设置隔几分钟分割。时间格式你们可以自己改。

以上就是关于微信小程序URL里带参数怎么设置,怎么取值全部的内容,包括:微信小程序URL里带参数怎么设置,怎么取值、微信小程序表单提交后如何在新页面显示提交数据不使用url传递提交的参数、小程序基本构成等相关内容解答,如果想了解更多相关内容,可以关注我们,你们的支持是我们更新的动力!

欢迎分享,转载请注明来源:内存溢出

原文地址:https://54852.com/zz/9342800.html

(0)
打赏 微信扫一扫微信扫一扫 支付宝扫一扫支付宝扫一扫
上一篇 2023-04-27
下一篇2023-04-27

发表评论

登录后才能评论

评论列表(0条)

    保存