首页 > 编程语言 >小程序 页面通信

小程序 页面通信

时间:2023-08-24 16:35:30浏览次数:51  
标签:npm 触发 绑定 元素 程序 通信 事件 PubSub 页面

一、小程序使用 npm 包

1.初始化 package.json

在当前项目打开命令行,运行

npm init

  必须属性有 : name、version ,其他属性都可删除

2.勾选允许使用 npm

      在微信开发者工具上,点击 详情->本地设置->使用 npm 模块。

 

3.下载npm包

npm install packageName

4.构建npm

  开发工具->工具->构建 npm

  会将node_modules中的打包到miniprogram_npm中

二、常用的npm包

1. mroderick/PubSubJS

  在 github.com 中收搜pubsub,选择mroderick/PubSubJS。

  作用:实现页面与页面之间通信

  订阅方:PubSub.subscribe(事件名,事件的回调)

  发布方:PubSub.publish(事件名,提供的数据)

三、扩展内容

1.事件委托

1.1 什么是事件委托

  将子元素的事件委托(绑定)给父元素

1.2 事件委托的好处

  减少绑定的次数

  后期新添加的元素也可以享用之前委托的事件

1.3 事件委托的原理

  冒泡

1.4 触发事件的是谁

  子元素

1.5 如何找到触发事件的对象

  event.target

1.6 currentTarget VS target

  currentTarget要求绑定事件的元素一定是触发事件的元素

  target绑定的元素不一定时触发事件的元素

2. 定义事件相关

2.1 分类

  标准DOM事件

  自定义事件

2.2 标准的DOM事件

  举例:click, input ...

  事件名是固定的,事件由浏览器触发

2.3 自定义事件

  绑定事件

    事件名

    事件的回调

    订阅方:PubSub.subscribe(事件名,事件的回调)

    订阅方是接受数据的一方

  触发事件

    事件名

    提供事件参数对象,等同于原生事件的event对象

    发布方:PubSub.publish(事件名,事件的回调)

    发布方是提供数据的一方

标签:npm,触发,绑定,元素,程序,通信,事件,PubSub,页面
From: https://www.cnblogs.com/xiawu/p/17654442.html

相关文章

  • 华为ENSP学习之设置VLAN间通信
    1、同交换机vlan间通信拓扑图如下:同交换机vlan间通信的关键:为每个vlan设置ip地址步骤:配置pc1和pc2的ip地址配置lsw1的vlan100和200设置vlan100和200的ip地址配置pc1和pc2的网关地址为vlan100和200的ip地址配置lsw1的g0/0/1和g0/0/2端口的连接类型和所属vlan交换......
  • Vue3 中 keepAlive 如何搭配 VueRouter 来更自由的控制页面的状态缓存?
    在vue中,默认情况下,一个组件实例在被替换掉后会被销毁。这会导致它丢失其中所有已变化的状态——当这个组件再一次被显示时,会创建一个只带有初始状态的新实例。但是vue提供了keep-alive组件,它可以将一个动态组件包装起来从而实现组件切换时候保留其状态。本篇文章要介绍的......
  • 《程序员的自我修养》第四章学习笔记
     2015.12.26的笔记,放在了草稿箱。2023.8.24发布一下吧。第四章静态链接 先上两个文件//a.cexternintshared;intmain(){inta=100;swap(&a,&shared);}//b.cintshared=1;voidswap(int*a,int*b){*a^=*b^=*a^=*b;} 再......
  • 创建web应用程序,React和Vue怎么选?
    React和Vue都是创建web应用程序的绝佳选择。React得到了科技巨头和庞大的开源社区的支持,代码库可以很大程度地扩展,允许你创建企业级web应用程序。React拥有大量合格甚至优秀的开发人员粉丝,可以解决你在开发阶段可能遇到的任何问题。毫无疑问,React是创建跨平台解决方案的最佳框架......
  • MongoDB :第六章:Java程序操作MongoDB
    MongoDBJava环境配置在Java程序中如果要使用MongoDB,你需要确保已经安装了Java环境及MongoDBJDBC驱动。本章节实例时候Mongo3.x以上版本。你可以参考本站的Java教程来安装Java程序。现在让我们来检测你是否安装了MongoDBJDBC驱动。首先你必须下载mongojar包,下......
  • 微信小程序上传文件操作示范
    社会实践心得体会格式要求提交的心得体会应为word文档,且图文并茂,全文段前、段后0,1.5倍行距。题目:自拟,方正小标宋简体,小二号,加粗,居中。个人信息:题目下方,宋体,小四号,加粗,居中,包含学院、班级、学号、姓名。正文:宋体,小四号。字数:1500+若正文中包含标题,一级标题“一”,二......
  • STM23学习记录2:外部中断,串口通信,定时器
    外部中断:向量表:异常+中断所有端口的PIN0对应着EXTI0中短线,PIN1对应EXTI1中断线,依次类推16个外部中断线,对应7个外部中断入口地址配置中断优先级的4位要同时完成抢占优先级和响应优先级(子优先级或副优先级)的配置:两组优先级2+2,2^2抢占,2^2响应比较常用使用NVIC_PriorityGroupCon......
  • TCP --- 为什么是可靠的通信方式
    TCP包有CRC校验字段 序列号和应答 超时重传 拥塞控制根据网络情况和接收端接收数据能力调整发送量。滑动窗口控制解决了两台主机之间因传送速率而可能引起的丢包问题,在一方面保证了TCP数据传送的可靠性。然而如果网络非常拥堵,此时再发送数据就会加重网络负担,那么发送的......
  • android studio 程序莫名其妙闪退 原来是TextView彩色字体设置惹祸
    androidstudio用listview显示item时,用下面的方法能设一行字不同的颜色,但其中一个小细节没注意,导致程序有时闪退,花了几个小时才找到问题的根源 SpannableStringBuildersb1=newSpannableStringBuilder(call);//修改化设置字体颜色 // sb1.setSpan(newForegroundColorSpan(......
  • C++面向对象笔记(转载自黑马程序员)
    C++核心编程本阶段主要针对C++面向对象编程技术做详细讲解,探讨C++中的核心和精髓。1内存分区模型C++程序在执行时,将内存大方向划分为4个区域代码区:存放函数体的二进制代码,由操作系统进行管理的全局区:存放全局变量和静态变量以及常量栈区:由编译器自动分配释放,存放函数的......