专栏首页生南星微信开发--微信小程序(三)

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

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

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 

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

本文分享自微信公众号 - 生南星(gh_36d61425a5dc),作者:生南星

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-05-27

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 微信开发--微信小程序(二)

    相信大家都使用过微信小程序,那一定都知道微信小程序下拉刷新吧,其实下拉刷新是微信小程序自带的功能,只不过没有背景图看不出来而已,好坑诶.

    生南星
  • 微信开发--微信小程序(一)

    微信小程序开发相对于微信公众号的开发显得更为重要,下面就来简单介绍一下微信小程序的开发.

    生南星
  • 微信开发--微信小程序(四)

    1.小程序向后台请求接口必须使用https,包括web-view里的网页,如果项目中有用到web socket,那么也必须使用wss协议。https证书一般会用...

    生南星
  • 6-微信小程序开发(微信小程序配置 npm)

    <p><iframe name="ifd" src="https://mnifdv.cn/resource/cnblogs/LearningMiniProgra...

    杨奉武
  • 微信小程序开发系列教程三:微信小程序的调试方法

    版权声明:本文为博主汪子熙原创文章,未经博主允许不得转载。 https://jerry.bl...

    Jerry Wang
  • 微信小程序开发系列教程三:微信小程序的调试方法

    这个教程的前两篇文章,介绍了如何用下图所示的微信开发者工具自动生成一个Hello World的微信小程序,并讲解了这个自动生成的微信小程序的视图开发原理。

    Jerry Wang
  • 微信小程序开发工具 微信小程序平台开发小程序公司

    小程序倡导更加便捷的生活服务理念,无需下载,唾手可得,即用即走,未来,普通人的生活里,小程序将无处不在。

    微信小程序开发加盟服务商
  • 微信小程序开发(一) 微信登录流程

    做过微信登录的都知道,我们需要一个标识来记录用户的身份的唯一性,在微信中unionId就是我们所需要的记录唯一ID,那么如何拿到unionId就成了关键,我将项...

    开发者技术前线
  • 微信小程序云开发

    微信小程序有一个云开发的功能,可以省去很多的后台开发的任务。不过,使用小程序云开发需要注册的小程序appid,测试和游客没有云开发功能的。如果你还没有注册小程序...

    xiangzhihong

扫码关注云+社区

领取腾讯云代金券