微信小程序开发-数据绑定与传递

在小程序学习过程中，遇到了数据传递的问题-在同一页面的js文件和wxml文件中传递以及不同页面的数据传递，查找了网上的资料后写一点自己的总结与心得

同一页面的js和wxml中传递数据

                首先是数据绑定

 <view class="box" wx:for="{{bookList}}" wx:key='id'  bindtap="showBookIntro" data-id="{{item.id}}" data-price="{{item.price}}" data-coverurl="{{item.coverurl}}"
  data-author="{{item.author}}" data-title="{{item.title}}" data-isbn="{{item.isbn}}" data-fileid="{{item.fileid}}">

                wx:for中是要循环的列表；wx:key给小程序的diff算法提供标识支持，添加元素或改变元素顺序时，可通过key识别使组件保持自身的状态;bindtap是触发函数，这这里我们需要把数据传递到showBookIntro函数，并且在js文件中使用。data-自定义名称（这里可以随便写，不用跟属性名相同，但最后在js文件中使用的是在这里定义的名称）；在for循环中对象统一用item表示，item.对象属性名。

                这边定义完了，我们就可以在js文件中获取当前对象的数据

showBookIntro:function(e){
    let id=e.currentTarget.dataset.id
    let price=e.currentTarget.dataset.price
    let coverurl=e.currentTarget.dataset.coverurl
    let title=e.currentTarget.dataset.title
    let isbn=e.currentTarget.dataset.isbn
    let author=e.currentTarget.dataset.author
    let fileid=e.currentTarget.dataset.fileid
    }

                e是当前点击触发的事件，e.currentTarget.dataset当前对象携带的数据，也就是之前我们绑定的，后面加上我们在data-（）的自定义名称。到这里我们就可以在js中使用wxml的数据。

不同页面页面的数据传递

1、wx.navigateTo

wx.navigateTo不仅能实现页面跳转，同时还能携带数据，以上面的showBookIntro为例，获取到了数据后，要把这些数据传递到其他的页面

wx.navigateTo({
      url:`/pages/intro/intro?id=${id}&price=${price}&coverurl=${coverurl}&title=${title}&author=${author}&isbn=${isbn}&fileid=${fileid}`
    })

                url：`页面路径?传递属性名=${上面命名的属性名}`

                传递属性名是你希望传递到其他页面后的名称，在这边可自己定义，上面命名的即之前获取数据时let的命名。

                这里将信息从index.js传递到intro.js中，传递完成后打印出来的结果

                这里需要注意的是 ` 不是单引号 ' ，是跟波浪号~一起的那个按键

全局变量

                我们在app.js文件中定义后，即可在不同的页面中使用该数据

                在app.js文件中的定义

App({
  globalData:{
   newid:'',
   allbookList:[],
   isRenew:false,
  },

                在js文件中使用全局变量，需要在js文件的开头写上：                                             const app=getApp({allowDefault:true})

这里allowDefault:true不写也可以，但我不写全局变量无法使用，不知道为什么。。。

在使用全局变量的时候是app.globalData.变量名。