# xcx_xm_1_92

**Repository Path**: errlei/xcx_xm_1_92

## Basic Information

- **Project Name**: xcx_xm_1_92
- **Description**: 小程序第一个项目 享+ 小程序
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 4
- **Created**: 2023-07-13
- **Last Updated**: 2023-10-24

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## 小程序的目录结构优化？

在去年的时候，我在公司负责过一个完整的小程序。也有和其他同事合作过小程序。

+ 我自己在开发一个小程序的时候，为了后面方便项目的扩展，把小程序默认的项目结构优化了一遍。主要是以下几个方面
  + 将npm构建的目录修改以下，改为类似于之前开发vue项目的目录结构。主要涉及到`project.config.json`这个文件里面的几个setting的配置，关于业务代码所在的目录，和packagejson所在的目录。具体的属性名称官网上直接一找就可以了，名称具体属性记不太清
  + 配置整个小程序项目的sass支持，原生的wxss不好用
  + 开发者工具我用过很多， 常见的小程序开发者工具，在开发原生小程序非常方便。 还有vscode去开发uniapp小程序这个比较搭配， 最后还有一个uni-app的专属工具 hbuilderx也可以使用



## 小程序项目里面怎么发请求？

首先原生小程序只支持wx.request这个内置的api去发请求，但是这个方法不支持promise，不支持请求拦截器等比较好用的配置，所以我在工作里面会结合一些第三方包去二次封装项目的请求方法

我记得去年我的一个项目用的是wechat-http的一个包，里面的方法和axios类似，使用其他很流畅。自己在项目中二次封装了这个第三方包，并挂载到全局wx上面，方法各个页面的使用



## vue里面eventbus--事件总线

```
const bus = new Vue()
bus.$emit('事件名称', 传值)
bus.$on('事件',() => {})
bus.$off()
bus.$once

不要动不动就是用vuex
```



## 小程序里面怎么样给所有需要权限的页面做一个组件？

+ 创建一个authorization组件，将我们需要权限的页面的代码，放到这个组件的插槽里面去
+ 在组件的wxml里面，给slot标签写上wx:if 通过 isLogin用户是否登录来判断是否显示当前页面的内容

**问题：**之前写过小程序吗？哪些地方你印象比较深刻？或者哪些地方你觉得设计比较巧妙

**面试话术：** 我在之前自己独立负责过一个项目，在里面做过一个功能就是检测所有的页面是否登录过，登录过才能访问，没有登录过就不能访问。我之前在vue的项目里面是通过permission文件里面的路由守卫beforEach去写的。小程序里面没有这个功能。所以我自己封装了一个组件。将需要校验的页面的内容 通过插槽的形式放在我们自定义的组件内部，在自定义的组件里面 通过给slot这个标签 添加wx:if控制条件，如果登录就显示插槽内容，没有登录过就显示跳转到登录页面。从而达到复用的目的



## 自己写代码的一些思路或方向

+ 在写一些比较复杂的函数的时候，先会将所有错误的情况先处理一下，然后在通过return控制代码的流程。等所有的错误情况都处理完了最后在 写正常的逻辑操作。 之前我在写小程序的登录，以及自定义检验的函数里面有很多类似的场景。这样代码会很清晰，少了很多else操作

```
submitForm() {
  // 函数里面先写所有失败的情况，最后在处理正常的逻辑
  console.log(1);
  const valideMobileRes = this.validateMobile(this.data.mobile)
  const validateCodeRes = this.validateCode()

  if (!valideMobileRes || !validateCodeRes) return

  // 下面代码才是所有检验通过以后，执行的地方，比如等下发请求等等
  console.log(2);
},
```



## 你以前在小程序里面和后端沟通多吗？遇到过哪些沟通耗时很久的问题

+ 我之前做一个个人信息页面，需要将用户的微信头像上传到我们的系统里面来。微信小程序里面的上传是wx.uplaodFile这个方法，里面的url是需要传递我们自己的服务器地址。 然后后端不是很懂微信uploadFile方法里面需要的一些参数，还是按照之前的普通请求给的，例如 type  name file等属性。 后端给的字段和微信官网的字段对不上。这里和我们公司的后端扯皮了很久。最后以微信官网的字段为准，最后才实现了上传需求



## 腾讯位置服务

+ 经纬度转换为地名
+ this的指向你说一说？ 把前面背的八股文巴拉输出一遍， 再说 我之前项目里面，写过很多小程序的腾讯储存桶，腾讯位置定位服务，里面很多api的异步接口都是 success这种回调函数的写法，我们在掉this.setData的时候，会出现值绑定不上去的问题，这种情况一般是this指向混乱。我一般有两种修改问题的方式： 1. 在外部定义一个that变量，保存this 2.将success回调函数改写为es6的 箭头函数。



## this指向带上场景回答

this的指向你说一说？ 把前面背的八股文巴拉输出一遍， 再说 我之前项目里面，写过很多小程序的腾讯储存桶，腾讯位置定位服务，里面很多api的异步接口都是 success这种回调函数的写法，我们在掉this.setData的时候，会出现值绑定不上去的问题，这种情况一般是this指向混乱。我一般有两种修改问题的方式： 1. 在外部定义一个that变量，保存this 2.将success回调函数改写为es6的 箭头函数。



