小程序面试题

为什么不可以同名
635 阅读8分钟

小程序

技术类：

  • 微信支付步骤

1.打开小程序，点击直接下单

2.用wx.login获取到用户临时登录凭证code，发送到后端服务器换取openid

3.在下单时，小程序需要将购买的商品id，数量，以及用户的openid传送到服务器

4.服务器在接收到商品id数量，openid后，生成服务器订单数据，同时经过一定的签名算法，向微信支付发起请求，获取预付单信息，同时将获取的数据再次进行相应规则的签名，向小程序端响应必要的信息

5.小程序端在获取到对应的参数之后，调用wx.requestPayment（）发起微信支付，唤醒支付工作台，进行支付

6.接下来一系列操作都是由用户来操作的包括了微信支付密码，指纹等验证，确认支付后指向鉴权调起支付

7.鉴权调起支付：在微信后台进行鉴权，微信后台直接返回给前端支付结果，前端收到返回数据后对支付结果进行展示

8.推送支付结果：微信后台在给前端返回支付的结果后，也会向后台返回一个支付的结果，后台通过这个支付结果来更新订单的状态

  • 小程序授权登录

1.当用户进入小程序的时候首先需要判断用户是否授权过小程序

2.如果没授权，需要通过一个按钮来实现授权登录

3.通过调用getuserInfo()，可以获取到个人信息

4.用户可以授权登录也可以取消登录

5.根据登录接口返回的code，判断用户是否为新用户

6.当用户注册成功之后，再调用登录接口，保存token

  • 请谈谈微信小程序主要目录和文件的作用

1.project.config.json 项目配置文件，用得最多的就是配置是否开启https校验； 2.App.js 设置一些全局的基础数据等； 3.App.json 底部tab, 标题栏和路由等设置； 4.App.wxss 公共样式，引入iconfont等； 5.pages 里面包含一个个具体的页面； 6.index.json (配置当前页面标题和引入组件等)； 7.index.wxml (页面结构)； 8.index.wxss (页面样式表)； 9.index.js (页面的逻辑，请求和数据处理等)；

  • 请谈谈wxml与标准的html的异同

1.都是用来描述页面的结构； 2.都由标签、属性等构成； 3.标签名字不一样，且小程序标签更少，单一标签更多； 4.多了一些 wx:if 这样的属性以及 {{ }} 这样的表达式 5.WXML仅能在微信小程序开发者工具中预览，而HTML可以在浏览器内预览 6.组件封装不同， WXML对组件进行了重新封装， 7.小程序运行在JS Core内，没有DOM树和window对象，小程序中无法使用window对象和document对象。

  • 请谈谈WXSS和CSS的异同

1.都是用来描述页面的样子；

2.WXSS 具有 CSS 大部分的特性，也做了一些扩充和修改；

3.WXSS新增了尺寸单位，WXSS 在底层支持新的尺寸单位 rpx；

4.WXSS 仅支持部分 CSS 选择器；

5.WXSS 提供全局样式与局部样式

  • 你是怎么封装微信小程序的数据请求的

1.在根目录下创建utils目录及api.js文件和apiConfig.js文件； 2.在apiConfig.js 封装基础的get, post 和 put， upload等请求方法，设置请求体，带上token和异常处理等； 3.在api中引入apiConfig.js封装好的请求方法，根据页面数据请求的urls, 设置对应的方法并导出； 4.在具体的页面中导入

  • 小程序页面间有哪些传递数据的方法

1.使用全局变量实现数据传递

2.页面跳转或重定向时，使用url带参数传递数据

3.使用组件模板 template传递参数

4.使用缓存传递参数

5.使用数据库传递数据

  • 请谈谈小程序的双向绑定和vue的异同

  1. 大体相同，但小程序直接this.data的属性是不可以同步到视图的，必须调用this.setData()方法！

  • 请谈谈小程序的生命周期函数？

页面级：

onLoad() 页面加载时触发，只会调用一次，可获取当前页面路径中的参数。 onShow() 页面显示/切入前台时触发，一般用来发送数据请求； onReady() 页面初次渲染完成时触发, 只会调用一次，代表页面已可和视图层进行交互。 onHide() 页面隐藏/切入后台时触发, 如底部 tab 切换到其他页面或小程序切入后台等。 onUnload() 页面卸载时触发，如redirectTo或navigateBack到其他页面时。

应用级：

onLaunch：小程序启启动时

onShow：小程序前台运行时

onHide：小程序后台运行时

onError：执行错误时

