小程序 （四）

一、小程序中需要使用类似于vue的v-for该如何使用

wx:for="{{orderList}}" wx:for-item="item" wx:for-index="index" wx:key="orderListId"

orderList:[{

      imgSrc: "../../image/orderIcon.png",

      index: 0,

      title: "XXXX"

    },{

        imgSrc: "../../image/order.png",

        index: 1,

        title: "XXXX"

    },{

        imgSrc: "../../image/campIcon.png",

        index: 2,

        title: "XXXXX"

    }],

这里如果不写wx:key,就会报以下警告warning： Now you can provide attr "wx:key" for a "wx:for" to improve performance.

在循环体中要使用imgSrc就需要写 src="{{item.imgSrc}}"

二、通过点击事件传递参数

<view class="flex-item" wx:for="{{orderList}}" wx:for-item="item" wx:for-index="index" wx:key="orderListId" bindtap='linkToOrder' data-index="{{item.index}}">

这样写在js文件里，就可以这样写

linkToOrder: function(e) {

    console.log(e.currentTarget.dataset.index)

    console.log(e);

  }

就能拿到这个值

如果只要传递一个值，那么不需要借助data-

可以用Id代替

<view class="flex-item" wx:for="{{orderList}}" wx:for-item="item" wx:for-index="index" wx:key="orderListId" bindtap='linkToOrder' data-index="{{item.index}}" id="{{item.imgSrc}}">

接收的时候代码如下

console.log(e.currentTarget.id);

其中有几个要注意的，

data-后面加的名称不能有大写字母，如果想要用这个，可以用-连接单词，在js使用的时候可以直接把第二个单词首字母自动大写。data-这个里面是不可以存放对象的。

event中里面有两个，一个是target一个是currentTarget

前者触发事件的源组件，后者绑定当前组件。

当你在父元素上绑定了事件传参，那么点击父元素，currentTarget,target都可以拿到参数，如果你点的是子元素，那么，target就不是事件绑定的元素，就拿不到参数。因为有事件冒泡，

由于事件冒泡的机制，父元素上绑定的事件依然可以触发，所以currentTarget 可以拿到参数。

三、小程序页面的跳转

小程序跳转有多个方法

（1）wx.navigateTo 保留当前页面，跳转到应用内的某个页面，使用wx.navigateBack可以返回到原页面

     linkToOrder: function(e) {

    var index = e.currentTarget.dataset.index;

    if( index == 1){

      wx.navigateTo({

        url: '../travelOrder/travelOrder?id=' + index + '&test=20',

      })

    }

  },

这个时候要跳转过去的页面，通过这个可以接受页面传过来的值 

onLoad: function (options) {

    console.log(options)

  },

（2）wx.redirectTo关闭当前页面，跳转到应用内的某个页面。

     wx.redirectTo({

        url: '../travelOrder/travelOrder?id=' + index + '&test=20',

      })

（3）wx.switchTab跳转到tabBar页面，同时关闭其他非tabBar页面

    wx.switchTab({

        url: '../travelOrder/travelOrder',

      })

（4）wx.reLanch关闭所有页面，打开到应用内的某个页面

wx.reLanch({

    url: '../travelOrder/travelOrder?id=' + index + '&test=20',

})

（5）<navigator></navigator>

<view class='flex-item clearfix' wx:for="{{msgList}}" wx:for-item="item" wx:for-index="index" wx:key="msgListId" bindtap="linkToMe">

      <navigator url='../travelOrder/travelOrder?id={{item.imgSrc}}&test=20'>

      </navigator> 

</view>

四、小程序左上角的返回键

1.把该页面设置为tab页面或者主页;

2.进入该页面使用wx.reLaunch();

    wx.reLaunch({

        url:'../orderList/orderList',

    })

但是它会销毁其它所有的页面。