微信小程序 页面传值详解

微信小程序 页面传值详解

一. 跨页面传值.

1 . 用 navigator标签传值或 wx.navigator, 比如

这里将good_id=16 参数传入detail页面, 然后detail页面的 onload方法内接受.

如果需要传多个参数, 用 & 链接即可

如果要传 数组, 字典等复杂类型, 要先用 JSON.stringify() 转成字符串传递.

注 : 如果转化的字符串中 有"?"这个符号, 则只会传递"?"以前的字符串, 这个问题我猜想可能是小程序内部的路由处理 对这个"?"敏感吧

好, 这是第一种 依靠跳转的url带参数传值

2 . 用getCurrentPages(); 获取栈中全部页面的, 然后把数据写入相应页面

这里可以传字符串, 也能传数组等,

这样就把 address 传递并接受了

注 : 这个方法适合 往后面传值(即已经存在的页面), 这样才能在栈中找到并主动写入数据, 且 一定要在 onshow() 方法中接受, 因为再次返回只执行onshow()方法.

3 . 写入本地, 跨页面在取出来 wx.setStorage/wx.getStorage等, 小程序中对写入本地数据 封装了很多方法, 各有侧重, 这里就不多说了

4 . 把 数据声明为全局变量

var detail = getApp().detail; 可在任何页面获取

二. 页内传值

1 . 设置id的方法标识跳转后传递后的参数

在bindtap定义的点击方法 swiperTap : function(e) ; 中获取, var id = e.currentTarget.id;

2 . 设置 data-xxx 的方法来标识要传递的值

注 : 这里 data-index="{{index}}" 里的 {{index}} 是有效的, 在用wx-for 渲染视图层时, index 代表点击的下标. 在bindtap定义的点击方法 swiperTap : function(e) ; 中获取, 即 var index = e.currentTarget.dataset.index; 其他的参数取出也如此, var type = e.currentTarget.dataset.type;

3 . form表单和input输入框

感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！

赞 (0)

