飞书小程序开发-Toy模板网

这篇具有很好参考价值的文章主要介绍了飞书小程序开发。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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：需要是数组

飞书小程序开发,飞书

示例代码：文章来源地址https://www.toymoban.com/news/detail-675116.html

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

到了这里，关于飞书小程序开发的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！