微信小程序页面和组件传值的详细总结

2024-07-25
来源:网络整理

小程序是微信新开放的能力,让开发者可以快速开发小程序。在微信中可以轻松创建小程序。

可以快速获取和传播,提供极佳的用户体验。您应该熟悉微信小程序的前端开发。

小程序很火,很多公司都会开发。这里就不多说小程序的优点了,今天我想说

总结一下微信小程序页面及组件值传递。

1.页面到页面值传递-带参数值的跳转url

微信小程序页面直接传值我们经常用到页面URL跳转值,通过生命周期跳转到页面

期间收到。

//第 A 页

页({

数据:{

},

:(){//页面事件绑定方法

让数据=' ';

wx.({

url: '//my/?name=' + 数据,

})

})

//第 B 页

页({

数据:{

姓名:' '

},

:(){//接收数据

这。({

名称: .name

})

})

如果页面有多个值需要传递,只需使用&将它们链接在一起。

例如,'//my/?name=' + +'&='+;

2. 页面到页面的值传递——全局值传递

//应用程序.js

应用程序({

(){

// 何时执行。

},

(){

// 显示时执行。

},

(){

// 隐藏时执行的操作。

},

(信息){

.log(消息)

},

:{

姓名:' '

})

//第 A 页

app = (); //获取全局对象

页({

数据:{

},

:(){

让名称 = 应用程序..名称;

.log(名称);//

})

全局数据是通过拿对象然后从其他页面获取的。当然你也可以

修改全局对象中的数据并从其他页面检索它。

//第 A 页

app = (); //获取全局对象

页({

数据:{

},

:(){

app..name='微信小程序'; //修改全局数据

})

//第 B 页

app = (); //获取全局对象

页({

数据:{

},

:(){

让名称 = 应用程序..名称;

.log(name);//微信小程序

})

2. 页面到页面的值传递——页面数据缓存wx.(KEY,DATA)

//第 A 页

页({

数据:{

},

:(){

wx.({

键:“名称”,

数据:”

})

})

//第 B 页

页({

数据:{

},

:(){

var = wx.('名称');

。日志();//

})

这里的数据缓存需要和wx.()进行同步,因为异步数据可能用不上。

接下来我们讲一下微信小程序组件在传值之前

组件间通信

组件之间通信有几种基本方式。

WXML 数据绑定:父组件使用它将数据设置到子组件的指定属性。只能设置 JSON 兼容的数据。

(自基础库 2.0.9 版本开始,您还可以在数据中包含函数。)这在组件模板和样式章节中有详细描述。

事件:子组件使用事件向父组件传递数据,可以传递任意数据。

如果上面两种方式不足以满足你的需求,父组件还可以通过this.方法获取子组件实例对象,这样你就可以直接访问该组件的任何数据和方法了。

说到组件,我们先来了解一下组件的使用,组件的js,json文件,页面都是不一样的。

构造函数

({

:[],

:{

: { // 属性名称

类型: ,

:''

},

: // 简化定义

},

data: {}, // 私有数据,可用于模板渲染

:{

// 生命周期函数,可以是中定义的函数或者方法名

: () { },

: () { },

: () { },

},

// 生命周期函数,可以是中定义的函数或者方法名

: () { }, // 此处的声明将被字段中的声明覆盖

: () { },

:{

// 组件所在页面的生命周期函数

展示: () { },

隐藏: () { },

: () { },

},

:{

:(){

这。({

// 更新属性和数据的方法和更新页面数据的方法类似

})

},

// 内部方法建议以下划线开头

:(){

// 这里,data.A[0].B 设置为 ''

这。({

‘A[0].B’:’’

})

},

: (, ) {

})

使用构建器构建页面

"": true, //这里定义为组件,否则引入到页面会报错

导入组件

//页面json

":{

"": "../..///", //引入组件

},

//一个页面的WXML

//接收数据

({

:{

姓名:{

: "",

type: //在这里设置数据类型,以便组件可以接收数据

},

:{

})

组件间通信和事件

监听事件

事件系统是组件之间通信的主要方式之一,自定义组件可以触发任意事件,引用组件的页面可以监听这些事件。自定义组件事件的监听方法与基本组件事件的监听方法完全相同:

页({

:(e){

e. // 自定义组件触发事件时提供的对象

})

触发事件

当自定义组件触发事件时,需要使用方法指定事件名称、对象和事件选项。

点击此按钮将触发“”事件

({

:{},

:{

:(){

var = {} // 对象,提供给事件监听函数

var = {} // 触发事件的选项

这。('', , )

})

分享