1. 使用全局变量实现数据传递
2. 页面跳转或重定向时,使用url带参数传递数据
3. 使用组件模板 template传递参数
4. 使用缓存传递参数
5. 使用数据库传递数据

1. 全局APP

app.js和app.wxss中的代码都是全局生效的,所以我们可以利用这一点儿,在不同页面之间进行传值。

//往globalData设置值
getApp().globalData.data = "12345";
//取globaData的值
var data = app.globalData.data;

App({
  globalData: {
    data:XXX
  }
})

GlobalData可以随时在页面中读取和存储数据,比Storage方便很多。
但是,在其他页面读取以及修改globalData。不论是读取还是修改,首先需要在应用的页面js文件中,引用app()实例,所以在js文件中,第一句要写上这句:

var app = getApp();

2. URL传值

这种方式最常用,比如:

wx.navigateTo({
  url: '../detail/detail?cid='+cid+'&token='+token
})

这里面直接通过跳转页面的URL进行传值,然后在另一个页面进行接收:

onLoad: function (opt) {
  console.log('cid =' + opt.cid);
  console.log('access_token =' + opt.access_token);
}

传递字符串

 var model = this.data.str;
    wx.navigateTo({
      url: '../detail/detail?model=' + model,
    })

在下个页面的onload中获取

  onLoad: function (options) {
    var bean = options.model;
    console.log(options.model)
    this.setData({
        model:bean
    })
  }

传递对象

通过提供的JSON.stingify方法,将对象转换成字符串后传递

 var model = JSON.stringify( model);
 wx.navigateTo({
    url: '../detail/detail?model=' + model,
  })  
  //接收
onLoad: function (options) {
//将字符串转换成对象
 var bean = JSON.parse(options.model);
}

注意,传递对象有时会出现错误Uncaught SyntaxError: Unexpected end of input

使用encodeURICompoent与decodeURIComponent来解决即可

	//传递时
	//encodeURICompoent JSON.stringify(model);
	var model = JSON.stringify( model);
	 wx.navigateTo({
	    url: '../detail/detail?model=' + encodeURICompoent(JSON.stringify(model)),
	  }) 
	
	//接收时
	//JAON.parse(decodeURIComponent(model));
	onLoad: function (options) {
	 var bean = JSON.parse(decodeURIComponent(options.model));
	}

这种传值方式只适合值比较少的时候使用,传值比较多的时候,还是建议写本地缓存~

3. 使用组件模板 template传递参数

父组件向子组件传值( properties )

1、父组件的json文件中声明对引用子组件

// parents.json
{
  "usingComponents": {
    "w-child": "/components/child/child"
  }
}

2、父组件的wxml中使用子组件

父组件中使用子组件标签,并在标签上写自定义属性对子组件进行传递数据

<!-- parents.wxml-->
<w-child fatherName='winne' fatherAge='22'></w-child>

3、子组件在js中获取父组件中传过来的值

properties是组件的对外属性,是属性名到属性设置的映射表,属性设置中可包含三个字段, type 表示属性类型、 value 表示属性初始值、 observer 表示属性值被更改时的响应函数

// child.js
properties: {  // 在这里拿到了数据之后可以直接使用了(在wxml模板渲染,或者js中使用this.data.fatherName/this.properties.fatherName 都能获取到),不要直接修改properties属性中的数据
  fatherName: {
    type: String
  },
  fatherAge: Number
}


官网提示:在 properties 定义段中,属性名采用驼峰写法(fatherName);在 wxml 中,指定属性值时则对应使用连字符写法(father-name=“winne”),应用于数据绑定时采用驼峰写法(attr="{{fatherName}}")。

其实我们也可以全都使用驼峰写法(可能会低版本的微信不支持)。

详细组件的配置解析请看官网:
https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/component.html

子组件向父组件传值( this.triggerEvent() )

需要子组件手动触发事件,然后父组件监听事件

1、子组件触发自定义事件,传递数据给父组件

<!-- child.wxml-->
<view class="navi-item" data-index="0" bindtap="onChangeAnchor">tab</view>

2. 子组件在点击事件中主动触发自定义事件

// child.js
onChangeAnchor(e) {
      var index = e.target.dataset.index      
      //子组件传值给父组件
      let myEventDetail = { // 需要传递什么数据就在这个对象中写
        val: index
      }
      // myEventDetail 对象,提供给事件监听函数的参数数据
      // changeNaviIndex 是自定义名称事件,父组件中监听使用
      this.triggerEvent('changeNaviIndex', myEventDetail)
    }

3. 父组件wxml中监听子组件的自定义事件

<!-- parents.wxml-->
<!-- 注意这里写的事件监听名字-->
 <w-child bind:changeNaviIndex="onGetIndex" />

3. 父组件的js中书写事件函数,获取子组件传递过来的数据

// parents.js
  onGetIndex( paramData) { // paramData参数就是子组件的this.triggerEvent()
    console.log(paramData.detail.val)  // 0
  }

4. 本地缓存

小程序API提供了本地缓存数据的API,默认可以缓存10M的数据,如下:

wx.setStorageSync('checkin', checkin);

checkin是一个object,在需要的页面直接调用wx.getStorageSync即可获取,这样就解决了传值较少的问题了。

参考原文:
https://blog.csdn.net/m0_38134431/article/details/88788032?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-2.channel_param&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-2.channel_param

https://blog.csdn.net/weixin_34218579/article/details/86977664

Logo

有“AI”的1024 = 2048,欢迎大家加入2048 AI社区

更多推荐