微信开发--微信小程序(三)
这里只简单地做描述,详细的要去看官方文档哦.
1. 数据缓存
a. wx.setStorage(Object object)
将数据存储在本地缓存中指定的 key 中。会覆盖掉原来该 key 对应的内容。数据存储生命周期跟小程序本身一致，即除用户主动删除或超过一定时间被自动清理，否则数据都一直可用。
wx.setStorageSync(string key, any data) 是 wx.setStorage(Object object)的同步版本. 示例代码:
wx.setStorage({
key: 'key',
data: 'value'
})b. wx.getStorage(Object object)
从本地缓存中异步获取指定 key 的内容.
any wx.getStorageSync(string key) 是 wx.getStorage 的同步版本.
示例代码:
wx.getStorage({
key: 'key',
success(res) {
console.log(res.data)
}
})c. wx.getStorageInfo(Object object)
异步获取当前storage的相关信息
Object wx.getStorageInfoSync() 是 wx.getStorageInfo 的同步版本.
示例代码:
wx.getStorageInfo({
success(res) {
console.log(res.keys)
console.log(res.currentSize)
console.log(res.limitSize)
}
})d. wx.removeStorage(Object object)
从本地缓存中移除指定 key.
wx.removeStorageSync(string key) 是 wx.removeStorage 的同步版本.
示例代码:
wx.removeStorage({
key: 'key',
success(res) {
console.log(res)
}
})e. wx.clearStorage(Object object)
清理本地数据缓存.
wx.clearStorageSync() 是 wx.clearStorage 的同步版本.
示例代码:
wx.clearStorage()2. 微信小程序字符串与变量名的拼接
示例代码:
<view wx:for="{{pic1}}" wx:key="{{index}}" class='small-img'>
<image src="https://fuss10.elemecdn.com{{item.image_url}}" />
<view>{{item.title}}</view>
</view>3. 微信小程序参数传递(总结)
明确事件
- 事件是视图层到逻辑层的通讯方式
- 事件可以将用户的行为反馈到逻辑层进行处理
- 事件可以绑定在组件上，当达到触发事件，就会执行逻辑层对应的事件处理函数
- 事件对象可以携带额外信息，如id, dataset, touches
事件分类
事件分为冒泡事件和非冒泡事件
- 冒泡事件：当一个组件上的事件被触发后，该事件会向父节点传递
- 非冒泡事件：当一个组件上的事件被触发后，该事件不会向父节点传递
一般使用场景中，例如一个列表的item中有多个点击事件需要处理，就可以使用catchtap阻止向上冒泡
参数传递的几种方式:
1. 在wxml中使用navigator跳转url传递参数
<navigator class="test-item" url="../../pages/test/test?testId={{testData.testId}}">
...
</navigator>在js页面中onLoad方法中接收
onLoad: function (options) {
console.log('query',options)
},2. 第二种方式 data-* || id(适合在本页面的四个文件中传值)
通过使用data - xxxx 的方法标识来传值，xxxx可以自定义取名 比my.wxml中的data-index。如何获取data-xxxx传递的值？
在js的bindtap的响应事件中： 通过数据解析一层层找到数据，var id=e.target.dataset.index(根据你的data-id的取名)
.wxml文件
<button bindtap='delMovie' data-index="{{index}}">取消收藏</button>.js文件的点击事件里接收
delMovie(e){
//接收的数据
console.log(e)
const keymay = wx.getStorageInfoSync().keys;
for (let i = 1; i < this.data.dataArr.length; i++) {
if (e.currentTarget.dataset.index+1 === i){
wx.removeStorage({
key: keymay[i],
})
}
}
},注意:
1、data-名称 不能有大写字母，如果需要，可以通过 - （中划线）来连接单词，编译的时候小程序会将第二个单词首字母自动大写。图中代码是为了自己标志，所以第二个单词的首字母大写了，其实可以不用。data-* 属性中不可以存放对象。
2.package是保留关键字，不能作为变量使用
currentTarget和target的区别
target 触发事件的源组件。
currentTarget 事件绑定的当前组件。
如果你在父容器上绑定了事件并传参，当你点击父容器时，事件绑定的组件和触发事件的源组件是同一个元素，所以currentTarget 、target 都可以拿到参数，但是当你点击子元素时，target 就不是事件绑定的组件了，所以拿不到参数。
由于事件冒泡的机制，父容器上绑定的事件依然可以触发，所以currentTarget 依然可以拿到参数。
3. 本地存储
这个就是上面的数据缓存的方法,可以全局使用.
//存数据
wx.setStorageSync(this.data.detailsArr.title, this.data.detailsArr);//取数据
const keymay = wx.getStorageInfoSync().keys;
for (let i = 1; i < this.data.dataArr.length; i++) {
if (e.currentTarget.dataset.index+1 === i){
wx.removeStorage({
key: keymay[i],
})
}
}4. 全局变量
1.在app.js中定义全局变量
//定义全局变量
globalData：{
userInfo：null
}
})2. 在其中一个子页面将所需要的数据使用getApp()传递给全局变量userInfo;
var app=getApp(); // 取得全局App
app.globalData.userInfo = res.data.uid // 取得全局变量需要的值3. 在另一个子页面使用这个全局变量
// 获取全局变量并赋值给userId
userId: getApp().globalData.userInfo 剩下不会的快去翻文档啦!