rax调用微信小程序原生事件

rax如果想要使用原生小程序的事件怎么办？

解法：

1、注册；

2、监听；

3、离开页面时销毁；

import {registerNativeEventListeners,addNativeEventListener,removeNativeEventListener,
} from 'rax-app';const basePageInfo = { offset: 1, limit: 10 };
const [pageInfo, setPageInfo] = useState({ ...basePageInfo });
const [noMore, setNoMore] = useState(false);if (isWeChatMiniProgram) {// 注册所有需要监听的原生事件registerNativeEventListeners(Designer, ['onPullDownRefresh','onShareAppMessage','onShareTimeline','onReachBottom',]);
}useEffect(() => {// 开始监听 onPullDownRefresh 事件addNativeEventListener('onPullDownRefresh', usePullDownRefresh);addNativeEventListener('onReachBottom', useReachBottom);return () => {// 移除 onPullDownRefresh 事件的监听器removeNativeEventListener('onPullDownRefresh', usePullDownRefresh);removeNativeEventListener('onReachBottom', useReachBottom);};}, [pageInfo]);const useReachBottom = (): void => {if (!noMore) {  // 还有数据setLoading(true);setPageInfo({ ...pageInfo, offset: pageInfo.limit + 1 });}};const usePullDownRefresh = async (): Promise<void> => {setLoading(true);setPageInfo({ ...basePageInfo });};// 获取接口参数const getListData = async () => {const res = await getxxxx({data: {...pageInfo,},});const data = 'data' in res.data && 'data' in res.data.data ? res.data.data.data : [];if ((data?.length === 0 && pageInfo.offset !== 1) || !data) {setNoMore(true);} else if (pageInfo.offset === 1) {if (data?.length > 0) {setDesignerList(data);} else {setDesignerList(null);}} else {setDesignerList(designerList && designerList.concat(data));}} Toast.hide();setLoading(false);};

rax调用微信小程序原生事件相关推荐

【微信小程序-原生开发】实用教程09 - 可滚动选项，动态列表-步骤条（含事件传参），动态详情（含微信云查询单条数据 doc）
开始前,请先完成圆梦宝典中滚动公告栏的开发,详见 [微信小程序-原生开发]实用教程 08 - 开通微信云开发,操作云数据库新增数据(含修改数据权限),初始化云服务(含获取微信云环境 id),获取云数据 ...
微信小程序原生上传图片封装
资源参考组件免费下载地址概述微信小程序原生上传图片功能封装,具体使用根据个人情况而定. 组件自定义属性与方法描述 isShow:布尔值,默认为true true:不显示上传图标 false:显示 ...
微信小程序原生开发记录
遇到类似 ref 交互的情况所需写法 // wxml<wux-calendar id="wux-calendar" /> // js Page({data: {}, ...
微信小程序原生接入腾讯云im（单聊，列表，聊天界面，自定义消息，自动回复）
微信小程序原生接入腾讯云im(单聊,列表,聊天界面,自定义消息,自动回复) 发送图片语音消息传送→ 文章目录 1.项目需求 2.参考文档 3.效果图 4.初始化集成SDK 5.登录 6.会话列表 7 ...
微信小程序原生常用语法 1
微信小程序的教程学习目标如何创建小程序项目小程序项目的基本组成结构小程序页面由几部分组成小程序中常见的组件如何使用小程序如何进行协同开发与发布小程序的宿主环境小程序标准开发模式 1.申 ...
【微信小程序-原生开发】实用教程06-轮播图、分类页签 tab 、成员列表（含Tdesign升级，切换调试基础库，设置全局样式，配置组件按需注入，添加图片素材，wx:for，生命周期 onLoad）
开始前,请先完成首页的开发,详见 [微信小程序-原生开发]实用教程05-首页(含自定义调试模式.插入图片.图文排版.底部留白.添加本地图片) https://blog.csdn.net/weixin_ ...
【微信小程序-原生开发】watch 的实现
微信小程序-原生开发本身并没有 vue 中 watch 的功能,可以通过以下方式实现定义监听器 utils\watch.js /*** 设置监听器*/ export function setWatc ...
wxml修改样式_微信小程序动态绑定事件并实现事件修改样式
微信小程序动态绑定事件并实现事件修改样式实例代码 wxml {{item.name}} js var reportTypeList = [ { name: "日报1", id: ...
微信小程序阻止冒泡点击_微信小程序bindtap事件与冒泡阻止详解
bindtap就是点击事件在.wxml文件绑定: cilck here 在一个组件的属性上添加bindtap并赋予一个值(一个函数名) 当点击该组件时, 会触发相应的函数执行在后台.js文件中定义 ...
微信小程序原生开发功能合集一：微信小程序开发介绍
一.专栏介绍本专栏主要内容为微信小程序常用功能开发过程的介绍说明,包括开发微信小程序常用组件的封装.常用功能的开发等,提供源代码.开发过程讲解视频.完整的课程等. 组件封装: 下拉选择组件. ...

rax调用微信小程序原生事件

rax调用微信小程序原生事件相关推荐

最新文章

热门文章