## 工作里面封装过函数吗？自己有哪些封装函数的技巧？

这个我在工作里面经常封装。 说白了函数封装就是将重复的代码块放在一起，然后不同的地方去调用即可，如果不同地方调用的场景不一样，就通过传递不同的形参去写。然后根据需要在reutrn不同的返回值即可

**我在上一个公司里面写过一些原生小程序**， 里面的业务涉及到腾讯的地理位置服务。关于根据经纬度转换汉语地名，根据关键词搜索search周边的地名，等很多api的调用，涉及到复用，我就将他们封装为了函数，然后写了两个形参，经度和维度



## 常见的获取字符串某个字符索引号？获取字符串某个字符的方法

+ 获取索引号  indexOf   str.split('').findIndex(item => item === '号')
+ str.charAt(7)  str.slice(7,8)  str.substr(7,1)  str.substring(7, 8)



回答 核心的几个关键词   indexOf  findIndex 可以获取索引号，字符串的话需要先转换为数组

字符串获取，一般我们采用 charAt  slice  substr  substring 等方法， 方法里面具体的 以索引号开头，索引号结尾还是 截取的字符串长度等等具体的 含义，我们一般通过开发者工具的代码提示使用，这种一般不会去记忆



## 初入公司看代码写代码期间，可以问同事什么问题？

+ 我们是问一些 变量和方法的 使用，是什么意思？有什么注意点？
+ 不能问的是一些基本的语法， 比如 小程序里面 循环怎么写？

记住： **能百度的就不能问， 不能百度的就可以问**



## dayjs 和 momentjs区别？ 项目里面怎么选择？

https://juejin.cn/post/6922398807472750605



## 你做过哪些兼容性问题？

一般的只会说写一些web里面的css等兼容性

说点不一样的： 我之前做过一个项目，在安卓手机里面，和ios手机里面， 同一个代码，效果不一样。 具体在xxx场景。

ios -- 刘海 --- 底部安全区域

安卓 ---  有些有有些没有



## 你在工作里面 使用的编程式多还是声明式导航多一些？ -- 小程序，vue都是一样说的

这个要看情况，一般如果是模板列表里面跳转页面，那么采用声明式导航，因为模板上面就可以直接使用参数，不需要传参到js里面。 还有些情况，如果是发送请求成以后，才能跳转，那么必须使用 编程式导航



## 简历上面写的项目

3 年经验+ 本科 ------- 至少5个项目

vue2  vue3  小程序 uniapp 

后台 + h5，  

小程序 +  原生（享+小程序）+ uniapp小程序(vue语法  品优购)



## 可以给面试官说的话

1. 你就说，我没事的时候经常看一下vant的源码，发现了一些特点，就是vant的dialog是通过 popup组件二次封装

   看一看 axios源码 --- 知道里面的 代码是通过 XMLHttpRequest 封装的

2. 之前有同事的代码，在写对象的解构赋值的时候，解构的变量如果没有值，就是undefined。如果是undefined就很容易造成错误。 所以我给团队 提了个建议， 就是所有的对象解构，都必须有一个默认值，这样就会增加代码的健壮性，减少bug
3. 我去年做过一个小程序，用到了地图组件，感觉还比较复杂。它那个业务是针对于3KM以内的小区，**提供上门维修服务**、**提供上门保洁服务**， **提供代养宠物服务**。 需要我们的工作人员通过 小程序，里面的用户房屋的标记点，去对应的位置提供服务器。 我在写的时候，会将服务器返回的一些经纬度数组，加工处理以下，转换为map组件可以使用的 markers 数据。在我们的详情页面显示 各种标记点。方便工作人员查看



vant的时间控件， 最小值min-date里面 ，双大括号里面  不让写 Date.now() 这个语句， 只能写数字



## 小程序生成二维码 ---  weapp-qrcode （qrcode.js）

+ 一种是后端 生成二维码 直接返回一张图片给前端
+ 后端返回地址字符串给前端， 前端通过地址 自己二维码



## 小程序的上拉加载，下拉刷新 ----  scroll-view的上拉加载和下拉刷新

+ 实现这个功能就要看页面里面是哪个区域进行下拉，是整个页面，还是局部的下拉
+ 如果是整个页面的下拉，就是在`app.json`里面配置enablePullDownRefresh，并在js里面监听onPullDownRefresh这个事件
+ 如果是页面的某一个区域下拉，就需要使用`scroll-view`组件包裹，使用这个组件的上拉刷新的配置和监听函数
+ 上拉加载也是一样的，有页面的上拉加载和 scroll-view区域的上拉加载。只需要配置对应的 属性 和监听事件就可以了
+ 核心代码就是 在发请求拼接数据的时候，不是等号，而是拼接旧数据和新数据。采用数组展开运算符。判断是用的 **当前页码值 * 每页条数  < total对比**