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

发表于 作者 jiukeshuju
  • 一、使用全局变量传递数据
  • 二、本地存储传递数据
  • 三、使用路由传递数据
  • 四、父子组件之间传值
  • 附：解决微信小程序跳转url传参对象数据过长报错的问题

 

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

提示：利用 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了！！！！

可以参考学习如下网站内容：

发表评论