微信小程序开发实用技巧之数据传递和存储

结合自己在平时的开发中遇到的各种问题,和浏览各种问题的解决方案总结出一些自己在日常开发中常用的技巧和知点,希望各位不吝斧正。

1.短生命周期数据存储

以小程序启动到彻底关闭为周期的的数据建议存储在app.js文件夹中,引用app.js:

const app =getApp();

假设Value是在小程序本次生命周期中经常使用到的一个数据,比如说请求API的Token,动态的令牌等。那么就可以把这个值赋值到全局变量中去。实际上,并不是只有app.js中的globalData是全局变量,可以自己定义数据集。

App({
  eduOS:{
    token:''
  },
  ...
})

对于app.js里面的token进行赋值操作很简单,只要页面引用了app.js

app.eduOS.token = Value;

这个数据在小程序的本次启动到彻底关闭后台的周期中就是长期存在的了,还可以根据需要进行修改,Value可以是对象。

2.长生命周期或者隐私数据存储

这种数据的显著特点是在小程序关闭再次重启后依然存在,或者涉及到用户的隐私信息但是需要复用,这种时候可以用本地缓存来解决这种问题。

本地缓存的生命周期: 小程序被开始使用 -----> 小程序被彻底从使用列表中移除。

小程序设置缓存的方式:

wx.setStorage({
            key: 'educookie',
            data: {
              xh: that.data.xh,
              pwd: that.data.pwd
            }
          })

小程序获取缓存的方式:

 var that = this;
 wx.getStorage({
      key: 'educookie',
      success: function(res) {
        that.setData({xh:res.data.xh,pwd:res.data.pwd});
      },
    })

比如保存用户的登陆态信息,但是不能保存用户的隐私数据,就可以采用这种方式。

或者是一个非时效性的数据,可以通过这种方式进行存储。

3.动态信息或配置信息存储

保存用户的配置信息,在更换手机时能迅速完成配置同步。

商家小程序推荐商品修改,或者是内容修正,或者是增加活动,不可能每次都要重写然后再次让小程序进行审核。

对此,可以在后端服务器中保存这个信息。

以一个小程序的轮播广告牌为例:

{
 ad1:'imgurl1',
 ad2:'imgurl2',
 ad3:'imgurl3'
}

把这个数据存放在后台服务器,每一次刷新该页面都请求一次后台数据,对内容进行修改。

wx.request({
 url:'XXX',
 data:{},
 success(res){
  that.setData({
   adList:res.data
  })
 }
})

类似这种方式,完成对一些数据的动态控制或者是云同步。

4.页面间数据传递

1.url参数化

页面间之间的数据传递一般是简单的,这种类型的数据的生命周期是一次性的,用完即删。

wx.navigatorTo({
 url:'../index/index?param1=value1&param2=value2'
})
//在index页面获取
onLoad(options){
 console.log(options.param1);//value1
}

可以参照Http请求中的Get表单传参方式来写页面之间的传参。

2.storge形式传递

如果需要传送的数据太多,可通过Map<key ,Storge>进行传递,具体内容参考官方文档。

wx.setStorge({
  key:'xxx',
  data:mydata
})
//获取
wx.getStorgeSync('')

传递参数只需要传递一个key,在其他界面通过这个key再次去获取本地缓存,对于这种类型的数据,建议使用完后即时的删除缓存。

wx.removeStorage({
  key: 'xxx',
  success(res) {
    console.log(res)
  }
})

3.使用全局变量作为中介

const app = getApp();
page({
 app.globalData.isBackvalue = ture;//确定是返回的值
 app.globalData.tmpData = value;//你要传递的值,也可以设置缓存
})

在返回的页面获取

const app = getApp();
...
onShow(){
  if(app.globalData.isBackValue){
   this.setData({
    XXX:app.globalData.tmpData
   })
   //或者是通过获取缓存的方法进行赋值
  }
}

4.页面栈

该方法可以对所有入栈的页面进行赋值,有科班的同学可以理解为对树的dfs遍历入栈/出栈,栈内页面均可以进行数据传递。

