微信小程序传值常用的4种方式

 更新时间:2023年05月29日 15:19:14   作者:z_星河  
微信小程序开发中的大部分知识点和前端开发是一模一样的,这篇文章主要给大家介绍了关于微信小程序传值常用的4种方式,文中通过实例代码介绍的非常详细,需要的朋友可以参考下

一、使用全局变量传递数据

提示:利用 app.js 中的 globalData 将数据存储为全局变量,在需要使用的页面通过 getApp().globalData 获取

// 步骤一:在全局app.js文件中定义数据
App({
  globalData: {
    userName: '全局变量传值',
  }
})
 
// 步骤二:获取应用实例,不然无法调用全局变量
const app = getApp()
 
// 步骤三:调用全局变量
Page({
  data: {
  
  },
  onLoad: function (options) {
    console.log(app.globalData.userName);
  },
})

二、本地存储传递数据

提示:利用微信小程序提供的本地存储 wx.setStorageSync 与 wx.getStorageSync 进行传值。

 设值:wx.setStorageSync('title', title)
 取值:var title=wx.getStorageSync('title')

三、使用路由传递数据

传递:

// 跳转的同时携带数据拼接在URL后面,跳转到的页面利用onLoad()方法的参数options即可获取到传递的参数
wx.navigateTo({
     url: `跳转路由?data=${data}`,
})

接收:

onLoad(options){
    console.log(options)
}

注意:如若因为传递的是对象类型的数据,到另一个页面获取时会发现是"[object,object]",解决方法是利用JSON.stringify()和JSON.parse()

传递:

const data = JSON.stringify(this.data);
wx.redirectTo({
   url: `跳转url?data=${data}`
})

接收:

onLoad(options){
    const data = JSON.parse(JSON.stringify(options.data));
}

四、父子组件之间传值

  • 父向子传值使用的是属性绑定,子组件中 的 properties 对象 进行接收父组件传递过来的值
  • 子向父传值使用的是自定义事件,父组件通过自定义事件中的 事件对象e 来接收子组件传递过来的值

父向子传值

  • 创建一个 components 文件夹 用于存放子组件。在 components 文件夹下创建我们的子组件 child , 创建成任何名字都可以,这里创建成 child 。

  • 创建好以后就是引入,把子组件 child 引入到父组件 index 中去。 这里说明一下,此案例创建了两个页面,一个是 pages 节点下的 index 路由页面,一个是 components 节点下的 child 组件  。     
//在父组件的 json 文件中的 usingComponents节点下 引入
{
  "usingComponents": {
    "child":"../../components/child/child"
  }
}
  • 渲染子组件内容到父组件上

给组件起的自定义名字是 child 那么 我们渲染的时候就 在 index 父组件 里写上一组 <child><child> 标签即可

  • 父组件
<child name="{{ name }}" age="{{ age }}" ></child>
export default{
    data(){
        return{
            name:"老五",
            age:50
        }
    }
}

子组件

<view>
  这是父组件传递过来的值 name: {{ name }}-----age {{age}}
</view>
 
// 接受父组件传递过来的值
  properties: {
    name:{
      type:String,
      value:'我是默认值:哈哈'
    },
    age:{
      type:Number,
      value:'我是默认值: 100'
    }
  },

子向父传值

  • 子组件

WXML

<!-- 点击按钮向父组件传值 -->
<button bindtap="send">点击按钮向父组件传值</button>

JS

​
​  data: {
    msg:'我是子组件的值'
  },
  methods: {
    send(){
      this.triggerEvent('send',this.data.msg)
    }
  },
 
  • 父组件

父组件中定义一下这个自定义事件bindsend="send"

WXML

<child  name="{{ name }}" age="{{ age }}" bindsend="send"></child>

JS

 // 父组件接受子组件传递过来的值
  send(e){
    console.log(e.detail);
  }

附:解决微信小程序跳转url传参对象数据过长报错的问题

最近开发微信小程序 碰到的一个小问题,那就是 跳转url的时候,传对象数据过长的问题,小程序在传对象的时候要先用JSON.stringify()转换一下,接受页面在用JSON.parse()再转换回来。

但是这样有一个问题,数据过长会报错,或者是只拿到了一部分

这个时候我们就需要用到两个 方法

encodeURIComponent(obj) 跳转url时的转换方法 decodeURIComponent(options.obj) 页面接收参数页面的转换方法

这样就OK了!!!!

总结

到此这篇关于微信小程序传值常用的4种方式的文章就介绍到这了,更多相关微信小程序传值方式内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • JavaScript async/await的使用场景与规范

    JavaScript async/await的使用场景与规范

    Async/Await是JavaScript ES8引入的用于处理异步操作的语法糖,它建立在Promises的基础上的,这篇文章主要介绍了JavaScript async/await的使用场景与规范的相关资料,需要的朋友可以参考下
    2025-06-06
  • JS 仿腾讯发表微博的效果代码

    JS 仿腾讯发表微博的效果代码

    这篇文章主要介绍了JS 仿腾讯发表微博的效果代码,有需要的朋友参考一下
    2013-12-12
  • javaScript日期工具类DateUtils详解

    javaScript日期工具类DateUtils详解

    这篇文章主要为大家详细介绍了javaScript日期工具类DateUtils,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-12-12
  • 对js eval()函数的一些见解

    对js eval()函数的一些见解

    下面小编就为大家带来一篇对js eval()函数的一些见解。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-08-08
  • JavaScript实现通过滑块改变网页颜色

    JavaScript实现通过滑块改变网页颜色

    这篇文章主要为大家详细介绍了JavaScript实现通过滑块改变网页颜色,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-08-08
  • JavaScript实现浅拷贝与深拷贝的方法分析

    JavaScript实现浅拷贝与深拷贝的方法分析

    这篇文章主要介绍了JavaScript实现浅拷贝与深拷贝的方法,结合实例形式总结分析了JavaScript浅拷贝与深拷贝的定义与使用方法,需要的朋友可以参考下
    2018-07-07
  • 基于JavaScript实现线性渐变的高斯模糊效果

    基于JavaScript实现线性渐变的高斯模糊效果

    这篇文章主要为大家详细介绍了高斯模糊算法以及线性渐变的高斯模糊算法的原理,并通过一个小demo展示了如何实现y方向上线性渐变的高斯模糊效果,需要的可以了解下
    2024-01-01
  • javascript实现雪花飘落效果

    javascript实现雪花飘落效果

    这篇文章主要为大家详细介绍了javascript实现雪花飘落效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-08-08
  • 一文详解TypeScript跟js、es6这些的区别

    一文详解TypeScript跟js、es6这些的区别

    TypeScript和JavaScript是目前项目开发中较为流行的两种脚本语言,这篇文章主要给大家介绍了关于TypeScript跟js、es6这些区别的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2025-05-05
  • 点击标签切换和自动切换DIV选项卡

    点击标签切换和自动切换DIV选项卡

    点击标签切换DIV的效果,在很多地方都有见到过,而且实现的方法有很多,本例介绍的这个可以切换和自动切换DIV选项卡
    2014-08-08

最新评论