小程序是一种新的开放能力，开发者可以快速地开发一个小程序。小程序可以在微信内被便

捷地获取和传播，同时具有出色的使用体验。对于微信小程序，前端开发应该不陌生，目前也

是非常火，很多公司都会进行开发。对于小程序的优点我就不到这过多描述了，今天我是想来

总结下微信小程序页面和组件传值。

微信小程序目录结构

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)
 }
 }
})