小程序是微信新开放的能力,让开发者可以快速开发小程序。在微信中可以轻松创建小程序。
可以快速获取和传播,提供极佳的用户体验。您应该熟悉微信小程序的前端开发。
小程序很火,很多公司都会开发。这里就不多说小程序的优点了,今天我想说
总结一下微信小程序页面及组件值传递。
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 = {} // 触发事件的选项
这。('', , )
})