微信开发--微信小程序(三)

这里只简单地做描述,详细的要去看官方文档哦.

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

事件分类

事件分为冒泡事件和非冒泡事件

1. 冒泡事件：当一个组件上的事件被触发后，该事件会向父节点传递
2. 非冒泡事件：当一个组件上的事件被触发后，该事件不会向父节点传递

一般使用场景中，例如一个列表的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 

剩下不会的快去翻文档啦!