四、页面间数据传递 和 参数传值

(1)页面间数据传递

  ① 全局变量

  ② 页面跳转或重定向时使用url携带参数(wx.navigateTo(urlStr))

  ③ 使用组件模板 template

<template is="products" data="{{products: productsArr}}"></template>

  ④ 存入缓存

wx.setStorageSync(key, data)
wx.getStorageSync(key)

  ⑤ 存入数据库

(2)参数传值

  ① 给元素添加 data-*  属性传值,但 * 不能包含大写字母、不可存对象

<swiper-item class="banner-item" data-id="{{item.key_word}}" bindtap="onProductsItemTap">
</swiper>

    比如代码段中的 data-id,通过在 onProductsItemTap 事件中调用 event.currentTarget.dataset['id'] 来获取,然后通过navigateTo(url: '../pro/prods?id=' + id) 跳转

onProductsItemTap: function (event) {
var id = event.currentTarget.dataset['id']
wx.navigateTo({
url: '../product/product?id=' + id,
})
}

wx小程序知识点(四)的更多相关文章

  1. wx小程序知识点(三)

    三.封装小程序的数据请求 (1)在根目录创建utils目录,创建config.js.base.js (2)在config.js中创建config类,并将请求路径配置给config的属性restUrl, ...

  2. wx小程序知识点(二)

    二.WXML和HTML的异同.WXSS和CSS的异同 (1)WXML和HTML 相同点:都是用来描述页面结构的,由标签.属性组成 不同点:标签名不一样,小程序标签名更少: 小程序多了 wx:if 这样 ...

  3. wx小程序知识点(八)

    八.小程序的优劣势 优势:   ① 不需要下载 ② 打开速度快 ③ 开发成本低 ④ 安卓上可以添加在桌面,与原生 App 相似 ⑤ 小程序的发布审查流程比较严格,安全保障 劣势:   ① 页面大小不能 ...

  4. wx小程序知识点(七)

    七.小程序提速与性能优化 参考大佬vicyao的文章 https://blog.csdn.net/wetest_tencent/article/details/61196522 (1)提高页面加载速度 ...

  5. wx小程序知识点(六)

    六.生命周期 (1)onLoad    —— 加载时触发,只调用一次,可用来发送请求绑定数据.获取url中参数 (2)onShow   —— 页面显示时触发,每次显示都会执行,用来获取需要频繁更新的数 ...

  6. wx小程序知识点(五)

    五.双向绑定和 vue 的区别 ① vue 中实现双向绑定只需要修改 this.data var vm = new Vue({ el: '#example', data: { message: 'He ...

  7. wx小程序知识点(一)

    一.微信小程序中的目录及文件 (1)project.config.json 用于开发者工具配置 主要用于设置项目是否开启https校验(setting.urlCheck) (2) App.js 设置全 ...

  8. wx小程序获取用户位置信息

    wx小程序内置的接口只能获取用户的坐标,通过微信位置服务获取用户地址: http://lbs.qq.com/qqmap_wx_jssdk/index.html 注:需要在key的设置中打开webSer ...

  9. 微信小程序学习一 微信小程序的四个基本文件

    微信小程序有四种类型的文件 js 类型文件 小程序的逻辑代码文件 小程序对js es6的处理比较友好,基本上我们的es6语法都需要使用babel插件去转化成es5(具体是什么原因,自己可以去了解一下) ...

随机推荐

  1. Processor 介绍

    1.概述 Sink Group允许用户将多个Sink组合成一个实体. Flume Sink Processor 可以通过切换组内Sink用来实现负载均衡的效果,或在一个Sink故障时切换到另一个Sin ...

  2. SSM框架中表单提交出现400错误

    在jsp页面中: 在controller里传递参数: 由于参数sonTime时String类型,要把String类型的时间转换成Date类型的时间,在过程无法自动完成转换故出现400错误,可以使用@D ...

  3. 说一下redis中5种数据类型的底层数据结构

      前言: 阅读 redis设计与实现 一书的记录.未完待续... redis我们都知道有5种数据类型,分别是string,list,hash,set,zset,那么你知道它们的底层数据结构实现吗? ...

  4. .Net Core Web应用加载读取Json配置文件

    ⒈添加Json配置文件并将“复制到输出目录”属性设置为“始终复制” { "Logging": { "LogLevel": { "Default&quo ...

  5. Idea中新建maven项目的目录结构

    maven项目的目录结构如下所示 pom.xml文件内容如下所示 <?xml version="1.0" encoding="UTF-8"?> &l ...

  6. unittest之三:字符串与列表的相互转换与分离数据时的应用

    一.分离数据时,需读取文档中存储的数据,但TXT文件的数据读取出来的类型为列表,而测试用例中断言的时候验证的是字符串,所以需要将列表转为字符串 #1字符串————>列表 str1='hello ...

  7. redis 学习(15)-- GEO

    GEO GEO 简介 Redis 3.2添加新特性 功能:存储经纬度.计算两地距离.范围计算等 基于ZSet实现 删除操作使用 zrem key member GEO 相关命令 1.geoadd ke ...

  8. 关于redis的几件小事(二)redis线程模型

    1.memcached和redis有什么区别? (1)Redis支持服务器端的数据操作 redis和memcached相比,redis拥有更多的 数据结构并且支持更丰富的数据操作 ,通常在memcac ...

  9. 深入理解hadoop之机架感知

    深入理解hadoop之机架感知 机架感知 hadoop的replication为3,机架感知的策略为: 第一个block副本放在和client所在的datanode里(如果client不在集群范围内, ...

  10. Uncaught SyntaxError: Unexpected identifier

    $.ajax({ //请求头 type:"POST", contentType:"application/x-www-form-urlencoded", url ...