飞书小程序开发

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)}`);
    }
});

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

[matlab]matlab配置mingw64编译器

第一步&#xff1a;下载官方绿色版本mingw64编译器然后解压放到一个非中文空格路径下面 比如我mingw64-win是我随便改的文件名&#xff0c;然后添加环境变量&#xff0c;选择用户或者系统环境变量添加下面的变量 变量名&#xff1a; MW_MINGW64_LOC 变量值&#xff1a;自己的m…

1.linux的常用命令

目录 一、Linux入门 二、Linux文件系统目录 三、Linux的vi和vim的使用 四、Linux的关机、重启、注销 四、Linux的用户管理 五、Linux的运行级别 六、Linux的文件目录指令 七、Linux的时间日期指令 八、Linux的压缩和解压类指令 九、Linux的搜索查找指令 ​​​​​​…

2023国赛数学建模思路 - 案例:随机森林

文章目录 1 什么是随机森林&#xff1f;2 随机深林构造流程3 随机森林的优缺点3.1 优点3.2 缺点 4 随机深林算法实现 建模资料 ## 0 赛题思路 &#xff08;赛题出来以后第一时间在CSDN分享&#xff09; https://blog.csdn.net/dc_sinor?typeblog 1 什么是随机森林&#xff…

最新本地大模型进展#Chinese-LLaMA-2支持16k长上下文

‍‍ Hi&#xff0c;今天为大家介绍最新的本地中文语言模型进展。 [2023/08/25] Chinese-LLaMA-2发布了新的更新&#xff1a; 长上下文模型Chinese-LLaMA-2-7B-16K和Chinese-LLaMA-2-13B-16K&#xff0c;支持16K上下文&#xff0c;并可通过NTK方法进一步扩展至24K。 这意味着在…

基于OpenCV的迷宫路径查找

附上代码&#xff1a; import cv2 import numpy as np# 读取图像 img cv2.imread("img_3.png") thres_min 150 # 二值化最小阈值if not img is None:# 二值化处理ret, img cv2.threshold(img, thres_min, 255, cv2.THRESH_BINARY)cv2.imshow("img_thres&qu…

数据结构——布隆计算器

文章目录 1.什么是布隆过滤器&#xff1f;2.布隆过滤器的原理介绍3.布隆过滤器使用场景4.通过 Java 编程手动实现布隆过滤器5.利用Google开源的 Guava中自带的布隆过滤器6.Redis 中的布隆过滤器6.1介绍6.2使用Docker安装6.3常用命令一览6.4实际使用 1.什么是布隆过滤器&#xf…

【python】jupyter notebook导出pdf和pdf不显示中文问题

文章目录 写在前面1. 使用jupyter notebook导出pdf1.1 安装Pandoc1.2 安装MiKTex1.3 示例导出pdf 2. 中文显示问题2.1 显示中文问题示例2.2 解决办法1&#xff1a;修改tex2.3 解决办法2&#xff1a;修改内置文件 写在前面 使用jupyter notebook导出pdf时&#xff0c;出现了一些…

用python从零开始做一个最简单的小说爬虫带GUI界面(3/3)

目录 上一章内容 前言 出现的一些问题 requests包爬取小说的不便之处 利用aiohttp包来异步爬取小说 介绍 代码 main.py test_1.py test_3.py 代码大致讲解 注意 系列总结 上一章内容 用python从零开始做一个最简单的小说爬虫带GUI界面&#xff08;2/3&#xff09;_…

自定义loadbalance实现feignclient的自定义路由

自定义loadbalance实现feignclient的自定义路由 项目背景 服务A有多个同事同时开发&#xff0c;每个同事都在dev或者test环境发布自己的代码&#xff0c;注册到注册中心有好几个(本文nacos为例)&#xff0c;这时候调用feign可能会导致请求到不同分支的服务上面&#xff0c;会…

《华为认证》6to4自动隧道

实验需求&#xff1a; 在NE1和NE3之间使用tunnel 口创建6to4自动隧道&#xff0c;实现PC1和PC2互访。 步骤1:配置ipv4地址&#xff0c;如图所示&#xff1a; 步骤2&#xff1a;配置NE1和NE3的ipv4路由&#xff0c;是两端的ipv4网络能够互访 R1: ip route-static 0.0.0.0 0…

大数据(二)大数据行业相关统计数据

大数据&#xff08;二&#xff09;大数据行业相关统计数据 目录 一、大数据相关的各种资讯 二、转载自网络的大数据统计数据 2.1、国家大数据政策 2.2、产业结构分析 2.3、应用结构分析 2.4、数据中心 2.5、云计算 一、大数据相关的各种资讯 1. 据IDC预测&#xff0…

C语言练习题Day1

从今天开始分享C语言的练习题&#xff0c;每天都分享&#xff0c;差不多持续16天&#xff0c;看完对C语言的理解可能更进一步&#xff0c;让我们开始今天的分享吧&#xff01; 题目一 执行下面的代码&#xff0c;输出结果是&#xff08;&#xff09; int x5,y7; void swap()…

理解图傅里叶变换和图卷积

图神经网络&#xff08;GNN&#xff09;代表了一类强大的深度神经网络架构。在一个日益互联的世界里&#xff0c;因为信息的联通性&#xff0c;大部分的信息可以被建模为图。例如&#xff0c;化合物中的原子是节点&#xff0c;它们之间的键是边。 图神经网络的美妙之处在于它们…

大数据(三)大数据相关的职位

大数据&#xff08;三&#xff09;大数据相关的职位 本文目录&#xff1a; 一、写在前面的题外话 二、2022年就业状况 2.1、不同企业性质高校毕业生 CIER 指数 2.2、不同企业规模高校毕业生 CIER 指数 2.3、高校毕业生供求 TOP15 城市 2.4、一季度景气指数较高和较低的行…

AIGC ChatGPT 制作地图可视化分析

地图可视化分析是一种将数据通过地图的形式进行展示的方法&#xff0c;可以让人们更加直观、快速、准确的理解和分析数据。以下是地图可视化分析的一些主要好处&#xff1a; 加强数据理解&#xff1a;地图可视化可以将抽象的数字转化为直观的图形&#xff0c;帮助我们更好地理解…

UML建模以及几种类图的理解

文章目录 前言1.用例与用例图1.1 参与者1.2 用例之间的关系1.3 用例图1.4 用例的描述 2.交互图2.1 顺序图2.2 协作图 3.类图和对象图3.1 关联关系3.2 聚合和组合3.3 泛化关系3.4 依赖关系 4.状态图与活动图4.1 状态图4.2 活动图 5.构件图 前言 UML通过图形化的表示机制从多个侧…

软件工程(十四) 设计模式之结构型模式(二)

1、组合模式 简要说明 将对象组合成树形结构以表示“整体-部分”的层次结构,使得用户对单个对象和组合对象的使用具有一致性。 速记关键字 树形目录结构 类图如下 由类图其实可以看出,组合模式就是将具有父子关系的结构,组装形成一棵树,并且根据规范,树干节点和叶子节…

【Linux操作系统】Linux系统编程中的互斥锁

文章目录 1. 互斥锁的原理2. 互斥锁的相关函数3. 互斥锁的例子总结 1. 互斥锁的原理 在Linux系统编程中&#xff0c;互斥锁&#xff08;Mutex&#xff09;是一种用于保护共享资源的同步机制。它可以确保在任意时刻只有一个线程可以访问被保护的资源&#xff0c;从而避免了多个…

记录一次“top负1”比赛经历

获奖啦&#xff01; 比赛题目&#xff1a;中文语义病句识别与纠正挑战赛 比赛链接&#xff1a;https://challenge.xfyun.cn/topic/info?typeidentification-and-correction&optionphb“请介绍你们团队” “各位评委老师&#xff0c;我是来自WOT团队的选手AMBT&#xff0…

知识储备--基础算法篇-动态规划

1.前言 第一次接触动态规划&#xff0c;不知道具体什么意思&#xff0c;做了题才发现动态规划就是把大问题变成小问题&#xff0c;并解决了小问题重复计算的方法称为动态规划。比如上楼梯&#xff0c;一次上一阶或二阶&#xff0c;求有多少种算法&#xff0c;就可以拆成最后一…