相关推荐

  • 微信小程序中子页面向父页面传值实例详解

    微信小程序中子页面向父页面传值实例详解

    微信小程序中子页面向父页面传值实例详解 上面一张图是编辑款项页面,下面一张图是点击了编辑款项页面中选择好友的图标后打开的子页面.这个时候点选子页面的某个好友时,需要把好友的名字传递回编辑款项父页面. 采取的方法: 从页面路由栈中直接获取和操作目标Page对象,这种方式,是通过调用小程序的API: getCurrentPages(),来获取当前页面路由栈的信息,这个路由栈中按照页面的路由顺序存放着相应的Page对象,我们可以很容易的获取到上一级页面的完整Page对象,从而使直接调用Page对象的属

  • 微信小程序页面传值实例分析

    微信小程序页面传值实例分析

    微信小程序页面传值实例分析 最近组里开发小程序,遇到了一个前端亘古不变的话题:页面传值 刚开始使用路径传参解决,但是众所周知: 各浏览器HTTP Get请求URL最大长度并不相同,几类常用浏览器最大长度及超过最大长度后提交情况如下: IE6.0 :url最大长度2083个字符,超过最大长度后无法提交. IE7.0 :url最大长度2083个字符,超过最大长度后仍然能提交,但是只能传过去2083个字符. firefox 3.0.3 :url最大长度7764个字符,超过最大长度后无法提交. Oper

  • 微信小程序 页面传值详解

    微信小程序 页面传值详解

    微信小程序 页面传值详解 一. 跨页面传值. 1 . 用 navigator标签传值或 wx.navigator, 比如 这里将good_id=16 参数传入detail页面, 然后detail页面的 onload方法内接受. 如果需要传多个参数, 用 & 链接即可 如果要传 数组, 字典等复杂类型, 要先用 JSON.stringify() 转成字符串传递. 注 : 如果转化的字符串中 有"?"这个符号, 则只会传递"?"以前的字符串, 这个问题我猜想可能

  • 微信小程序 解析网页内容详解及实例

    微信小程序 解析网页内容详解 最近在写一个爬虫,需要将网页进行解析供微信小程序使用.文字和图片解析都好说,小程序也有对应的text和image标签可以呈现.而更复杂的,比如表格,则比较棘手,不管是服务端解析还是小程序呈现都很费劲,也很难覆盖所有情况.于是我想,将表格对应的HTML代码转成图片,不失为一种变通的方法. 这里我们采用node-webshot模块,它对PhantomJS进行了轻量封装,可以轻松地将网页以截图形式保存下来. 首先安装Node.js和PhantomJS,然后新建一个js文件

  • 微信小程序 WXDropDownMenu组件详解及实例代码

    微信小程序 WXDropDownMenu组件详解及实例代码

    微信小程序 WXDropDownMenu组件详解,这里给个小的示例,帮助大家学习理解, 功能: 适用于商品列表筛选与功能菜单跳转 先来看下效果图: 思路与步骤: 布局方面,整体使用dl来写,二级包在dd中,用ul li来写:交互方面,点击某一级菜单,关闭兄弟子菜单,点击某子菜单关闭所有菜单. 1.使用dt做出第一级菜单 2.使用dd嵌套第二级菜单,初始隐藏.position为absolute,使用z-index浮出页面层 /*总菜单容器*/ .menu { display: block; hei

  • 微信小程序 require机制详解及实例代码

    微信小程序 require机制详解 一, JS模块加载:一次性加载全部JS, 但并不一定立即执行. 先提一提微信小程序架构: 类浏览器 -> HTTP本地服务 -> 云端服务 微信小程序运行的架构,基本上是浏览器 -> HTTP本地服务 -> 云端服务, HTTP本地服务用来读取本地文件或者代理云端的文件资源.读取项目中JS文件, 是由HTTP本地服务取本地存储的脚本文件. 似乎比较简单,一个HTML 引用所有JS文件 既然采用了这种架构,那微信小程序就类似浏览器那样,借助一个HT

  • 微信小程序 template模板详解及实例代码

    微信小程序 template模板详解及实例代码

    微信小程序 template模板详解 如下图,我在做华企商学院小程序的时候,课程搜索结果页和课程列表页结构是完全一样的,这时就非常适合使用模板来完成页面搭建.实现一次定义,到处使用. 模板 一.定义模板 1.新建一个template文件夹用来管理项目中所有的模板: 2.新建一个courseList.wxml文件来定义模板: 3.使用name属性,作为模板的名字.然后在<template/>内定义代码片段. 注意: a.可以看到一个.wxml文件中可以定义多个模板,只需要通过name来区分: b

  • 微信小程序模版渲染详解

    微信小程序的界面程序支持html语法,多加了一部分标签,如view.block.templete等. 模版渲染 index.wxml <view> <p>{{helloWord}}</p> </view> 其中{{}}里面包含的内容你可以理解为一个变量,怎么让程序解析出{{helloWord}}变量 在index.js 中注册这个变量 var json = { data:{ "helloWord" : "hello world&

  • 微信小程序 navbar实例详解

    微信小程序 navbar实例详解

    微信小程序 navbar实例详解 实现效果图: data typeList: [ { name: "日报", id: "1" }, { name: "周报", id: "2" }, { name: "月报", id: "3" }, { name: "目录", id: "4" }] js that.setData({ dateValue: util.

  • 微信小程序 template模板详解及实例

    微信小程序 template模板详解及实例

    微信小程序 template模板详解及实例 首先看一些官方的一些介绍. 模板:模板功能是通过对template 标签的属性 name="" 去创建不同模板,通过is="name的值"来使用. 通过上面两张图,大概能看出,使用模板可以为大量类似的布局带来便利.下面看一下我自己的一个Demo. 先放出效果图(数据来自聚合数据) 可以看到,除了选项个数的差别之外,其他布局是相同的. 下面的每一道题的模板. <template name="carItem&q

  • 使用Typescript开发微信小程序的步骤详解

    使用Typescript开发微信小程序的步骤详解

    Typescript的优势咱不需要赘述太多,有兴趣可以参考(https://www.typescriptlang.org/).今天给大家分享一下如何在微信小程序(或者其他同类小程序)开发中使用Typescript. 这个分两种情况,最简单的做法就是在创建项目时,选择Typescript这个选项,如下图所示.但要注意,这个选项只有在选择"Use no cloud service"才有,而另外一种Mini Program Cloud Base则不支持.这个可能是开发工具还没有跟上吧,希望以

随机推荐