uniapp 和 vue 面试题总结

uniapp

小程序跳转到上一个页面会刷新吗

在小程序中，跳转到上一个页面（通过 `navigateBack` 方法）并不会刷新页面。
跳转回上一个页面时，上一个页面的状态和数据会保留，页面会从后台恢复到前台显示。

小程序的页面栈是按照打开页面的顺序进行管理的，当跳转到上一个页面时，实际上是将当前页面从页面栈中移除，
然后显示上一个页面。因此，上一个页面并不会重新加载或刷新。

需要注意的是，如果上一个页面是通过 `redirectTo` 或 `switchTab` 方法跳转过来的，
并不会保留在页面栈中，所以无法通过 `navigateBack` 返回到上一个页面。

一、你觉得uniapp和vue有什么区别

1. uniapp是使用vue.js开发的框架
2. uniapp开发一套代码，可以发布到多端

二、小程序怎么处理跨域问题

不校验url

注意：上线不行

总结跨域问题

1. 小程序 没有跨域问题 需要 “不校验url”

但是上线是不行的，必须要在网页后台配置 “request合法域名” 就可以了，并且必须是https开头

2. 浏览器需要设置代理来解决跨域问题==》类似于vue==〉proxy : server

   在根目录新建vue.config.js ===》只在浏览器端生效

条件编译使用场景：处理跨域问题的时候，浏览器端不走请求的基础url，小程序运行，所以给这里加入条件编译判断

二：补充：关于项目上线的问题

2.1 关于小程序项目的问题

注意：在做项目的时候，就已经知道要分饱的 ==》 千万别觉得马上要上线了，再去分包
		
分包不是上线才做的，是在开发的过程中，就知道会有这个问题，所以前置性就要做

1. 在manifest.json的视图源码中加入
    "optimization":{"subPackages":true}

2. 在 pages.json中进行分包：

"subPackages": [{
		"root": "login",
		"pages": [{
			"path": "login",
			"style": {
				"navigationBarTitleText": "登录"
			}
		}]
	}],

主包是不要分包的，主包有：首页 + tabbar页面

三 自定义头部 : pages.json中pages

"style": {             
    "navigationStyle": "custom"  //代表自定义头部
}

四、在非有dom的生命周期中拿到dom怎么办？

“异步” ==》 promise、$nextTick原理就是返回了异步
    

五、关于适配问题

5.1 普通移动端适配( H5页面 )

淘宝无线适配方案 : 盒子单位采用rem（rem是针对于根元素的font-size），
如果根元素(html)的font-size发生改变，那么rem的值换算成px也会发生改变，
所以我们要动态的修改根元素的font-size值（屏幕的宽度/10）


5.2 uniapp中或者小程序怎么做适配呢？

rpx单位就可以了（无需再写其他内容）
我们一般开发的时候，把设计图宽度弄成750宽度，测量出来的某一个盒子宽度是300px，
那么代码中就写300rpx就可以了

参考文档：https://uniapp.dcloud.net.cn/tutorial/syntax-css.html#%E5%B0%BA%E5%AF%B8%E5%8D%95%E4%BD%8D

六、项目环节

6.1 混入面试题

1. 什么是混入

    封装了可复用功能
    混入本身可以包含组件中script标签的任意内容：data、生命周期、methods、computed...

                注意：当前组件有data:{a:1} ，在混入中可以直接使用this.a ，相当于组件和混入的js文件是混在一起的

2. 混入使用场景：你在什么地方用过混入，为什么用混入

                小程序全局开启分享功能，那么分享功能是生命周期 而 混入可以使用生命周期，那么直接弄一个全局混入就可以了

3. 混入的方式

                全局混入==》main.js
                局部混入==》某一个.vue中

4. 混入缺点

        不好维护：因为混入进来的值，当前组件查找不到来源

5. 全局混入和Vue.prototype.xxx区别

        Vue.prototype.xxx  ==》 Vue这个构造函数的原型中添加的方法
        全局混入            ==》 直接给这个构造函数添加的方法

6. 混入和普通工具类区别

        普通的数据类：是没有组件的data、methods、生命周期...，混入是有的

6.2 混入使用场景：办鹿小程序功能 分享 ==》用到全局混入

点击按钮分享：
1. 必须当前页面开启分享，当前页面开启分享需要在当前页面中加入onShareTimeline和onShareAppMessage生命周期。
2. 但是如果整个项目所有页面都需要分享，那么每一个页面手动加入显然是不好的。
        解决办法：全局开启分享==》vue中混入

    ***混入可以写data、methods、生命周期...内容

6.3 商品规格

你们的商品是单规格还是多规格  ==》 多规格

追杀问题：那么你们那个多规格，那么后端给你返回的数据结构是什么样的？数据类型是对象还是数组?

1. 这一块的数据很乱的字段：sku ==> 数组，数组的成员是对象，对象涵盖了==》当前这个商品所有规格 ｜ 对象中有每一行规格的id，当前这个规格的商品价格，库存，图片...。

2. 因为后端给的有些数据，不是json格式是字符串，我要需要把字符串转换成对象。

