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