wx.for
在组件上使用 wx:for 控制属性绑定一个数组,即可使用数组中各项的数据重复渲染该组件。
<view wx:for="{{array}}">
{{index}}: {{item.message}}
</view>
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页面传递参数的时候,自己设置的参数多加了一个空格,导致传递的参数错误
<view class='item' data-chs = "{{language.chs}}" data-lang = " {{language.lang}}" data-index = "{{index}}"wx:for='{{langList}}' wx:key = 'index'
wx:for-item = 'language' bindtap = 'onTapItem' hover-class="view-hover"
>
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条数据将会把数据删除