先上一段官方文档
文档说绝大多数初始化工作都在 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数据时遇到多维数组,请教如何获取数据等相关内容解答,如果想了解更多相关内容,可以关注我们,你们的支持是我们更新的动力!
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)