飞书小程序开发

news2024/9/20 3:09:50

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(相当于从后台切换到前台了),要把这个也排除在外。默认是第一次进入,进入之后就把这个值置为0
    if (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.coloradmin.cn/o/909999.html

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

相关文章

代码随想录算法训练营day41 | 343. 整数拆分,96. 不同的二叉搜索树

目录 343. 整数拆分 96. 不同的二叉搜索树 343. 整数拆分 类型&#xff1a;动态规划 难度&#xff1a;medium 思路&#xff1a; dp[i]所用的拆分方法至少已经拆分了两次&#xff0c;比如dp[2]1&#xff0c;小于2&#xff0c;在大于2的数中&#xff0c;最后的2是不会拆的。 …

大数据平台需要做等保测评吗?怎么做?

大数据时代的数据获取方式、存储规模、访问特点、关注重点都有了很大不同&#xff0c;所以保证大数据平台数据安全尤其重要。因此不少人在问&#xff0c;大数据平台需要做等保测评吗&#xff1f;怎么做&#xff1f; 大数据平台需要做等保测评吗&#xff1f; 大数据平台是需要做…

sheel

资料来源&#xff1a; 尚硅谷 2-sheel脚本入门 脚本以#!bin/bash 开头 3-变量 3-1自定义变量 在bash中&#xff0c;变量默认类型为字符串类型&#xff0c;无法直接进行数值运算 c12 echo $c 12 使用 export 可把变量提升为全局环境变量 export 变量名 3-2特殊变量 3-2-1 $n …

posstgresql多表连接

posstgresql多表连接 内连接左外连接右外连接总结 交叉连接九九乘法表 自然连接自连接 内连接 内连接用于返回两个表中匹配的数据行&#xff0c;使用关键字INNER JOIN表示&#xff0c;也可以简写成JOIN select -- 内连接 d.department_id ,e.first_name ,d.department_name…

星球转债上市价格预测

星球转债 基本信息 转债名称&#xff1a;星球转债&#xff0c;评级&#xff1a;A&#xff0c;发行规模&#xff1a;6.2亿元。 正股名称&#xff1a;星球石墨&#xff0c;今日收盘价&#xff1a;29.46元&#xff0c;转股价格&#xff1a;33.12元。 当前转股价值 转债面值 / 转股…

限制 el-input 输入 emoji

1. 电脑如何输入 emoji 表情 ? 快捷键 win; 或 win. 2. 代码实现 <template><el-input v-model"input" placeholder"请输入内容" input"inputChange"></el-input> </template><script> export default {name: D…

mysql数据库root密码遗忘后,修改root密码

目录 方式一&#xff1a; 方式二&#xff1a; 2.1 也可以像我这样&#xff0c;普通用户登录进去后 2.2 执行如下命令&#xff0c;将已知的user1的加密密文更新到root中 2.3 查询数据库 2.4 用root用户登录 2.5 登录正常&#xff0c;但这会root登录进去后&#xff0c;无法…

Java中异常的详细讲解与细节讨论

用一个代码引出异常为什么要使用异常 代码&#xff1a; public static void main(Sting args[]){int n1 1;int n2 0;System.out.println(n1/n2);//这里会抛ArihmaticException,因为除数不能为0,若未用异常处理机制则程序直接结束&#xff0c;后面的代码将不执行。这样很不好…

Java【SpringBoot】SpringBoot 和 Spring 有什么区别? SpringBoot有哪些优点?

文章目录 前言一、Spring 特点二、SpringBoot 特点和优点总结 前言 各位读者好, 我是小陈, 这是我的个人主页, 希望我的专栏能够帮助到你: &#x1f4d5; JavaSE基础: 基础语法, 类和对象, 封装继承多态, 接口, 综合小练习图书管理系统等 &#x1f4d7; Java数据结构: 顺序表, …

二级MySQL(四)——数据表的增删改查

首先认识数据类型&#xff1a; VERCHAR&#xff08;n&#xff09;最长长度为n的&#xff0c;可变长度的&#xff0c;字符串类型 CHAR&#xff08;n&#xff09;固定长度的字符串类型 TIME&#xff1a;时间内类型 DTAE&#xff1a;日期类型 INT&#xff1a;普通大小的整数 …

svg图片如何渲染到页面,以及svg文件的上传

svg图片渲染到页面的几种方式 背景&#x1f7e1;require.context获取目录下的所有文件&#x1f7e1;方式1: 直接在html中渲染&#x1f7e1;方式: 发起ajax请求&#xff0c;获取SVG文件 背景 需要实现从本地目录下去获取所有的svg图标进行预览&#xff0c;将选中的图片显示在另…

合并jar包导致gradle传递依赖失效

目录 零、背景一、合并jar包1.1、自定义一组jar包1.2、自定义合并jar的任务1.3、定义打包jar的任务 二、发布jar包2.1、未合并jar包之前的合并方式2.2、合并jar包之后的合并方式 三、发现问题3.1、确定gradle中的依赖关系3.2、对比maven是否缺失依赖3.3、对比合并前后的pom.xml…

【生态经济学】利用R语言进行经济学研究技术——从数据的收集与清洗、综合建模评价、数据的分析与可视化、因果推断等方面入手

查看原文>>>如何快速掌握利用R语言进行经济学研究技术——从数据的收集与清洗、综合建模评价、数据的分析与可视化、因果推断等方面入手 近年来&#xff0c;人工智能领域已经取得突破性进展&#xff0c;对经济社会各个领域都产生了重大影响&#xff0c;结合了统计学、…

Midjourney API 国内申请及对接方式

在人工智能绘图领域&#xff0c;想必大家听说过 Midjourney 的大名吧&#xff01; Midjourney 以其出色的绘图能力在业界独树一帜。无需过多复杂的操作&#xff0c;只要简单输入绘图指令&#xff0c;这个神奇的工具就能在瞬间为我们呈现出对应的图像。无论是任何物体还是任何风…

7-10 查验身份证

分数 15 全屏浏览题目 切换布局 作者 陈越 单位 浙江大学 一个合法的身份证号码由17位地区、日期编号和顺序编号加1位校验码组成。校验码的计算规则如下&#xff1a; 首先对前17位数字加权求和&#xff0c;权重分配为&#xff1a;{7&#xff0c;9&#xff0c;10&#xff0c…

No mapping found for HTTP request with URI

参考: 参考地址 说明 ssm老项目,接过来别人的项目 临时建了一个Controller方便测试用的,结果访问掉不通,报: No mapping found for HTTP request with URIxxxx 这样的错误 解决办法 看了下web,xml配置 在 webmvc-config.xml 配置文件里面添加了几行配置 说明: com.iph.h…

如何使用 JavaScript Promise – 回调、异步等待和 Promise 方法解释

在本教程中,您将学习有关在 JavaScript 中使用 Promise 和 async/await 所需了解的所有内容。 那么让我们开始吧。 为什么在 JavaScript 中使用 Promise? ES6 引入了 Promise 作为原生实现。在 ES6 之前,我们使用回调来处理异步操作。 让我们了解什么是回调以及 Promise…

8.部署项目

项目地址&#xff1a;RuoYi-Cloud-Plus: 项目正式入驻 dromara 开源社区 迁移地址: https://gitee.com/dromara/RuoYi-Cloud-Plus 1.获取源码 需要有gitee账户 先把源码fork到自己的仓库中 需要多等待一段时间 勾选对应的环境 构建项目 2.sql导入 将sql导入到与sql文件名…

PHP 房产网站系统Dreamweaver开发mysql数据库web结构php编程计算机网页项目

一、源码特点 PHP 房产网站系统是一套完善的WEB设计系统&#xff0c;对理解php编程开发语言有帮助&#xff0c;系统具有完整的源代码和数据库&#xff0c;系统主要采用B/S模式开发。 源码 https://download.csdn.net/download/qq_41221322/88233553 论文 https://download…

深入理解Java线程

进程、线程和协程 进程 程序由指令和数据组成&#xff0c;但程序要运行就要将指令加载进CPU以及数据加载进内存&#xff0c;并且在指令运行过程中可能还会用到磁盘、网络等设备。进程就是用来加载指令、管理内存和IO的。当一个程序被运行&#xff0c;从磁盘加载这个程序的代码…