6.4 微信登录

前置性内容：appid、开发者权限

功能流程：
1. uni.getUserProfile()

rawData        不包括敏感信息的原始数据字符串，用于计算签名。
signature      使用 sha1( rawData + sessionkey ) 得到字符串，用于校验用户信息。
encryptedData  包括敏感数据在内的完整用户信息的加密数据，详细见加密数据解密算法。
iv	       加密算法的初始向量，详细见加密数据解密算法。

2. uni.login()

    code 用户登录凭证。开发者需要在开发者服务器后台，使用 code 换取 openid 和 session_key 等信息
    data:{
        openid
        sessionKey
        unionid
    }

3. 微信一键登录 ：调用后端给的接口，需要传递 uni.login 返回的code码
4. 注册环节：调用接口 ，把参数传递给后端
5. 如果注册了，进行绑定手机号环节==>可以绑定也可以不绑定

七 关于本地存储的问题

1. 在uniapp框架中 或 微信小程序中，是没有localStorage，应该写成uni.setStorage
2. 在微信小程序中，没有cookies

八 关于uniapp的vuex实现持久化存储

1. 下载
        npm install --save vuex-persistedstate
2. 引入
        import createPersistedState from 'vuex-persistedstate' // 引入数据持久化插件
3. 配置
        state:{
                //
        },
        actions:{
                //
        },
        plugins: [
                createPersistedState({
                        storage: { // 存储方式定义  
                                getItem: (key) => uni.getStorageSync(key), // 获取  
                                setItem: (key, value) => uni.setStorageSync(key, value), // 存储  
                                removeItem: (key) => uni.removeStorageSync(key) // 删除  
                        }
                })
        ]

九 关于button的open-type

获取绑定微信手机号列表：<button open-type="getPhoneNumber">获取手机号</button>
分享给好友：<button open-type="share">分享</button>

十 关于页面跳转问题

非tabbar页面跳转：uni.navigateTo()
tabbar页面跳转：uni.switchTab()

十一 支付

支付流程

1. 用户选择对应规格的商品==》点击立即购买 「判断用户是否登录」
2. 进入确认订单页
3. 点击提交订单 ==》传递参数：收货地址id、用户id、商品的spuid、skuid和数量、下单时间的时间戳、备注
        如果这里成功，后台管理「或者后端」，就已经生成一个订单了
4. 通过上面第三步，如果正确后端会给前端返回【订单号】、还有一个唤醒支付的其他参数比如appid之类的
5. uni.requestPayment : 是来唤醒支付的
                传递的参数，根据uniapp文档来配置就可以，这个参数在下单的时候，后端会给前端。
6. 不管用户支付成功还是失败，都会跳转到用户的订单列表，
                        支付成功==》待发货
                        支付失败==》待付款

        

十二、性能优化

1.1 首页

场景：后端一次性给10条数据，把数据渲染到页面上，但是上下拉可能会再次加载很多数据，
当数据可能有100条的时候，那么全部把数据渲染到页面上 会出现卡顿等等情况

解决办法：我的核心思路就是不管有多少条数据，我通过逻辑去处理，
在页面上永远展示的是3个swiper，这样dom层面上就少很多了。

Vue

一 Vue2和Vue3面试题

vue3 向下兼容 : vue2选项式api
vue3 setup 语法糖形式   ===》 有一个问题：写起来代码非常乱，不容易维护
        解决这个问题，一般都用hooks写法

二 Vue你常用api有哪些？

computed()
reactive()
ref()
watch()
markRaw()
app.config.globalProperties
nextTick()
app.directive()

三 项目部分 后台管理系统

3.1 如何封装loading

在vue全局install了方法==>$loading

在Vue3中的setup写法是没有this的，所以要获取全局vue的某一个方法，需要在组件中：

import { getCurrentInstance } from 'vue';
let app = getCurrentInstance();
app.appContext.config.globalProperties.$loading;

在全局install中，的方法，导入.vue文件，创建在body中，那么这样就可以在某个组件中直接使用了。

3.2 右侧按钮及权限控制

1. 写一个指令，在指令中判断 当前用户所有的权限和指令传递过来的参数权限。
2. 如果在总数据中能找到指令传递过来的参数，那么就reutrn
3. 否则（没有这个权限）直接父元素.removeChild(子元素)[把按钮删除掉]

3.3 ES面试题

1 运算符的扩展

        ?. ==》 ?.左侧返回undefined 或 null 则整个返回左侧内容

2 promise和async/await

        Promise是一个对象，这个对象有很多API，这些api（.then、all...）都是异步操作。

        async/await : 就是让异步的代码，同步执行

Promise和async/await区别：

        1. 执行方面：Promise不能阻塞和控制异步的执行顺序。
                    async/await可以阻塞，可以做到代码流程执行控制。
        2. 返回结果值：
                    Promise对象一个Pormise
                    await可以直接解析Promise
场景：
    1. 要做异步代码的流程控制，需要用async/await
    2. 要做多请求同时返回数据用Pormise.all，其他简单异步不需要流程控制，都可以使用Promise