小程序是一种新的开放能力，开发者可以快速地开发一个小程序。小程序可以在微信内被便
捷地获取和传播，同时具有出色的使用体验。对于微信小程序，前端开发应该不陌生，目前也
是非常火，很多公司都会进行开发。对于小程序的优点我就不到这过多描述了，今天我是想来
总结下微信小程序页面和组件传值。
1.页面与页面传值-跳转的url带参传值
微信小程序页面直接传值我们经常用到的是页面URL跳转传值，跳转到的页面通过到生命周
期onLoad里面接收。
//A页面
Page({
data:{
},
linkTo:function(){//页面事件绑定方法
let data = 'hello world';
wx.navigateTo({
url: '/pages/my/index?name=' + data,
})
}
}）
//B页面
Page({
data:{
name:' '
},
onLoad:function(option){//接收数据
this.setData({
name: option.name
})
}
}）
如果页面有多个值要传，直接用&符合链接起来就可以了。
比如'/pages/my/index?name=' + data1+'&number='+data2;
2.页面与页面传值-全局globalData传值
//app.js
App({
onLaunch (options) {
// Do something initial when launch.
},
onShow (options) {
// Do something when show.
},
onHide () {
// Do something when hide.
},
onError (msg) {
console.log(msg)
},
globalData: {
name:'hello world'
}
})
//A页面
const app = getApp();//获取全局对象
Page({
data:{
},
onLoad:function(){
let name = app.globalData.name;
console.log(name);//hello world
}
}）
全局数据的拿去是通过拿去globalData对象，再到其他页面获取，当然你也可以
修改全局对象里面数据其他页面从新去获取。
//A页面
const app = getApp();//获取全局对象
Page({
data:{
},
onLoad:function(){
app.globalData.name='微信小程序'; //修改全局数据
}
}）
//B页面
const app = getApp();//获取全局对象
Page({
data:{
},
onLoad:function(){
let name = app.globalData.name;
console.log(name);//微信小程序
}
}）
2.页面与页面传值-页面数据缓存wx.setStorageSync(KEY,DATA)
//A页面
Page({
data:{
},
onLoad:function(){
wx.setStorage({
key:"name",
data:"hello world"
})
}
}）
//B页面
Page({
data:{
},
onLoad:function(){
var value = wx.getStorageSync('name')；
console.log(value);// hello world
}
}）
此处缓存数据要用同步wx.setStorageSync(),因为异步有可能数据或者有可能会获取不到
下面我们来说说 微信小程序组件之前传值
组件间通信
组件间的基本通信方式有以下几种。
WXML 数据绑定：用于父组件向子组件的指定属性设置数据，仅能设置 JSON 兼容数据
（自基础库版本 2.0.9 开始，还可以在数据中包含函数）。具体在 组件模板和样式 章节中介绍。
事件：用于子组件向父组件传递数据，可以传递任意数据。
如果以上两种方式不足以满足需要，父组件还可以通过 this.selectComponent 方法获取子组件实例对象，这样就可以直接访问组件的任意数据和方法。
说到组件，这里我们先了解组件的使用，组件的js、json文件和页面不一样。
Component构造器
Component({
behaviors: [],
properties: {
myProperty: { // 属性名
type: String,
value: ''
},
myProperty2: String // 简化的定义方式
},
data: {}, // 私有数据，可用于模板渲染
lifetimes: {
// 生命周期函数，可以为函数，或一个在methods段中定义的方法名
attached: function () { },
moved: function () { },
detached: function () { },
},
// 生命周期函数，可以为函数，或一个在methods段中定义的方法名
attached: function () { }, // 此处attached的声明会被lifetimes字段中的声明覆盖
ready: function() { },
pageLifetimes: {
// 组件所在页面的生命周期函数
show: function () { },
hide: function () { },
resize: function () { },
},
methods: {
onMyButtonTap: function(){
this.setData({
// 更新属性和数据的方法与更新页面数据的方法类似
})
},
// 内部方法建议以下划线开头
_myPrivateMethod: function(){
// 这里将 data.A[0].B 设为 'myPrivateData'
this.setData({
'A[0].B': 'myPrivateData'
})
},
_propertyChange: function(newVal, oldVal) {
}
}
})
使用 Component 构造器构造页面
{
"component": true,//这里是它把定义成组件，要不然引入到页面会报错
}
引入组件
//A页面 json
{
"usingComponents": {
"myComponents": "../../components/myComponents/index",//引入组件
},
}
//A页面 WXML
<myComponent name="hello world"></myComponent>
//myComponent接收数据
Component({
properties: {
name:{
value: "",
type: String //此处设置数据类型 这样 组件就能接收到数据
}
},
methods: {
}
})
组件间通信与事件
监听事件
事件系统是组件间通信的主要方式之一。自定义组件可以触发任意的事件，引用组件的页面可以监听这些事件。监听自定义组件事件的方法与监听基础组件事件的方法完全一致：
<!-- 当自定义组件触发“myevent”事件时，调用“onMyEvent”方法 -->
<myComponent bindmyevent="onMyEvent"></myComponent>
<!-- 或者可以写成 -->
<myComponent bind:myevent="onMyEvent"></myComponent>
Page({
onMyEvent: function(e){
e.detail // 自定义组件触发事件时提供的detail对象
}
})
触发事件
自定义组件触发事件时，需要使用triggerEvent方法，指定事件名、detail对象和事件选项
<!-- 在自定义myComponent组件中 -->
<button bindtap="onTap">点击这个按钮将触发“myevent”事件</button>
Component({
properties: {},
methods: {
onTap: function(){
var myEventDetail = {} // detail对象，提供给事件监听函数
var myEventOption = {} // 触发事件的选项
this.triggerEvent('myevent', myEventDetail, myEventOption)
}
}
})
