微信小程序实现共享数据

最新推荐文章于 2024-08-19 14:51:08 发布

原创最新推荐文章于 2024-08-19 14:51:08 发布 · 3.4k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

微信小程序专栏收录该内容

30 篇文章

订阅专栏

本文详细介绍了如何在微信小程序中实现跨页面数据共享，包括解压并配置utils库，创建store进行数据管理，以及在页面中引用和使用共享数据的具体步骤。

1、把utils解压并放入微信小程序的utils内

utils压缩包传送门

https://download.youkuaiyun.com/download/IT_iosers/12708903

2、在根目录下创建一个store文件夹在其下创建index.js

index.js代码如下

export default{
  data:{
    //存放要共享数据或实时变化的数据
    msg:"要共享的数据"
  }
}

3、在要使用的地方进行引用

如下：我在pages/index.js下引用
1、先引用序号2的strore文件
2、在引用序号1、解压的create文件
代码如下，

import store from '../../store/index'
import create from '../../utils/create'

效果如下图
在这里插入图片描述

4、如果是page页即对page对象进行改造是compontents页即对 compontent对象进行改造

原page如下图
在这里插入图片描述

改造后
参数1：store
参数2：原page对象
在这里插入图片描述
改造后的的Compontent
与page页操作相同

create.Component(store,{
  {
    /**
     * 组件的属性列表
     */
    properties: {
  
    },
  
    /**
     * 组件的初始数据
     */
    data: {
  
    },
  
    /**
     * 组件的方法列表
     */
    methods: {
  
    }
})

5、声明共享数据

  use:['msg'] //数组中存放要共享的数据

在这里插入图片描述

6、使用共享数据

<view>{{$.msg}}</view>

效果如下
在这里插入图片描述

7、修改共享的数据

在方法中调用

this.store.data.msg=改变后的值