VIP用户交流群:462197261 收藏本站北冥有鱼 互联网前沿资源第一站 助力全行业互联网+
在线客服:78895949
tonglan
  • 当前位置:
  • 如何让微信小程序页面之间的通信不再变困难

    一个开始

    小程序开发者总会碰到各种页面之间的通信问题,实现方式也五花八门,比如...

    场景还原

    首先这是一个电商小程序。

    有这样一个需求:

    • 首页某个地方要展示购物车商品数量。
    • 当我在其他页面加购了商品,首页数量刷新。

    实现方式

    方式一:onShow直接请求接口

    Page({
     onShow() {
     // ...一些逻辑
     
     // 后端请求新的购物车数量
     this.requestCartNum();
     }
    })

    不足: 每次onShow都要请求接口,浪费资源。

    方式二:globalData存储购物车数量,onShow中做刷新  

    // 主页.js
    Page({
     onShow() {
      // 在globalData获取到购物车数据
      let num = globalData.cartNum;
      if (num !== this.data.cartNum) {
       this.setData({
        cartNum: num,
       });
      }
     }
    });
    
    // 加购页.js
    Page({
     // 加购后改变globalData的值
     cartAdd(num) {
      globalData.cartNum = globalData.cartNum + num;
     }
    })

    方式三:加购后获取首页实例,调用首页方法

    // 首页.js
    Page({
     onCartAdd(num) {
      this.setData({
       cartNum: this.data.cartNum + num,
      });
     },
    });
    
    // 加购页.js
    Page({
     onCartAdd(num) {
      // 加购后获取到首页的实例,调用首页onCartAdd方法
      let pages = getCurrentPages();
      let curPage = pages[0];
      curPage.onCartAdd(num);
     }
    })

    不足:不确定能不能准确拿到首页的实例,如果换做其他页面就很难复用

    方法四:事件订阅与发布

    // 首页.js
    Page({
     onLoad() {
      // 首页监听事件
      this.$bus.on('cart_add', (num) => {
       this.setData({
        cartNum: this.data.cartNum + num,
       })
      })
     }
    })
    
    // 加购页.js
    
    Page({
     // 加购成功后触发cart_add事件
     onCartAdd(num) {
      this.$bus.emit('cart_add', num);
     }
    })

    此方法用事件系统,订阅发布模式去做的处理。

    以上几种方法中最优解决方案是方法四,利用事件的订阅与发布,逻辑清晰兼容性好。但是都不可避免的不足是:每一个需要动态显示购物数量的页面都需要添加相同的逻辑代码。

    状态管理方案

    单页应用中最常用的就是组件之间的通信,由此诞生了不同的状态存储方案: react用redux, vue用vuex。他们的思路都是类似的。都有一个核心 store 存储着一切要管理的状态。

    那么,其他框架可以,小程序也可以。以redux为例,实现一套简单的状态管理方案。

    wxdux的实现

    使用前提:有redux基础

    wxdux 类似与redux,以action来描述触发的行为,reducer来描述state的变化。

    1. 小程序入口中注册

    注册store并添加到globalData中去

    import {createStore} from './wxdux/index';
    import reducer from './reducer';
    
    const store = createStore(reducer);
    
    App({
     globalData: {
      store,
     },
    });

    2. reducer实现

    写法与redux类似,功能也类似。

    const userReducer = (state = {}, action) => {
     // ...
    }
    
    const postReducer = (state = [], action) => {
     // ...
    };
    
    const reducers = {
     user: userReducer,
     posts: postReducer,
    };
    
    export default reducers;

    3. 页面中使用wxdux

    connect方法会将小程序页面实例与wxdux连接起来,必须提供$useState方法,该方法接收state,返回该页面所需要的state

    import {connect} from './wxdux/index';
    
    Page(connect({
     data: {
      sex: '男',
     },
     onLoad() {
      // ...
     },
     $useState(state) {
      return {
       name: state.name,
      },
     },
    }))

    4. wxml中使用name

    <view>{{name}}</view>

    5. 触发store更新

    使用dispatch方法,该方法接收一个对象作为参数,该对象必须包含type字段表示action的类型,wxdux会根据此action更新state并且刷新所有使用name的视图

    import {dispatch} from './wxdux/index';
    
    Page(connect({
     // 某点击事件触发,更新姓名为“张三”
     onClick() {
      const updateName = {
       type: 'update_name',
       name: '张三'
      };
      dispatch(updateName);
     }
    }))

    总结

    以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对北冥有鱼的支持。

    您可能感兴趣的文章:

    • 微信小程序页面间通信的5种方式
    • 微信小程序中多个页面传参通信的学习与实践
    • 微信小程序实现即时通信聊天功能的实例代码

    广而告之:
    热门推荐:
    webpack4.x打包过程详解

    一、全局安装 webpack-cli 脚手架 npm install webpack-cli -g 二、新建一个项目wp,并在wp目录下初始化一个package.json文件。 npm init -y 在wp目录下新建一个src目录,并在该目录下新建一个index.js 作为入口文件 webpack4.x 给我们提供了两种打包模式: development ···

    微信小程序开发之路由切换页面重定向问题

    这段时间开发了一个微信小程序,虽然小程序的导航API 官方文档写得很详细,但是在具体开发过程中还是会遇到很多不明白,或者一时转不过弯的地方。 1、页面切换传参,参数读取    1.1  wx.navigateTo(Object)   功能:保留当前页面,跳转到应用内的某个页面,但是不能···

    php学习之 数组声明

    复制代码 代码如下: <?php /* * 一、数组的概述 * 1.数组的本质:管理和操作一组变量,成批处理 * 2.数组时复合类型(可以存储多个) * 3.数组中可以存储任意长度的数据,也可以存储任意类型的数据 * 4.数组可以完成其他语言数据结构的功能(链表,队列,栈,集合类) * * ···

    WEB2.0的单手定则

    之前的一篇关于CSS的文章不太被很多人了解,结果好一段时间都在沉思关于CSS一块的文章应该怎么写,至今尚未得出一个让自己满意的答案。新的一年了,回首之前的日子;公司里面一大堆东西在忙差不多有一个月没有写过有关技术的文章,也很久没有关注过群里的事情(屏蔽了好几个)···

    MySQL慢查询日志的基本使用教程

    慢查询日志相关参数 MySQL 慢查询的相关参数解释:slow_query_log :是否开启慢查询日志,1表示开启,0表示关闭。 slow_query_log :是否开启慢查询日志,1表示开启,0表示关闭。 log-slow-queries :旧版(5.6以下版本)MySQL数据库慢查询日志存储路径。可以不设置该参数,系···

    dedecms列表页标题后加上页数使标题不重复的办法

    在DEDECMS的列表页的标题后面加上当前页数使列表页的标题不重复这样更有利于SEO优化。 当前列表页页码的标签为:{dede:pagelist listsize='0' listitem='pageno' function='html2text(@me)'/} 实例:<title>{dede:field.title···

    一个手机自适应的网页效果解决显示页面很小的问题

    工作需要,要做一个手机自适应的网页效果,终于搞定,先分享并记录! 其实主要就是改掉HTML页面声明: 在网页中加入以下代码,就可以正常显示了: 复制代码代码如下: <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, mi···

    用Electron写个带界面的nodejs爬虫的实现方法

    什么是Electron 使用 JavaScript, HTML 和 CSS 构建跨平台的桌面应用 [官网](https://electronjs.org/) 实质就是一个精简的Webkit浏览器显示html页面,通过electron做中间层可以和系统交流。给web项目套上一个node环境的壳。 前言 公司买的推广居然没有后台的api,没有api又不···

    CI框架常用经典操作类总结(路由,伪静态,分页,session,验证码等)

    本文实例总结了CI框架常用经典操作类。分享给大家供大家参考,具体如下: 1. 超级对象中的URI CI_URI类的解析url的相关信息 直接使用$this->uri可以使用它的相关属性 system/core/URI.php文件中 部分常用属性: (1) 分段获取url相关信息 $this->uri->segment(4); //···

    本地计算机无法启动Apache故障处理

    最近因工作需要,要学习PHP的基础编程,于是学习架设PHP工作环境。 但按照教材上介绍的那样,安装了WMAP后,一直无法运行成功。后发现Apache一直都不在运行状态。到WMAP中的Apache选项中去选择启动但无法启动。 后经高人指点,总结出如下可能性无法启动Apache: 可能情况一: ···