小程序组件里的数据传递

小程序组件里的数据传递,第1张

先上一段官方文档

文档说绝大多数初始化工作都在 attached 生命周期进行,但是小程序组件数据分为组件的内部数据 data: {} 和从页面传递过来的 properties: {} 。但是有个问题是在组件的 attached 中无法拿到使用组件的页面中setData的值。

给组件传递myString

组件接受myString

所以可以看出在组件里 mySrting 在 created 取的是组件的默认值, attached 取的是页面里 data 的初始数据, ready 取的才是页面 setData 之后的值。具体原理应该要研究下组件的生命周期函数的源码了,可能是在组件 attached 之后页面才 onLoad 。反正直接在组件里使用 mySrting 就不会有这些问题,但如果想用页面 setData 后的 myString 来对组件的数据初始化,就只能放在组件的 ready 里而不能放在 attached 里、

在微信小程序中,数据缓存其实就和localstorage 的原理差不多,所以理解起来并不难。下面我们来一起实现一下。

效果图展示:

我们在index页面存入数字11,然后在跳转到新页面,在将缓存中的11取出渲染到当前页面。具体代码如下:

index页面:

跳转到新的页面post情求

跳转到当前页面

存入

1234567891012345678910

index的js:

//indexjs

//获取应用实例

var app = getApp()

Page({

data: {

storage:''

},

onLoad: function () {

var that = this

//获取输入值

getInput:function(e){

thissetData({

storage:edetailvalue

})

},

//存储输入值

saveInput:function(){

wxsetStorageSync('storage', thisdatastorage)

}

})

12345678910111213141516171819202122231234567891011121314151617181920212223

跳转页面:

从存储中得到的数据:{{storage}}11

跳转页面的js:

var app = getApp();

var that;

Page( {

data: {

storage:''

},

onLoad: function(options) {

that = this;

//获取存储信息

wxgetStorage({

key: 'storage',

success: function(res){

// success

thatsetData({

storage:resdata

})

}

})

}

})

1、在MYSQL中新建一个test数据库,在里面新建一张type数据表,下面将从该表获得数据。

2、新建一个project小程序项目。

3、在project项目内,新建一个index模块来从数据库获得数据,并将数据输出在indexwxml页面。

4、在index模块中indexjs页面,在onLoad中使用wxrequest方法向服务端文件请求数据。url为请求数据的地址;data为传输的参数,这里设置为空;method为传递参数的方式,header用于设置请求的数据类型,success是成功获得数据后的 *** 作。

5、在indexwxml页面,使用for循环遍历输出indexjs传递过来的数据data,通过item将data数据输出在页面。

6、在服务端新建一个apiphp页面来接收微信小程序的数据请求。

7、最后编译微信小程序,查看从数据表type获得数据内容,成功从数据库读取数据并输出在页面上。

以上就是关于小程序组件里的数据传递全部的内容,包括:小程序组件里的数据传递、微信小程序怎么进行数据缓存、微信小程序获取JSON数据时遇到多维数组,请教如何获取数据等相关内容解答,如果想了解更多相关内容,可以关注我们,你们的支持是我们更新的动力!

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zz/10120719.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-05
下一篇 2023-05-05

发表评论

登录后才能评论

评论列表(0条)

保存