var allpages = getCurrentPages();//获取全部页面数据
//栈的下标从 0 开始,进入页面第一个加载的页面数据是 allpages[0],当前页面是allpages[allpages.length - 1], 上一个页面是allpages[allpages.length - 2]
var prepagedata = allpages[allpages.length - 2].data;//获取上一页面的数据。
var prepage = allpages[allpages.length - 2];//获取上一页面,包括数据和方法

//设置数据方法
prepage.setData({
 XXX:value //XXX 是上个页面data中的参数,value是要设置的值
})
//调用函数方法,prepage中必须定义callfunction函数才可以调用
prepage.callfunction();

5.通信管道 EventChannel

Tips(如何理解通信管道):可以把该管道当成url或storge传递信息形式的一种,不过是被封装为Object形式了

A页面传递

wx.navigateTo({
      url: 'B页面',
      success:res=>{
        res.eventChannel.emit('channeldata', {name:'kindear'})
      }
})

B页面接收

  onLoad: function (options) {
    let eventChannel = this.getOpenerEventChannel();
    eventChannel.on('channeldata', data => {
      console.log(data)
        //打印成功 {name:'kindear'}
    })
  }

总结

到此这篇关于微信小程序开发实用技巧之数据传递和存储的文章就介绍到这了,更多相关微信小程序数据传递和存储内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • 微信小程序 动态修改页面数据及参数传递过程详解

    在小程序中我们经常要动态渲染数据,对于新手而言我们常常遇到修改的数据在控制台显示和页面显示不一致,因为我们用"="修改数据的,这种是可以修改,但无法改变页面的状态的,还会造成数据不一致,代码如下: data: { array: [{ text: '数组' }] } onLoad:function(){ this.data.array[0].text=1; console.log(this.data.array[0].text); } 修改代码: onLoad:function(){ /

  • 微信小程序 页面跳转及数据传递详解

    微信小程序 页面跳转及数据传递详解 类似 Android 的 Intent 传值,微信小程序也一样可以传值: 例如:wxml 中写了一个函数跳转: <view class="itemWeight" catchtap="jumpToOverMissionList"> <view class="textStatus">已完成任务</view> <view class="containVertical

  • 微信小程序开发之数据存储 参数传递 数据缓存

    微信小程序开发内测一个月.数据传递的方式很少.经常遇到页面销毁后回传参数的问题,小程序中并没有类似Android的startActivityForResult的方法,也没有类似广播这样的通讯方式,更没有类似eventbus的轮子可用. 现在已知传递参数的方法只找到三种,先总结下.由于正处于内测阶段,文档也不是很稳定,经常修改,目前尚没有人造轮子. 先上GIF: 1.APP.js 我把常用且不会更改的参数放在APP.js的data里面了.在各个page中都可以拿到var app = getApp(

  • 微信小程序跨页面数据传递事件响应实现过程解析

    这篇文章主要介绍了微信小程序跨页面数据传递事件响应实现过程解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 在实际工作中有很多场景需要在第二个页面中将用户操作之后的将数据回传到上一页面.接下来将我的方案分享给小伙伴. 本次示例采用 uni-app 框架和 weui 样式库 实现思路 创建一个 Emitter,用于事件处理 创建一个 ... 在实际工作中有很多场景需要在第二个页面中将用户操作之后的将数据回传到上一页面.接下来将我的方案分享给小伙

  • 微信小程序 跳转传递数据的实例

    微信小程序 跳转传递数据的实例 点击view 跳转页面 <view class="album_image" data-album-obj="{{item}}" bindtap="imageclick"> <image style="width:98%;" src="{{item.data[0].url}}"></image> </view> 声明变量  dat

  • 微信小程序学习笔记之跳转页面、传递参数获得数据操作图文详解

    本文实例讲述了微信小程序学习笔记之跳转页面.传递参数获得数据操作.分享给大家供大家参考,具体如下: 前面一篇介绍了微信小程序表单提交与PHP后台数据交互处理.现在需要实现点击博客标题或缩略图,跳转到博客详情页面. 开始想研究一下微信小程序的web-view组件跳转传参,把网页嵌入到小程序,结果看到官方文档的一句话打消了念头,因为没有认证...... [方法一 使用navigator组件跳转传参] 前台博客列表页面data.wxml:(后台数据交互参考上一篇) <view wx:for="{

  • 微信小程序 页面跳转和数据传递实例详解

    微信小程序 页面跳转和数据传递 1.先导 在Android中,我们Activity和Fragment都有栈的概念在里面,微信小程序页面也有栈的概念在里面.微信小程序页面跳转有四种方式: 1.wx.navigateTo(OBJECT): 2.wx.redirectTo(OBJECT): 3.wx.switchTab(OBJECT): 4.wx.navigateBack(OBJECT) 5.使用实现对应的跳转功能: 分析: 其中navigateTo是将原来的页面保存在页面栈中,在跳入到下一个页面的时

  • 微信小程序开发实用技巧之数据传递和存储

    结合自己在平时的开发中遇到的各种问题,和浏览各种问题的解决方案总结出一些自己在日常开发中常用的技巧和知点,希望各位不吝斧正. 1.短生命周期数据存储 以小程序启动到彻底关闭为周期的的数据建议存储在app.js文件夹中,引用app.js: const app =getApp(); 假设Value是在小程序本次生命周期中经常使用到的一个数据,比如说请求API的Token,动态的令牌等.那么就可以把这个值赋值到全局变量中去.实际上,并不是只有app.js中的globalData是全局变量,可以自己定义

  • 微信小程序实现给嵌套template模板传递数据的方式总结

    本文实例总结了微信小程序实现给嵌套template模板传递数据的方式.分享给大家供大家参考,具体如下: 一.template模板调用的数据是单一形态时: indexTemplate模板: <import src="../lookAndCollect-template/lookAndCollect-template.wxml" /> <template name="indexTemplate"> <view class="use

  • 微信小程序开发数据缓存基础知识辨析及运用实例详解

    提示:这里可以添加本文要记录的大概内容: 例如:随着人工智能的不断发展,机器学习这门技术也越来越重要,很多人都开启了学习机器学习,本文就介绍了机器学习的基础内容. 提示:以下是本篇文章正文内容,下面案例可供参考 一.微信数据缓存是什么? 在实际开发中,在用到一个数据时,我们需要调用api接口去得到,然后渲染在页面中,但是对于一些数据,是经常需要使用的,如果每次使用时都需要调用api接口,会十分麻烦.数据缓存就解决了这个问题,我们可以在初次调用某api得到数据的同时将数据缓存,那么在之后的使用过程

  • 微信小程序开发实战教程之手势解锁

    代码:https://github.com/jsongo/wx-gesture-lock 这个手势解锁的demo使用了https://github.com/lvming6816077/H5lock这个项目的算法和主逻辑,整合到微信小程序来,修改了很多地方的语法来适配小程序,去掉了window.document等函数,同时也添加了新的机制来解耦界面的操作和第三方库,这个下面会介绍到. 不过可惜的是,这个demo也只能在开发工具上玩玩,到真机上测试的时候,手指一滑动,页面会跟着滚动,手势没法使用.

  • 微信小程序开发常用功能点与使用方法总结

    在这里,我主要整理了一些小程序开发过程中常用的功能点,非常实用,下面来一看看看吧 1.获取高度宽度 var windowHeight = wx.getSystemInfoSync().windowHeight var windowWidth = wx.getSystemInfoSync().windowWidth 2.动态绑定 style 样式 和class class="operBtn {{select==1?'activeClass':''}}" style="displ

  • 微信小程序开发之全局配置与页面配置实现

    目录 一.全局配置 (1)小程序窗口的组成部分 (2)导航栏  navigationBar (3)下拉刷新页面 (4)上拉触底的距离 (5)底部导航栏 tabBar (6)图标的获取 二.页面配置 (1)概念 (2)页面配置与全局配置的关系 (3)常用配置项 三.综合案例 一.全局配置 app.json文件就是项目的全局配置文件 (1)小程序窗口的组成部分 (2)导航栏  navigationBar 1)window节点常用配置项 2)设置导航栏 设置导航栏标题文字 app.json-->win

  • 微信小程序开发图片拖拽实例详解

    微信小程序开发图片拖拽实例详解 1.编写页面结构:moveimg.wxml <view class="container"> <view class="cnt"> <image class="image-style" src="../uploads/foods.jpg" style="left:{{ballleft}}px;width:{{screenWidth}}px" bi

随机推荐