2024年Taro踩坑记录(VUE多端同构)，字节跳动面试官

总结

为了帮助大家更好温习重点知识、更高效的准备面试，特别整理了《前端工程师面试手册》电子稿文件。

内容包括html，css，JavaScript，ES6，计算机网络，浏览器，工程化，模块化，Node.js，框架，数据结构，性能优化，项目等等。

包含了腾讯、字节跳动、小米、阿里、滴滴、美团、58、拼多多、360、新浪、搜狐等一线互联网公司面试被问到的题目，涵盖了初中级前端技术点。

前端面试题汇总

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

JavaScript

性能

linux

<view

class=“navigation-bar”

:style="{ ‘padding-top’:${paddingTop}px,

‘height’:${height}px,

‘line-height’:${height}px,

background:background,

color:color,

‘font-size’:fontSize}">

{{ title }}

web-view

===========================================================================

由于h5页面不支持web-view组件，直接使用网址跳转

toDetail(item) {

if(process.env.TARO_ENV === “h5”){

window.location.href = item.essayUrl

return

}

const url = encodeURIComponent(item.essayUrl);

Taro.navigateTo({

url: /pages/web-view/index?url=${url}

});

}

自定义tabbar

---

1. app.config.js 配置

tabBar: {

custom: true,

/* … */

}

2. tabbar页面记得引入自定义的tabbar组件

import customTabBar from “@/components/custom-tab-bar/index.vue”

export default {

components: { customTabBar },

onShow() {

this.$refs.tabBar.selected = 0

this.msgUnread = getGlobalData(“msgUnread”);

},

}

3. 自定义tabbar组件

<cover-view

v-for=“(item, index) in list”

:key=“index”

class=“tab-bar-item”

@tap=“switchTab(item.pagePath, index)”

<cover-image

:src=“selected === index ? item.selectedIconPath : item.iconPath”

<cover-view

:style=“{ color: ${selected === index ? selectedColor : color} }”

{{ item.text }}</cover-view