飞书小程序开发

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.rhkb.cn/news/105281.html

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

相关文章

网红景区游乐设备普乐蛙5d动感影院体验馆设备组成内容

一个5D7D动感影院体验馆的全套设备组成通常包括以下几个方面&#xff1a; 电影播放设备&#xff1a;包括主控制器、电影播放器、电影储存设备等&#xff0c;用于播放5D电影。 影院座椅&#xff1a;一般采用特殊设计的动感座椅&#xff0c;具备震动、摇晃、抖动等功能&#xff0…

免费的png打包plist工具CppTextu,一款把若干资源图片拼接为一张大图的免费工具

经常做游戏打包贴图的都知道&#xff0c;要把图片打包为一张或多张大图&#xff0c;要使用打包工具TexturePacker。 TexturePacker官方版可以直接导入PSD、SWF、PNG、BMP等常见的图片格式&#xff0c;主要用于网页、游戏和动画的制作&#xff0c;它可以将多个小图片汇聚成一个…

保研面试题复习

信源/信道编码的目的和种类&#xff1f; 这个图是每个人在学习通信原理的时候&#xff0c;都会遇到的图。包含了三要素&#xff1a;信源、信道和信宿。这个图直接可以回答最开始的问题&#xff0c;所谓信源编码就是针对信源编码&#xff0c;所谓信道编码就是针对信道编码。 有…

docker之DockerFile与网络

目录 DockerFile 构建步骤 基础知识 指令 实战&#xff1a;构建自己的centos 第一步&#xff1a;编写dockerfile文件 第二步&#xff1a;构建镜像文件 docker网络 原理 功能 网络模式 host模式 container模式 none模式 bridge模式 DockerFile dockerfile 是用来…

Java | IDEA中Netty运行多个client的方法

想要运行多个client但出现这种提示&#xff1a; 解决方法 1、打开IDEA&#xff0c;右上角找到下图&#xff0c;并点击 2、勾选

Node.js 的 Buffer 是什么?一站式了解指南

在 Node.js 中&#xff0c;Buffer 是一种用于处理二进制数据的机制。它允许你在不经过 JavaScript 垃圾回收机制的情况下直接操作原始内存&#xff0c;从而更高效地处理数据&#xff0c;特别是在处理网络流、文件系统操作和其他与 I/O 相关的任务时。Buffer 是一个全局对象&…

layui框架学习(37:学习laytpl基本语法)

layui中的模板引擎模块laytpl属于轻量的 JavaScript 模板引擎&#xff0c;支持在页面中将指定的数据按指定的模板进行展示或处理&#xff0c;此处的模板是指一段包含html和脚本的文本&#xff08;感觉类似asp.net core中的razor标记语言&#xff0c;在网页中嵌入基于服务器的代…

Cent OS 中各个文件夹功能

目录 一、根目录简述 二、目录详细分级说明 &#xff08;一&#xff09;bin &#xff08;二&#xff09;sbin &#xff08;三&#xff09;lib &#xff08;四&#xff09;etc &#xff08;五&#xff09;dev &#xff08;六&#xff09;usr &#xff08;七&#xff09…

vue组件的使用

一、首先要穿件组件构造器对象&#xff0c;或者导入组件 1..在本部分注册组件其中组件为子组件 2.在本部分注册组件 二、而后注册组件 1.在本部分注册组件其中组件为子组件 2.在本部分注册组件 三、 接着&#xff0c;使用组件。 1.在本部分注册组件其中组件为子组件 其中v-i…

开源硬件:下一个技术革命?

&#x1f337;&#x1f341; 博主猫头虎 带您 Go to New World.✨&#x1f341; &#x1f984; 博客首页——猫头虎的博客&#x1f390; &#x1f433;《面试题大全专栏》 文章图文并茂&#x1f995;生动形象&#x1f996;简单易学&#xff01;欢迎大家来踩踩~&#x1f33a; &a…

【Git游戏】提交的技巧

