小程序页面传值的几种方式--总结

ゞ浴缸里的玫瑰 2021-07-26 18:52 419阅读 0赞

### 一.  url传值 ###

**list.wxml:**

<view class="playIcon"  wx:for="{
       {list}}"  wx:key="item.id" id="{
       {item.id}}" data-phone="{
       {item.phone}}" bindtap="play"></view>

**list.js:**

play: function (e) {
        let phoneNum = e.currentTarget.dataset.phone;
        let id=e.currentTarget.id;
        wx.navigateTo({
          url: '/pages/list/listDetail?id=' + id,
        })
    }

**listDetail.js:**

onLoad: function (options) {
       this.setData({
          id: options.id
        })
    }

### 二.app.globalData  设置全局变量 ###

App({
        globalData: {
            userInfo: null,
            host:'http://localhost:8000'
        }
    })

**index.js:**

const app = getApp()
    // app.globalData = '这里也可以设置值',
    console.log(app.globalData.host)

小程序全局变量的定义和获取：在app.js中App(\{globalData:\{token:"token",url:"url"\}\}),在pages页面中先获取应用实例const app = getApp()，通过app.globalData.url获取这个全局变量

### 三.wx.setStorageSync（）/ wx.getStorageSync（）将值写在本地缓存里，最大支持10M ###

**list.js:**

存值到本地缓存

wx.setStorageSync('title',data)

**listDetail.js：**

从本地缓存取值

let info = wx.getStorageSync('title')
    console.log('info',info)

发表评论取消回复

表情：

评论列表（有 0 条评论，419人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue中几种传值的方式

[https://blog.csdn.net/weixin\_43026567/article/details/103474666][https_blog.csdn.net_w

野性酷女/ 2022年12月31日 02:24/ 0 赞/ 182 阅读

相关 React之组件传值的几种方式

[https://blog.csdn.net/amyloverice/article/details/80728983][https_blog.csdn.net_amylove

绝地灬酷狼/ 2022年12月26日 10:22/ 0 赞/ 192 阅读

相关小程序跳转页面几种方式

需求：从home.wxml跳转到detail.wxml页；一：js实现 1. navigateTo （有返回键，不可以跳转到tabBar页面） //保留

￡神魔★判官ぃ/ 2022年12月11日 07:29/ 0 赞/ 249 阅读

相关 springboot 整合Mybatis传值的几种方式

方式一：直接传接口 public interface UserMapper { public List<User> getUserById(int

桃扇骨/ 2022年10月09日 12:12/ 0 赞/ 177 阅读

相关 vuejs几种不同组件（页面）间传值的方式

在应用复杂时，推荐使用vue官网推荐的vuex，以下讨论简单SPA(single-page application 简称为 SPA)中的组件间传值。一、路由传值　　路由

忘是亡心i/ 2022年06月17日 13:28/ 0 赞/ 890 阅读

相关微信小程序--页面传值

> 首先说点什么呢, 因为公司需求, 我也开始跳到小程序的坑里了, 填坑之路艰辛而凄凉, 好啦虽然有很多坑, 但毕竟小程序才出现不久, 有坑也正常, 哈哈哈不扯淡了, 来说说小

雨点打透心脏的1/2处/ 2022年05月28日 08:50/ 0 赞/ 261 阅读

相关微信小程序页面传值的方式

假设把A页面的值传给B页面：首先是A页面传值相关的：页面设计： <view class='content' wx:for='{ {menuLis

一时失言乱红尘/ 2022年05月08日 11:34/ 0 赞/ 234 阅读

相关 .NET 页面间传值的几种方法

1. QueryString 　　这是最简单的传值方式，但缺点是传的值会显示在浏览器的地址栏中且不能传递对象，只适用于传递简单的且安全性要求不高的数值。　　传递：　　lo

朴灿烈づ我的快乐病毒、/ 2021年12月24日 03:19/ 0 赞/ 272 阅读

相关 ios常见的几种传值方式

在IOS里，常见的传值方式，我一般是分为确定执行顺序的传值和不确定执行顺序的传值。确定执行循序的传值，比如对象A创建对象B，然后A把值赋给B，然后B在指定的顺序里对这个值进

太过爱你忘了你带给我的痛/ 2021年11月29日 08:34/ 0 赞/ 340 阅读

相关小程序页面传值的几种方式--总结

一. url传值 list.wxml: <view class="playIcon" wx:for="{ {list}}" wx:key="

ゞ浴缸里的玫瑰/ 2021年07月26日 18:52/ 0 赞/ 419 阅读