前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >微信开发--微信小程序(三)

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

作者头像
生南星
发布2019-07-22 14:39:57
18.3K0
发布2019-07-22 14:39:57
举报
文章被收录于专栏:生南星

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

1. 数据缓存

a. wx.setStorage(Object object)

将数据存储在本地缓存中指定的 key 中。会覆盖掉原来该 key 对应的内容。数据存储生命周期跟小程序本身一致,即除用户主动删除或超过一定时间被自动清理,否则数据都一直可用。

wx.setStorageSync(string key, any data) 是 wx.setStorage(Object object)的同步版本. 示例代码:

代码语言:javascript
复制
wx.setStorage({
  key: 'key',
  data: 'value'
})

b. wx.getStorage(Object object)

从本地缓存中异步获取指定 key 的内容.

any wx.getStorageSync(string key) 是 wx.getStorage 的同步版本.

示例代码:

代码语言:javascript
复制
wx.getStorage({
  key: 'key',
  success(res) {
    console.log(res.data)
  }
})

c. wx.getStorageInfo(Object object)

异步获取当前storage的相关信息

Object wx.getStorageInfoSync() 是 wx.getStorageInfo 的同步版本.

示例代码:

代码语言:javascript
复制
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 的同步版本.

示例代码:

代码语言:javascript
复制
wx.removeStorage({
  key: 'key',
  success(res) {
    console.log(res)
  }
})

e. wx.clearStorage(Object object)

清理本地数据缓存.

wx.clearStorageSync() 是 wx.clearStorage 的同步版本.

示例代码:

代码语言:javascript
复制
wx.clearStorage()

2. 微信小程序字符串与变量名的拼接

示例代码:

代码语言:javascript
复制
<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传递参数

代码语言:javascript
复制
<navigator class="test-item" url="../../pages/test/test?testId={{testData.testId}}">
    ...
</navigator>

在js页面中onLoad方法中接收

代码语言:javascript
复制
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文件

代码语言:javascript
复制
<button bindtap='delMovie' data-index="{{index}}">取消收藏</button>

.js文件的点击事件里接收

代码语言:javascript
复制
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. 本地存储

这个就是上面的数据缓存的方法,可以全局使用.

代码语言:javascript
复制
//存数据
wx.setStorageSync(this.data.detailsArr.title, this.data.detailsArr);
代码语言:javascript
复制
//取数据
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中定义全局变量

代码语言:javascript
复制
 //定义全局变量
globalData:{
    userInfo:null
    }
})

2. 在其中一个子页面将所需要的数据使用getApp()传递给全局变量userInfo;

代码语言:javascript
复制
var app=getApp();     // 取得全局App
app.globalData.userInfo = res.data.uid  // 取得全局变量需要的值

3. 在另一个子页面使用这个全局变量

代码语言:javascript
复制
// 获取全局变量并赋值给userId
userId: getApp().globalData.userInfo 

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

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2019-05-27,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 生南星 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • wx.setStorageSync(string key, any data) 是 wx.setStorage(Object object)的同步版本. 示例代码:
    • currentTarget和target的区别
    相关产品与服务
    云开发 CloudBase
    云开发(Tencent CloudBase,TCB)是腾讯云提供的云原生一体化开发环境和工具平台,为200万+企业和开发者提供高可用、自动弹性扩缩的后端云服务,可用于云端一体化开发多种端应用(小程序、公众号、Web 应用等),避免了应用开发过程中繁琐的服务器搭建及运维,开发者可以专注于业务逻辑的实现,开发门槛更低,效率更高。
    领券
    问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档