1组件传递内容给页面

1.给组件设置myevent事件，通过this.triggerEvent('myevent',myEventDetail)触发该myevent事件并传递内容，在页面用onMyEventshi事件监听传递过来的数据。

2.Page({

3.//监听myevent事件

4.onMyEvent:function(e){

5.console.log('接收a组件传递的内容:',e.detail)//'我是a组件'

6.}})

7.组件

8.点击Component({

9.properties:{}methods:{

10.onTap:function(){

11.varmyEventDetail='我是a组件'

12.this.triggerEvent('myevent',myEventDetail)//触发组件上的“myevent”事件

13.}}

14.})

2组件与组件通信

15.两个无任何关联的组件：通过全局变量或本地缓存传递数据

16.两个有关联的组件(同一个父页面下)：通过上面的方法，用组件=页面=组件的方式传递数据。

17.2.页面之间的通信

18.2-1.使用全局变量app.globalData

19.2-2.使用本地缓存wx.setStorageSync

20.2-3.url传递

21.//A页面-传递数据

22.//需要注意的是，wx.switchTab中的url不能传参数。

23.wx.navigateTo({

24.url:'../pageD/pageD?name=raymond&gender=male'

25.})

26.//B页面-接收数据//

27.通过onLoad的option...Page({

28.onLoad:function(option){

29.console.log(option.name+'is'+option.gender)//raymondismale

30.this.setData({option:option})

31.}})

2-2后一级页面对前一级页面的数据的管理(通过获取到页面对象进行数据操作)

32.这个方法的精髓，是通过获取到其他页面的对象原型，然后通过原型方法setData对当前对象管理的data进行修改

33.示例如下：

34.//pageE.js

35.Page({

36.data:{

37.index:1

38.}})

39.当跳转到下一个页面F之后，假定在F中有操作需要对E中的数据有修改，则可以使用以下方法：

40.这个方法可以操作页面堆栈里面的页面的数据，可以做到让后一级页面对上级页面群的数据管理。

41.//pageF.js

42.Page({

43.changeIndexInE:function(){

44.varpages=getCurrentPages();

45.varprevPage=pages[pages.length-2];

46.prevPage.setData({

47.index:0

48.})

49.}})

3，页面与模板之间的通信

50.传入模板的除了变量，还可以是事件方法对象。例如，模板中的点击事件，可以传递到使用模板的元素中。

51.页面

52.Page({

53.data:{

54.item:{

55.index:0,

56.msg:'thisisatemplate',

57.time:'2016-09-15'

58.}}

59.})

一.跨页面传值.

60.1.用navigator标签传值或wx.navigator,比如

61.

62.图片.png

63.这里将good_id=16参数传入detail页面,然后detail页面的onload方法内接受.

64.

65.图片.png

66.如果需要传多个参数,用&链接即可

67.

68.图片.png

69.

70.图片.png

71.如果要传数组,字典等复杂类型,要先用JSON.stringify()转成字符串传递.

72.

73.图片.png

74.注:如果转化的字符串中有"?"这个符号,则只会传递"?"以前的字符串,这个问题我猜想可能是小程序内部的路由处理对这个"?"敏感吧好,这是第一种依靠跳转的url带参数传值

75.2.用getCurrentPages()获取栈中全部页面的,然后把数据写入相应页面.

76.2.1.先获取全部页面,取出来是个数组,然后用下标定位

77.

78.图片.png

79.注：这里这个__route__是一个属性，在最新的小程序中，已经可以用route这个属性替换，即图中的arr[arr.length-2].__route__与arr[arr.length-2].route等效。

80.

81.图片.png

82.这里可以传字符串,也能传数组等,这样就把address传递并接受了

83.注:这个方法适合往后面传值(即已经存在的页面),这样才能在栈中找到并主动写入数据,且一定要在onshow()方法中接受,因为再次返回只执行onshow()方法.

2.2这里是在当前页面直接赋值前一个页面的data,所以要在前一个页面的onshow()方法中做设置,确保数据传递并更新到视图层,但这个这个方法有一个问题,就是当前页面直接赋值时,容易造成时序问题,导致数据错乱.推荐以下这种写法

84.

85.推荐这一种写法.png

86.

87.与上面一种的对比.png

88.注:是不是很熟悉?只是用系统的setData()替换了直接赋值,其实arr[arr.length-2]就类似于this/that,而arr[arr.length-2]就相当于前一页的this/that,且这样写,在前一页的onshow()还不用设置,数据传递与更新视图层一键搞定.

89.

90.onshow()方法截图.png

91.3.写入本地,跨页面在取出来wx.setStorage/wx.getStorage等,小程序中对写入本地数据封装了很多方法,各有侧重,这里就不多说了

92.

93.图片.png

94.

95.图片.png

96.4.把数据声明为全局变量,可在任何页面获取

97.vardetail=getApp().detail;

二.页内传值

98.1.设置id的方法标识跳转后传递后的参数

99.

100.图片.png

101.在bindtap定义的点击方法swiperTap:function(e)中获取

102.varid=e.currentTarget.id;

103.2.设置data-xxx的方法来标识要传递的值

104.

105.图片.png

106.注:这里data-index="{{index}}"里的{{index}}是有效的,在用wx-for渲染视图层时,index代表点击的下标.在bindtap定义的点击方法swiperTap:function(e)中获取,即

107.varindex=e.currentTarget.dataset.index;

108.其他的参数取出也如此,

vartype=e.currentTarget.dataset.type;

109.3.form表单和input输入框

110.

111.图片.png

112.

113.图片.png

114.

115.图片.png

116.

117.图片.png