小程序有哪些常用的生命周期
onLoad—-监听页面加载
onReady—-监听页面初次渲染完成
onShow—-监听页面显示
onHide—-监听页面隐藏
onUnload—-监听页面卸载
小程序有那几个文件，作用是什么？
小程序父子组件怎么传值
父传子:
使用的是属性绑定，子组件中使用properties对象进行接收
子传父：
使用自定义事件，父组件通过自定义事件中的事件对象来接收子组件传过来的值
简述下微信小程序几个路由跳转的区别
- wx.switch Tab:跳转到tabBar页面，并关闭其他所有非tabBar页面
- wx.reLaunch：关闭所有页面，打开应用内的某个页面
- wx.redirectTo：关闭当前页面，跳转到应用内的某个页面，倒是不允许跳转tabBar页面
- wx.navigate To：保留当前页面，跳转到应用内的某个页面，但是不能跳转到tabBar页面，使用wx.navigateBack可以返回原页面。
- wx.navigateBack：关闭当前页面，返回上衣页面或多级页面，可以通过getCurrentPages获取当前的页面栈，决定返几层
如何封装小程序请求
小程序如何打开外链的h5页面
- 使用web-view标签进行跳转
<web-view src="链接地址"></web-view>
使用wx.navigateTo
wx.navigateTo({
url: "../../pay/serviceH5/index"
})
如何实现下拉刷新
使用onPullDownRefresh()这个方法来实现下拉刷新
// 下拉刷新
onPullDownRefresh: function () {
wx.showNavigationBarLoading() //在标题栏中显示加载图标
setTimeout(() => {
wx.hideNavigationBarLoading(); //完成停止加载
wx.stopPullDownRefresh(); //得到数据后停止下拉刷新
}, 400)
},
其中最重要的一步，最容易被忽略的一步，需要在对应页面的json文件中加入enablePullDownRefresh这个属性。
{
"enablePullDownRefresh":true,
"backgroundTextStyle": "dark"
}
如何封装一个自定义导航栏
使用wx.getSystemInfo获取设备信息
如何封装一个可复用的自定义内容的组件
- 导入组件
- 注册组件
- 使用组件
将动态内容和组件通信方式进行传递数据，保证组件的扩展性；
如何优化小程序性能，提高小程序加载速度
- 拆分组件
- 图片压缩
- 减少不必要的数据
- 避免频繁setData
- 使用webView
- 对小程序分包
- 分包预加载
JS的基本数据类型？引用数据类型？
基本数据类型：
String
Number
boolean
null
undefined
symbol
引用数据类型：
Array
Object
function
对一个数组对象类型的数据进行排序
var arr = [{name: "zlw", age: 24}, {name: "wlz", age: 25}];
var compare = function (prop) {
return function (obj1, obj2) {
var val1 = obj1[prop];
var val2 = obj2[prop];if (val1 < val2) {
return -1;
} else if (val1 > val2) {
return 1;
} else {
return 0;
}
}
}
原生dom实现删除dom节点
- node.removeChild(child);
var ul = document.querySelector('ul');
ul.removeChild(ul.children[0]);
const child = document.getElementById("p1");
child.parentNode.removeChild(child);
最快捷的数组排序方法
sort方法
原生写法获取dome节点
- document.getElementById();//id名，在实际开发中较少使用，选择器中多用class id一般只用在顶级层存在 不能太过依赖id
- document.getElementsByTagName();//标签名
- document.getElementsByClassName();//类名
- document.getElementsByName();//name属性值，一般不用
- document.querySelector();//css选择符模式，返回与该模式匹配的第一个元素，结果为一个元素；如果没找到匹配的元素，则返回null
- document.querySelectorAll()//css选择符模式，返回与该模式匹配的所有元素，结果为一个类数组
数组方法有哪些以及作用
Push()：将新元素添加在数组的末尾
Join():将数组中的元素连接成字符串
Unshift():将新元素添加在数组的头部
Splice()；根据下标，在数组的任意位置可以添加或者删除任意元素
Slice()；根据数组的下标，裁切出新的数组
Indexof():在数组中搜索元素值并返回位置
Pop():删除数组中最后一个元素
Shift(): 删除数组中第一个元素
From(): 对伪数组和可迭代对象转化成数组对象
Concat(): 用于合并两个或多个数组
Sort() : 对数组中的元素进行排序，并返回数组
Find():返回数组中满足条件的元素值
Findindex():返回数组中满足条件的元素的索引
Map():创建新数组
Filter():创建新数组，只有数组中满足添加的元素才会进入新数组中
rem和em和px的区别？
rem相对单位，相对根元素
em相对单位，相对父元素
px固定单位
async和await的区别
async和await是配对使用的，await存在于async的内部。否则会报错
async用于声明一个函数异步的，await用于等待一个异步方法执行完成。
async返回值是一个Promise函数，await作为async函数执行完成，返回的是一个表达式，这个表达式可以是一个Promise对象或其他的值。
语义化的理解
HTML 语义化就是让页面的内容结构化，便于对浏览器、搜索引擎解析;
在没有样式CSS情况下也以一种文档格式显示，并且是容易阅读的。
搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重，利于SEO
使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解
谈谈你对ES6的理解
es6是一个新的标准，它新增了
- const常量和let变量
- 模板字符串
- 结构函数
- 箭头函数
- class
var、let及const区别
var定义的变量可以预解析，提前调用的结果是undefinet，let定义的变量不可以预解析，提前调用会报错
var定义的变量，变量名可以重复，let变量名不能重复，重复会报错
var定义的变量作用域是全局/局部作用域，let定义的变量如果在{}中，只能在{}中调用
var和let定义的变量可以改变，而const不能改变
什么是变量提升
变量提升即变量声明提升到它所在作用域的最开始的部分
console.log(a); //undefined
var a = 1;
console.log(a); // 1
function fn(){
console.log(b); //undefined
var b = 2;
console.log(b); //2
}
fn();
为什么会出现以上情况呢？js 代码的执行分为两个阶段：第一个阶段在当前词法环境中注册所有的变量和函数声明，简单说就是，解析；第二个阶段的 js 执行就开始了！
也就是是按照以下过程开始解析的：
var a;
console.log(a); // undefined =>因为声明了变量但是并没有初始化
a= 1;
console.log(a); //1 => 因为给a初始化了值
function fn(){
console.log(b); //undefined =>因为声明了变量但是并没有初始化
var b = 2;
console.log(b); //2 => 因为给b初始化了值
}
fn();
什么是暂时性死区
在ES6中, 引入了 let 和 const 两个新的命令, 并且使用这两个命令定义的变量不存在变量提升, 且使用let和const声明变量之前, 该变量都是不可用的, 这在语法上被称为 暂时性死区
什么是<keep-alive>
被<keep-alive>所包裹的组件就是动态组件，并且这个组件是不会被销毁的，相当于是组件的一种缓存。
作用：在组件切换过程中将状态保留在内存中，防止重复渲染DOM，减少加载时间及性能消耗，提高用户体验性。
<keep-alive>有两个钩子
activated：- 在 keep-alive 组件激活时调用
- 该钩子函数在服务器端渲染期间不被调用
deactivated：
-
在 keep-alive 组件停用时调用
-
该钩子在服务器端渲染期间不被调用
map与forEach的区别
- map会分配内存空间存储新数组并返回，forEach()不会返回数据。
- forEach()允许callback更改原始数组的元素。map()返回新的数组。
如何提高webpack的构建速度？
- 多入口情况下，使用CommonsChunkPlugin来提取公共代码
- 通过externals配置来提取常用库
- 利用DllPlugin和DllReferencePlugin预编译资源模块 通过DllPlugin来对那些我们引用但是绝对不会修改的npm包来进行预编译，再通过DllReferencePlugin将预编译的模块加载进来。
- 使用Happypack 实现多线程加速编译
- 使用webpack-uglify-parallel来提升uglifyPlugin的压缩速度。 原理上webpack-uglify-parallel采用了多核并行压缩来提升压缩速度
- 使用Tree-shaking和Scope Hoisting来剔除多余代码
什么是懒加载，原生小程序怎么实现懒加载
懒加载也就是延迟加载。当访问一个页面的时候，先把img元素或是其他元素的背景图片路径替换成一张大小为相同图片的路径（这样就只需请求一次，俗称占位图）
使用 lazy-load=“true” 实现懒加载
vuex的原理
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，
这个状态管理应用包含以下几个部分：
- state，驱动应用的数据源；
- view，以声明方式将 state 映射到视图；
- actions，响应在 view 上的用户输入导致的状态变化。
Promise的原理，以及promise.all，promise.race
promise拥有三种状态
- pending
- resolved
- rejected
只有异步操作结果才能决定当前是那种状态，其它任何操作都不能改变这个状态，Promise对象上有.then和.catch方法，.then()第一个参数接收的是resolved传过来的数据，.catch()第一个参数接收的是rejeected传过来的数据
Promise.all：
promise.all就是在所有作为参数的promise对象按顺序执行完之后再返回所有的值
Promise.race：
promise.race()里面哪个结果获得的快，就返回那个结果，不管结果本身是成功状态还是失败状态。
假设有多个api,例如a.api,b.api，c.api ,我要捕获其中一个异常，我应该怎么做，怎么去捕获
假设有多个api，我怎么把他当成一个接口去调用
import {saleDeptAnalysis,userAnalysis,contractIndustry} from '@/api/bi/customer' //接口
/**
* 查询表格数据，接口接口返回的数据
* @param parmas
*/
getList(parmas) {
this.getRequestHead(parmas)
.then(res => {
if (res.code === 0) {
this.tableData = res.data.list
}
})
}
/**
* 设置请求接口
* @param parmas
*/
getRequestHead(parmas) {
this.loading = true
this.tableData = []
if (parmas === 'sale') {
return saleDeptAnalysis(this.listPostParams)
} else if (parmas === 'employees') {
return userAnalysis(this.listPostParams)
} else if (parmas === 'contract') {
return contractIndustry(this.listPostParams)
}
},
说一下深浅拷贝原理
浅拷贝.由于引用类型数据是存在堆内存中，堆内存中存放的是引用类型的值，同时引用数据有会指针指向栈内存，浅拷贝的指针指向栈内存是一致的，所以一个改变另一个也会受影响。
深拷贝是在堆内存开启新的空间存放数据。
为什么使用JSON.stringify转化字符串中会报错？
对象中有对自身的循环引用；
let test = { a: 1, b: 2 };
test.c = test; // 循环引用
JSON.stringify(test); // 报错
你在平时怎么对数组去重
- 利用 filter() 去重
var arr = ['apple','apps','pear','apple','orange','apps'];
console.log(arr)
var newArr = arr.filter(function(item,index){
return arr.indexOf(item) === index; // 因为indexOf 只能查找到第一个
});
console.log(newArr);
-
利用for 循环 搭配 indexOf 去重
var arr = [1,9,8,8,7,2,5,3,3,3,2,3,1,4,5,444,55,22]; function noRepeat(arr) { //定义一个新的临时数组 var newArr=[]; //遍历当前数组 for(var i=0;i<arr.length;i++) { //如果当前数组的第i已经保存进了临时数组，那么跳过， //否则把当前项push到临时数组里面 if(newArr.indexOf(arr[i]) === -1) { //indexOf() 判断数组中有没有字符串值，如果没有则返回 -1 newArr.push(arr[i]); } } return newArr } var arr2 = noRepeat(arr); console.log(arr2);
在几十万条数据下map foreach for in 那个去重方法性能更节省
foreach > map > for in
- 使用for in会遍历数组所有的可枚举属性，包括原型
-
foreach函数签名中包含了参数和上下文
-
map会返回一个新的数组，数组的创建和赋值会导致分配内存空间
小程序绑定账号验证码整个流程
说一下你怎么实现页面回退之后，跳转到其他页面，过了10s之后再进进入，中间的消耗时间不会丢失，继续倒计时呢
将倒计时结束时间存储到vuex中，拿到store里的倒计时结束时间，还没结束就继续到计时
https://blog.csdn.net/weixin_45626517/article/details/121976411
你怎么去判断在setData数据量过多，可以优化小程序性能
setData设置的数据量是有限制的，单次设置的数据大小不得超过1024kb，否则就会出报错
分页加载
造成白屏的原因有哪些
- javaScript异常
- css加载不阻塞解析，但会阻塞渲染
- 浏览器兼容问题
- 缓存导致：客户端默认会缓存index.html入口文件，而由于vue打包生成的css/js都是哈希值，跟上次文件名不同，会出现找不到css/js情况
假设你现在做着任务，假设产品突然私下找你增加来了一个需求怎么办
这个要与需求方定好规则，增加需求需要提前N天提出，否则无法保证完成。再与团队说明，正常不需要加班，但偶尔会出加需求加班情况，我们已经跟需求方做了沟通基本杜绝出现，但如果有突发情况，需要团队配合完成。你平时都看哪些技术博客
掘金，博客园
标签：面试题,程序,加载,组件,数组,var,wx,页面 From： https://www.cnblogs.com/wang622/p/17202589.html