微信小程序页面跳转 微信小程序页面传值、组件间通信总结

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

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

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

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

微信小程序目录结构

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.jsApp({ 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接收数据Component({ properties: { name:{ value: "", type: String //此处设置数据类型 这样 组件就能接收到数据 } }, methods: { } })

组件间通信与事件

监听事件

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

Page({ onMyEvent: function(e){ e.detail // 自定义组件触发事件时提供的detail对象 }})

触发事件

自定义组件触发事件时，需要使用

triggerEvent

方法，指定事件名、detail对象和事件选项

点击这个按钮将触发“myevent”事件Component({ properties: {}, methods: { onTap: function(){ var myEventDetail = {} // detail对象，提供给事件监听函数 var myEventOption = {} // 触发事件的选项 this.triggerEvent('myevent', myEventDetail, myEventOption) } }})