飞书小程序开发

1.tt.showModal后跳转页面

 跳转路径要为绝对路径,相对路径跳转无响应。

2.手机息屏后将不再进入onload()生命周期,直接进入onshow()生命周期。

onLoad()在页面初始化的时候触发,一个页面只调用一次。

onShow()在切入前台时就会触发,手机息屏后再打开将会直接进入onShow()生命周期,如果是onLoad()处理传参问题可以先保存在app.js里,然后在onShow()里重新赋值。

示例timer:

app.js文件

App({onLaunch: async function () {tt.clearStorage();},onShow: function () {//当小程序进入后台或者返回前台的时候,给这两个值变为1,用来告诉页面,刚才的切换是前后台切换,不是页面切换,不用上报页面停留时间//里面的firstIn表示是不是第一次进入小程,因为第一次进入的时候也会触发onShow(相当于从后台切换到前台了),要把这个也排除在外。默认是第一次进入,进入之后就把这个值置为0if (this.globalData.firstIn) {this.globalData.firstIn = 0;} else {this.globalData.onShow = 1;}},onHide() {this.globalData.onHide = 1;},onunload(){this.globalData.onUnload = 1;},// 页面切换计算时间globalData: {firstIn: 1,onShow: 0,onHide: 0,onUnload:0},token: "",keyword: void 0,/*** 用户信息*/userInfo: void 0,/*** 顶部导航栏区域数据*/navigationBarSafeArea: void 0,/*** 手机系统*/model: false,/*** top+height*/height: "",topMargin: "",topAndHeight: "",/*** 答题类型 1: 强条,2: 知识竞赛,3: 总包 4: 每月答题*/answerType: void 0,timer:void 0, // 答题时间/*** 竞赛答题时间*/competitionTime: 60 * 60,/*** 竞赛答题时间显示*/competitionTimeStr: "01:00:00",
});

 index.js

  /*** 生命周期函数--监听页面加载*/onLoad: function (options) {// this.setData({//   timerDateStr: "00:00",// });if (options) {console.log('考试options', options);this.setData({paperClientFilterVo:JSON.parse(options.paperClientFilterVo),competitionTime:options.limitTime,competitionTime1:options.limitTime,},() => {console.log('单个页面传参',this.data.paperClientFilterVo);this.getExaminationDetail(); // 总包答题});app.timer = Number(options.limitTime)}},/*** 生命周期函数--监听页面显示*/onShow: function () {this.setData({timer: app.timer})}

 onLoad()传值,onShow赋值。

3.reLaunch()

关闭所有当前页面,打开指定页面。所以页面不能回退,一般跳转toolBar会用

4.navigateTo()

跳转到指定页面。跳转后原页面保留。使用 tt.navigateBack 可以返回到原页面。小程序中页面栈最多十层。

5.图片放大预览

首先飞书小程序图片预览只支持全路径预览

eg://http:192.168.2.38/file/balabala.png

这次处理的业务是富文本中的图片预览放大

  // 点击放大预览图片函数catchImage(){tt.previewImage({current: this.data.imgArr[0], // 当前显示图片的http链接urls: this.data.imgArr // 需要预览的图片http链接列表})},/*** 设置答题详情(总包目前不做)*/setQuestionDetail: function (detail) {this.setData({ isAnswer: false }); //还原成未答题的模式this.setData({//设置题目currentExamination: detail,});this.setData({questionType:detail.type == 1? "单选题": detail.type == 2? "多选题": "判断题", //:1单选、2多选、3判断题});if (detail.title) {let title = detail.title;if (title.indexOf("src") >= 0) {const imgs = [];title.replace(/]*src=['"]([^'"]+)[^>]*>/gi, function (match, capture) {imgs.push(capture);});}title = title.replace(new RegExp('<img src="/file/', "g"), `<img style="max-width:100%;height:auto" src="${backendUrl}/file/`)this.setData({nodes: `<div style='text-align:left;white-space:pre-line;'><span style='text-align:left;line-height: 32px;height: 32px;font-size: 16px;font-family: PingFang SC-Regular, PingFang SC;font-weight: 400;color: #18191B;'>${title}</span></div>`,},() => {//console.log(this.data.nodes)});// 主要代码为后面预览图片准备let imgArr = [];let regex = new RegExp(/<img.*?(?:>|\/>)/gi); // 匹配所有图片let srcReg = /src=[\'\"]?([^\'\"]*)[\'\"]?/i; // 匹配src图片let arrsImg = title.match(regex); // mycontent 后台返回的富文本数据if(arrsImg && arrsImg.length > 0){for (let i = 0; i < arrsImg.length; i++) {let srcs = arrsImg[i].match(srcReg);imgArr.push(srcs[1])}this.setData({imgArr})}const options = detail.options; //设置选项this.setData({optionsList: options,});this.getResultDetail();//解析}},

这里有一点要注意的是图片会超出屏幕,max-width:100%可控。

预览方法中的urls:需要是数组

 示例代码:

tt.previewImage({urls: ["https://sf3-scmcdn2-cn.feishucdn.com/ee/lark/open/web/static/app-banner.05b68b58.png","https://sf3-cn.feishucdn.com/obj/open-platform-opendoc/33e4ae2ff215314046c51ee1d3008d89_p1QpEy0jkK.png"],current: "https://sf3-cn.feishucdn.com/obj/open-platform-opendoc/33e4ae2ff215314046c51ee1d3008d89_p1QpEy0jkK.png",success(res) {console.log(JSON.stringify(res));},fail(res) {console.log(`previewImage fail: ${JSON.stringify(res)}`);}
});

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/46616.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

springBoot 配置文件 jpa 相关参数的作用

在Spring Boot应用中&#xff0c;可以通过配置文件来配置JPA&#xff08;Java Persistence API&#xff09;相关的参数。下面是一些常用的JPA配置参数及其作用&#xff1a; spring.jpa.database: 指定JPA使用的数据库类型&#xff0c;默认为自动检测。可选值有HSQL、H2、DERBY…

开放网关架构演进

作者&#xff1a;庄文弘&#xff08;弘智&#xff09; 淘宝开放平台是阿里与外部生态互联互通的重要开放途径&#xff0c;通过开放的产品技术把阿里经济体一系列基础服务&#xff0c;像水、电、煤一样输送给我们的商家、开发者、社区媒体以及其他合作伙伴&#xff0c;推动行业的…

企业网三层架构实验

一、实验拓扑 二、实验要求 1、内网IP地址172.16.0.0/16合理分配&#xff1b; 2、SW1/2之间互为备份&#xff1b; 3、VRRP/STP/VLAN/TRUNK均使用&#xff1b; 4、所有PC通过DHCP获取IP地址&#xff1b; 三、实验思路 1、配置ISP的IP地址&#xff1b; 2、配置R1的IP地址&…

<指针进阶>指针数组和数组指针傻傻分不清?

✨Blog&#xff1a;&#x1f970;不会敲代码的小张:)&#x1f970; &#x1f251;推荐专栏&#xff1a;C语言&#x1f92a;、Cpp&#x1f636;‍&#x1f32b;️、数据结构初阶&#x1f480; &#x1f4bd;座右铭&#xff1a;“記住&#xff0c;每一天都是一個新的開始&#x1…

Mac发现有的软件不能上网的破解之法

1、Mac上打开终端 terminal &#xff0c;获取 root 权限。 sudo -i 2、编辑 hosts 文件 vim /private/etc/hosts 3、找到被禁止软件的数据请求域名&#xff0c;然后删除相关行&#xff0c;快捷件dd&#xff0c;然后:wq保存退出 比如百度 127.0.0.1 pan.baidu.com ##sec 印…

深入完整的带你了解java对象的比较

目录 元素的比较 1.基本类型的比较 2.对象比较的问题 1.运行结果 2.疑问 3.原因 对象的比较 1.覆写基类的equals 2.基于Comparble接口类的比较 3.基于比较器比较 4.三种方式对比 元素的比较 1.基本类型的比较 在Java 中&#xff0c;基本类型的对象可以直接比较大…

LVS-DR模式以及其中ARP问题

目录 LVS_DR LVS_DR数据包流向分析 LVS-DR中ARP问题 问题一 问题二 解决ARP的两个问题的设置方法 LVS-DR特点 LVS-DR优缺点 优点 缺点 LVS-DR集群构建 1.配置负载调度器 2.部署共享存储 3.配置节点服务器 4.测试 LVS 群集 LVS_DR LVS_DR数据包流向分析 客户端…

JVM基础了解

JVM 是java虚拟机。 作用&#xff1a;运行并管理java源码文件锁生成的Class文件&#xff1b;在不同的操作系统上安装不同的JVM&#xff0c;从而实现了跨平台的保证。一般在安装完JDK或者JRE之后&#xff0c;其中就已经内置了JVM&#xff0c;只需要将Class文件交给JVM即可 写好的…

爬虫工作中代理失效了怎么处理?

Hey&#xff01;亲爱的爬虫小伙伴们&#xff0c;是不是经常在爬虫的工作中遇到代理IP失效的问题&#xff1f;别着急&#xff0c;今天我来分享一些应对代理失效的妙招&#xff01;这些方法简单易行&#xff0c;让你爬虫顺利进行. 一、为什么代理会失效&#xff1f; 在爬虫过程…

vue3+ts+vite项目页面初始化loading加载效果

简介 一分钟实现 vue-pure-admin 同款项目加载时的 loading 效果 一、先看效果 1.1 静态效果 1.2 动态效果 二、上代码 核心代码在body里面&#xff0c;代码中已标明。找到你项目的 index.html &#xff0c;复制粘贴进去即可 <!DOCTYPE html> <html lang"en…

每天一道leetcode:1306. 跳跃游戏 III(图论中等广度优先遍历)

今日份题目&#xff1a; 这里有一个非负整数数组 arr&#xff0c;你最开始位于该数组的起始下标 start 处。当你位于下标 i 处时&#xff0c;你可以跳到 i arr[i] 或者 i - arr[i]。 请你判断自己是否能够跳到对应元素值为 0 的 **任一** 下标处。 注意&#xff0c;不管是什…

spring依赖注入详解(上)

一、Bean销毁的过程 如果bean销毁时会执行的场景 1、设置DestroyMethodName为(inferred) // 先把DestroyMethodName设置为(inferred) Component public class TestBeanPostProcessor implements MergedBeanDefinitionPostProcessor {Overridepublic void postProcessMergedBe…

根据Dockerfile创建容器案例讲解

-f为dokerfile的路径&#xff0c; -t为新镜像的名称及版本。 后面这个点是寻址路径。

阿里面试官常问的TCP和UDP,你真的弄懂了吗?

♥ 前 言 作为软件测试&#xff0c;大家都知道一些常用的网络协议是我们必须要了解和掌握的&#xff0c;面试的时候面试官也非常喜欢问一些协议相关的问题&#xff0c;其中有两个协议因为非常基础&#xff0c;出现的频率非常之高&#xff0c;分别是 ”TCP 协议“ 和 ”UDP 协…

漏洞指北-VulFocus靶场专栏-中级03

漏洞指北-VulFocus靶场专栏-初级03 中级009 &#x1f338;gxlcms-cve_2018_14685&#x1f338;step1&#xff1a;安装系统 密码rootstep2 进入后台页面 账号密码&#xff1a;admin amdin888step3 查看详细 有phpinfo() 中级010 &#x1f338;dedecms-cnvd_2018_01221&#x1f3…

2023国赛数学建模C题思路模型代码 高教社杯

本次比赛我们将会全程更新思路模型及代码&#xff0c;大家查看文末名片获取 之前国赛相关的资料和助攻可以查看 2022数学建模国赛C题思路分析_2022国赛c题matlab_UST数模社_的博客-CSDN博客 2022国赛数学建模A题B题C题D题资料思路汇总 高教社杯_2022国赛c题matlab_UST数模社…

《游戏编程模式》学习笔记(五)原型模式 Prototype Pattern

原型的定义 用原型实例指定创建对象的种类&#xff0c;并且通过拷贝这些原型创建新的对象。 举个例子 假设我现在要做一款游戏&#xff0c;这个游戏里有许多不同种类的怪物&#xff0c;鬼魂&#xff0c;恶魔和巫师。这些怪物通过“生产者”进入这片区域&#xff0c;每种敌人…

Android Studio 之 Android 中使用 HanLP 进行句子段落的分词处理(包括词的属性处理)的简单整理

Android Studio 之 Android 中使用 HanLP 进行句子段落的分词处理&#xff08;包括词的属性处理&#xff09;的简单整理 目录 Android Studio 之 Android 中使用 HanLP 进行句子段落的分词处理&#xff08;包括词的属性处理&#xff09;的简单整理 一、简单介绍 二、实现原理…

派森 #P122. 峰值查找

描述 给定一个长度为n的列表nums&#xff0c;请你找到峰值并返回其索引。数组可能包含多个峰值&#xff0c;在这种情况下&#xff0c;返回任何一个所在位置即可。 &#xff08;1&#xff09;峰值元素是指其值严格大于左右相邻值的元素。严格大于即不能有等于&#xff1b; &…

Unity 之 RaycastHit(存储射线投射操作)

文章目录 总述具体使用场景 总述 RaycastHit 类是 Unity 中的一个结构&#xff0c;用于存储射线投射操作的结果。射线投射是一种常用的技术&#xff0c;用于检测场景中的碰撞、获取碰撞点、获取碰撞对象的信息等。RaycastHit 提供了关于射线与场景中对象的交互信息&#xff0c…