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

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

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

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

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对象和事件选项

项目开发中，我们很多时候都会遇到需要点击按钮跳转页面的情况。HTML中我们使用<a></a>标签或者监听标签的onclick事件来达到预期效果，而在小程序中，官方提供了以下六种跳转方式。

• wx.switchTab（API） 跳转到tabBar页面，并关闭其他所有非tabBar页面
• wx.reLaunch（API） 关闭所有页面，打开到应用内的某个页面
• wx.redirectTo（API）关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到tabbar页面。
• wx.navigateTo（API）保留当前页面，跳转到应用内的某个页面，但是不能跳转到tabbar页面。使用wx.navigateBack可以返回到原页面。
• wx.navigateBack（API）关闭当前页面，返回上一页面或多级页面。可以通过getCurrentPages获取当前的页面栈，决定需要返回几层。
• navigator（组件）页面中使用链接跳转，相当于HTML中的<a></a>标签用法

很多时候我们都需要在页面跳转时进行传值，以上六种方式中只有wx.switchTab和wx.navigateTo不能传递参数外，其他四种都可以带参数进行页面跳转。而我们跳转一般都需要保留当前页面，不需要对当前页面进行销毁，所以我们选择组件navigator或者API 接口中的wx.navigateTo来实现带参数跳转效果。

在2.7.3基础库版本之前，两者跳转方式都是在url后拼接参数。如“path?key=value&key2=value2”。但在2.7.3基础库之后，官方提供了一种新的参数传递方式，但只在wx.navigateTo接口中有效。

我们该选择哪种跳转方式？

如何选择跳转方式，并不是根据我们心情去选择的，我们应该根据实际业务以及参数类型等来选择跳转方式。

两种方式对字符串传递的比较：

//index.wxml
	<!-- 使用navigator组件实现传参跳转 -->
	<navigator url="/pages/news/news?type=IT内容" open-type="navigate">跳转到内容发布页面（navigator）</navigator>
	<!-- 绑定按钮点击事件，使用常规方式 -->
	<button bindtap="skipNewsPage">跳转到内容发布页面（button）</button>
	<!-- 绑定按钮点击事件，使用2.7.3基础库提供的新方式 -->
	<button bindtap="skipNewsPageEvents" plain="true">跳转到内容发布页面（button）</button>

//index.js 
//常规跳转方式 
skipNewsPage: function(e) { 
wx.navigateTo({ url: "/pages/news/news?type=IT内容" }); 
}, 
//新方法跳转方式 
skipNewsPageEvents: function(e) { 
wx.navigateTo({ 
url: "/pages/news/news", 
events: { 
acceptType: function(data) { 
console.log(data); 
}
 }, 
success: (res)=> { 
//通过eventChannel向被打开页面传递数据 res.eventChannel.emit('acceptType', {type: "IT内容"});
 } 
}) 
}

//news.js 
onLoad: function (options) { 
var that=this; 
/** 
* 使用navigator或wx.navigateTo在url后直接带参数都可以这样获取值 
*/ 
var navType=options.type; 
console.log("url直接带参数传递：" + navType) 
/** 
* 使用2.7.3基础库之后的方式需要这样获取 
*/ 
const eventChannel=that.getOpenerEventChannel(); eventChannel.on('acceptType', function(data) { 
console.log("新方式传递参数：" + data.type); 
}); 
}

从以上输出内容我们可以看出两者在传递字符串（数值类型也是如此）时是没有区别的，相对于直接在url后跟参数，使用events方式传递参数代码编写比较多，且需要在显示页面进行获取。因此若传递参数为字符串时，我们可以依然使用传统的url后跟参数的方式跳转。

传递数组参数的比较：

我们将上述代码中的type值改为type=['1','2','3']，从运行结果我们可以看出，使用url后拼接参数的方式传递过来的值是字符串类型，而不是我们的数组，因此在使用时需要使用JSON.parse()转换。而events方式传递来的值依旧是数组。这两种方式各有优势，选择时建议使用events传值，不需要做JSON转换。

传递对象参数的比较：

我们将上述代码中type的值改为对象item={'a':1,'b':2,'c':3},从运行结果来看，我们使用url后跟参数的方式传递参数在页面取到的值为[Object object]，我们最终获取对象中的某个值时，其报错找不到对象属性。而使用events传递参数时，不存在这个问题，对象依旧是对象，因此在选择时，我们若传递对象或者数组对象，那么应该使用events的方式传递参数。

综上所述，我们在开发中直接使用events传递参数的方式，这样避免了参数类型不明确时导致的错误。