onPageNotFount：冷启动（如扫码）打开小程序的页面不存在时

  • 微信小程序如何实现下拉刷新

  1. 用view代替scroll-view，设置onPullDownRefresh函数实现

  • bindtap和catchtap的区别

1.bind的事件绑定不会阻止冒泡事件向上冒泡

2.catch事件绑定可以阻止冒泡事件向上冒泡

  • 怎么解决微信小程序的异步请求问题

  1. 小程序支持 ES6 语法，使用 Promise 来解决异步请求

  • 小程序关联微信公众号如何确定用户的唯一性

使用 wx.getUserInfo 方法 withCredentials 为 true 时，可获取 encryptedData，里面有 union_id，后端需要进行对称解密

  • 简述五个路由的区别

1.wx.navigateTo() 保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面 ； 2.wx.redirectTo() 关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面； 3.wx.switchTab() 跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面； 4.wx.navigateBack() 关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages() 获取当前的页面栈，决定需要返回几层； 5.wx.reLaunch() 关闭所有页面，打开到应用内的某个页面。

可以按照在 wxml、js和跳转失败进行区分：

在wxml页面中：可分为 “跳转新页面”、“在当前页打开”、“切换到首页Tab”； 在js页面中：分为 “应用内的页面” 和 “tabBar页面” ； 如果上述跳转遇到跳转失败或者无效的问题，请访问：wx.navigateTo/wx.redirectTo无效

  • 小程序如何更新页面中的值

  1. 可以通过 this.setData 来进行改变

  • 如何实现登录数据的持久化

  1. 可以通过 wx.setStorageSync('键名', 对应的值) 来进行数据持久化存储。

  • 微信小程序和app有什么不同之处

  1. 微信小程序属于轻量级的app 但是限制在微信中，开发周期短，功能较少，占用空间少
  2. app就相反 需要占用额外内存 开发周期长

  • 微信小程序如何进行双向绑定

  1. 通过 bind-tap 点击事件 向 app.js 定义的方法中获取回执
  2. 设置 data 的值 实现双向绑定

  • 如何自定义tabbar

  1. 取消当前的 tabbar
  2. 插入自定义 tabbar 组件
  3. app.json 调用组件
  4. 页面显示 tabbar 组件

  • 小程序怎样使用自定义组件

  1. 新建自定义组件目录，生成目录结构；
  2. 写好组件内容；
  3. 在要使用的目标页面的 json 文件中配置下 usingComponents，引入组件；
  4. 以标签的形式在页面中使用该组件即可；
  5. 传递数据和 vue 一样，通过自定义属性，然后在组件里通过 properties 接收就可以使用了

  • 小程序本地存储（数据缓存）有哪些常用api

1.数据的存储，将数据存储在本地缓存中指定的 key 中 wx.setStorage(Object object) 异步 wx.setStorageSync(string key, any data) 同步 2.数据的获取，从本地缓存中异步获取指定 key 的内容 wx.getStorage(Object object) 异步 wx.getStorageSync(string key) 同步 3.存储信息的获取，异步获取当前storage的相关信息 wx.getStorageInfo(Object object) 异步 wx.getStorageInfoSync() 同步 4.数据的删除，从本地缓存中移除指定 key wx.removeStorage(Object object) 异步 wx.removeStorageSync(string key) 同步 5.数据的清空，清理本地数据缓存 wx.clearStorage(Object object) 异步 wx.clearStorageSync() 同步

业务类

  • 如何自定义tabBar

  • 说一下小程序页面之间的传值

  • 本地图片资源无法通过wxss获取

本地资源图片无法通过WXSS 获取，可以使用网络图片，或者 base64，或者使用标签来解决

  • wx.navigateTo无法打开页面是为什么？如何解决？

一个应用同时只能打开5个页面，当已经打开了5个页面之后，wx.navigateTo 不能正常打开新页面。请避免多层级的交互方式，或者使用 wx.redirectTo。

  • tabBar设置不显示

tabBar设置不显示有如下几个原因：

  1. tabBar 的数量少于2项或超过5项都不会显示；
  2. tabBar 写法错误导致不显示；
  3. tabBar 没有写 pagePath 字段（程序启动后显示的第一个页面）

  • 小程序调用后台接口遇到哪些问题

1.数据的大小有限制，超过范围会直接导致整个小程序崩溃，除非重启小程序； 2.小程序不可以直接渲染文章内容页这类型的html文本内容，若需显示要借助插件，但插件渲染会导致页面加载变慢，所以最好在后台对文章内容的html进行过滤，后台直接处理批量替换p标签div标签为view标签，然后其它的标签让插件来做，减轻前端处理的时间

  • 小程序的登录流程

avatar
文章
阅读
粉丝