修改历史的提交 rebase 通过git rebase -i 将要修改的提交提到最前端&#xff0c; 然后修改&#xff0c;再通过git commit --amend提交该记录&#xff0c;最后通过git rebase -i 在替换会原始的位置 &#xff08;该过程中有可能会产生rebase confict&#xff09; cherry-pick …

EMR电子病历系统 SaaS电子病历编辑器源码 电子病历模板编辑器

EMR&#xff08;Electronic Medical Record&#xff09;指的是电子病历。它是一种基于电子文档的个人医疗记录&#xff0c;可以包括病人的病史、诊断、治疗方案、药物处方、检查报告和护理计划等信息。EMR采用计算机化的方式来存储、管理和共享这些信息&#xff0c;以便医生和医…

浅谈视频汇聚平台EasyCVR视频平台在城市安全综合监测预警台风天气中的重要作用

夏日已至&#xff0c;台风和暴雨等极端天气频繁出现。在城市运行过程中&#xff0c;台风所带来的暴雨可能会导致城市内涝等次生灾害&#xff0c;引发交通瘫痪、地铁停运、管网泄漏爆管、路面塌陷、防洪排涝、燃气爆炸、供热安全、管廊安全、消防火灾等安全隐患&#xff0c;影响…

储能运行约束的Matlab建模方法

最近一段时间有很多人问我最优潮流计算中储能系统的建模方法。部分朋友的问题我回复了&#xff0c;有些没有回消息的&#xff0c;我就不再一一回复了&#xff0c;在这里我写一篇博客统一介绍一下。 1.储能系统介绍 首先&#xff0c;让【GPT】简单介绍一下储能系统&#xff1a;…

Qt --- 显示相关设置 窗口属性等

主界面&#xff0c;窗口 最小化 最大化 关闭按钮、显示状态自定义&#xff1a; setWindowFlags(Qt::CustomizeWindowHint); setWindowFlags(Qt::WindowCloseButtonHint); //只要关闭按钮 setWindowFlags(Qt::WindowFlags type) Qt::FrameWindowHint:没有边框的窗口 Qt::Window…

WPF基础入门-Class3-WPF数据模板

WPF基础入门 Class3&#xff1a;WPF数据模板 1、先在cs文件中定义一些数据 public partial class Class_4 : Window{public Class_4(){InitializeComponent();List<Color> test new List<Color>();test.Add(new Color() { Code "Yellow", Name &qu…

Spring源码编译-for mac

超详细的spring源码编译 记&#xff1a;编译成功时间&#xff1a;2023.08.19 环境准备&#xff1a; 1.idea 2023.1.1 Community Edition 2.jdk1.8 3.gradlegradle-5.6.4 4.spring源码(版本&#xff1a;spring-framework-v5.2.25.RELEASE) 一.spring源码下载 github 加速网站&…

day-30 代码随想录算法训练营 回溯part06

332.重新安排行程 思路&#xff1a;使用unordered_map记录起点机场对应到达机场&#xff0c;内部使用map记录到达机场的次数&#xff08;因为map会进行排序&#xff0c;可以求出最小路径&#xff09; class Solution { public:vector<string>res;unordered_map<stri…

基于数据湖的多流拼接方案-HUDI概念篇

目录 一、为什么需要HUDI&#xff1f; 1. 传统技术选型存在哪些问题&#xff1f; 2. Hudi有什么优点&#xff1f; 基于 Hudi Payload 机制的多流拼接方案&#xff1a; 二、HUDI的应用场景 1. 什么场景适合使用hudi&#xff1f; 2. 什么场景不适合使用hudi&#xff1f; …

Oracle 查询(当天,月,年)的数据

Trunc 在oracle中&#xff0c;可利用 trunc函数 查询当天数据&#xff0c;该函数可用于截取时间或者数值&#xff0c;将该函数与 select 语句配合使用可查询时间段数据 查询当天数据 --sysdate是获取系统当前时间函数 --TRUNC函数用于截取时间或者数值&#xff0c;返回指定的…