飞书小程序开发

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,一经查实,立即删除!

相关文章

REDIS 入门篇 - (安装配置)

1. 入门 1.1 简介 Redis(Remote Dictionary Server): 远程字典服务)是完全开源,使用ANSIC语言编写,遵守BSD协议,高性能且提供丰富数据结构 【例如: String、Hash、List、Set、SortedSet、BitMap等】的 KEY-VALUE 数据库。 功能特性: 数据存储在内存中,支持事务、持久化、…

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 印…

解决http下navigator.clipboard为undefined问题

开发环境下使用navigator.clipboard进行复制操作&#xff0c;打包部署到服务器上后&#xff0c;发现该功能显示为undefined&#xff1b;查相关资料后&#xff0c;发现clipboard只有在安全域名下才可以访问(https、localhost)&#xff0c;在http域名下只能得到undefined&#xf…

C++ lamdba表达式的使用介绍和优缺点

为什么会想起用lamdba表达式呢&#xff1f; 之前有过一些问题&#xff0c;比如使用std::sort对某个类或者某个结构体的某些数据进行操作&#xff08;比如对某个学生的英语成绩进行排序&#xff09;。此时我们会写一个函数并传入形参&#xff0c;但是需要的函数有特别简单&#…

深入完整的带你了解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…

【100天精通python】Day43:python网络爬虫开发_爬虫基础(urlib库、Beautiful Soup库、使用代理+实战代码)

目录 1 urlib 库 2 Beautiful Soup库 3 使用代理 3.1 代理种类 HTTP、HTTPS 和 SOCKS5 3.2 使用 urllib 和 requests 库使用代理 3.3 案例&#xff1a;自建代理池 4 实战 提取视频信息并进行分析 1 urlib 库 urllib 是 Python 内置的标准库&#xff0c;用于处理URL、发送…

每天一道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…

spring boot集成jasypt 并 实现自定义加解密

一. 技术需求 由于项目中的配置文件 配置的地方过多&#xff0c;现将配置文件统一放到nacos上集中管理 且密码使用加密的方式放在配置文件中 项目中组件使用的版本环境如下 spring cloud 2021.0.5 spring cloud alibaba 2021.0.5.0 spring boot 2.6.13 二. 技术实现 配置文…

68个Python内置函数,你不会不知道吧?

内置函数就是Python给你提供的&#xff0c;拿来直接用的函数&#xff0c;比如print.&#xff0c;input等。 截止到python版本3.6.2 &#xff0c;python一共提供了68个内置函数&#xff0c;具体如下&#x1f447; abs() dict() help() min() …

ARM开发(cortex-A7核,UART总线实验)

目标&#xff1a;键盘输入一个字符a,串口工具显示b&#xff1b; 键盘输入一个字符串"nihao",串口工具显示"nihao"&#xff1b; ---.h头文件--- #ifndef __UART4_H__ #define __UART4_H__#include "stm32mp1xx_rcc.h" #include "stm32mp1x…

根据Dockerfile创建容器案例讲解

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