微信小程序基础(4)

wx.for

在组件上使用 wx:for 控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。

  {{index}}: {{item.message}}

Page({
  data: {
    array: [{
      message: 'foo',
    }, {
      message: 'bar'
    }]
  }
})

wx.setStorage(Object object)

将数据存储在本地缓存中指定的 key 中。会覆盖掉原来该 key 对应的内容。除非用户主动删除或因存储空间原因被系统清理，否则数据都一直可用。单个 key 允许存储的最大数据长度为 1MB，所有数据存储上限为 10MB。

导航跳转的几个区别

# wx.navigateTo(Object object)

保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面。使用 wx.navigateBack可以返回到原页面。小程序中页面栈最多十层。

wx.navigateBack(Object object)

关闭当前页面，返回上一页面或多级页面。可通过 [getCurrentPages]获取当前的页面栈，决定需要返回几层。

wx.redirectTo(Object object)

关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面。

解释:比如一个页面栈，目前处于A页面，通过redirectTo跳转到B页面，但是b页面返回的话，无法返回到

wx.switchTab(Object object)

跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面

出现BUG

image.png

原因

change页面传递参数的时候,自己设置的参数多加了一个空格，导致传递的参数错误

data-lang=" {{language.lang}}"

data-lang=" {{language.lang}}"

历史页面传递参数

onTapItem: function (e) {
    wx.reLaunch({
      url: `/pages/index/index?query=${e.currentTarget.dataset.query}`
    })
  }

这里进行页面数据的跳转，通过reLaunch进行页面数据的跳转

onLoad: function( options) {
    console.log('lonload..')
    console.log(options)
    if(options.query) {
      this.setData({ query: options.query })
    }
    
  },

在index页面中加入onLoad监听页面数据更新，否则无法显示数据

onConfirm: function () {
    if (!this.data.query) return
    translate(this.data.query, { from: 'auto', to: this.data.curLang.lang }).then(res => {
      this.setData({ 'result': res.trans_result })
      let history = wx.getStorageSync('history')|| []
      history.unshift({ query: this.data.query, result:res.trans_result[0].dst })
      history.length = history.length > 10 ? 10 : history.length
      wx.getStorageSync('history', history)
    })
  }

确认数据之后,通过getStorageSync的方法进行数据的存储，每次确认都会重新存储数据，大于10条数据将会把数据删除