当前位置: 首页 > news >正文

飞书小程序开发

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.lryc.cn/news/133869.html

相关文章:

  • Revit 3D高效处理:cad exchanger sdk 3.21 Crack
  • 【已解决】Linux中启动docker 出现 ‘ Failed to start docker.service: Unit not found. ’ 错误
  • 【学习日记】【FreeRTOS】时间片的实现
  • CentOS Docker仓库和代理配置
  • Lnton羚通算法算力云平台在环境配置中Windows10终端和VSCode下如何打开Anaconda-Prompt
  • Python web实战之细说Django的集成测试
  • Laravel 模型的作用域 模型的访问器和修改器 ⑨
  • 每日一学——交换机
  • 数学建模大全及优缺点解读
  • C++简介
  • 【广州华锐互动】3D空间编辑器:一款简洁易用的VR/3D在线编辑工具
  • golang云原生项目☞redis配置
  • C++ malloc/free/new/delete详解(内存管理)
  • SpringBoot中Mapper.xml的入参方式
  • 回归预测 | MATLAB实现WOA-RBF鲸鱼优化算法优化径向基函数神经网络多输入单输出回归预测(多指标,多图)
  • 浅析Python爬虫ip程序延迟和吞吐量影响因素
  • 【100天精通python】Day43:python网络爬虫开发_爬虫基础(urlib库、Beautiful Soup库、使用代理+实战代码)
  • Linux:安全技术与防火墙
  • Confluent kafka 异常退出rd_tmpabuf_alloc0: rd kafka topic info_new_with_rack
  • 最新ChatGPT网站程序源码+AI系统+详细图文搭建教程/支持GPT4.0/AI绘画/H5端/Prompt知识库
  • chatGPT-对话柏拉图
  • Java项目-苍穹外卖-Day04
  • SQL递归获取完整的树形结构数据
  • 如何使用营销活动,提升小程序用户的参与度
  • IDEA中使用Docker插件构建镜像并推送至私服Harbor
  • 第7章 高性能门户首页构建
  • 用加持了大模型的 Byzer-Notebook 做数据分析是什么体验
  • 学习设计模式之观察者模式,但是宝可梦
  • 课程项目设计--spring security--用户管理功能--宿舍管理系统--springboot后端
  • 学习设计模式之装饰器模式,但是宝可梦