小程序面试总结

半糖不甜
578 阅读10分钟

1. 请你讲述一下微信小程序原理

1、微信小程序采用JavaScript、WXML、WXSS三种技术进行开发，从技术讲和现有的前端开发差不多，但深入挖掘的话却又有所不同

2、JavaScript：首先JavaScript的代码是运行在微信App中的，并不是运行在浏览器中，因此一些H5技术的应用，需要微信App提供对应的API支持，而这限制住了H5技术的应用，且其不能称为严格的H5，可以称其为伪H5，同理，微信提供的独有的某些API，H5也不支持或支持的不是特别好

3、WXML：WXML微信自己基于XML语法开发的，因此开发时，只能使用微信提供的现有标签，HTML的标签是无法使用的

4、WXSS：WXSS具有CSS的大部分特性，但并不是所有的都支持，而且支持哪些，不支持那些并没有详细的文档

5、微信的架构，是数据驱动的架构模式，它的UI和数据是分离的，所有的页面更新，都需要通过对数据的更改来实现

6、小程序分为两个部分webview和appService。其中webview主要用来展现UI，appService有来处理业务逻辑、数据及接口调用。它们在两个进程中运行，通过系统层JSBridge实现通信，实现UI的渲染、事件的处理

2. 分析下微信小程序的优劣势

优势：

1、无需下载，通过搜索和扫一扫就可以打开

2、良好的用户体验：打开速度快

3、开发成本要比App要低

4、安卓上可以添加到桌面，与原生App差不多

5、为用户提供良好的安全保障。小程序的发布，微信拥有一套严格的审查流程， 不能通过审查的小程序是无法发布到线上的

劣势：

1、限制较多。页面大小不能超过1M。不能打开超过5个层级的页面

2、样式单一。小程序的部分组件已经是成型的了，样式不可以修改。例如：幻灯片、导航

3、推广面窄，不能分享朋友圈，只能通过分享给朋友，附近小程序推广。其中附近小程序也受到微信的限制

4、依托于微信，无法开发后台管理功能

3. 说出提高小程序的应用速度

  • 提高页面加载速度
  • 用户行为预测
  • 减少默认data的大小
  • 组件化方案

4. 小程序的文件种类

  • WXML 是框架设计的一套标签语言，结合基础组件、事件系统，可以构建出页面的结构。内部主要是微信自己定义的一套组件
  • WXSS 用于描述WXML的组件样式 类似于 css
  • Js 逻辑处理，网络请求
  • Json 小程序页面配置，如页面注册，页面标题及tabBar

5. 小程序的wxss 和 css有哪些不一样的地方

  • wxss的图片引入需要使用外链地址
  • 没有Body, 样式可以直接使用import导入

6. 小程序的生命周期函数

  • onLoad 页面加载时触发。一个页面只会调用一次，可以在onLoad 的参数中获取打开当前页面路径中的参数
  • onShow() 页面显示/切入前台时触发
  • onReady() 页面初次渲染完成时触发。一个页面只会调用一次，代表页面已经准备妥当，可以和视图层进行交互
  • onHide() 页面隐藏/切入后台时触发。 如 navigateTo 或底部 tab 切换到其他页面，小程序切入后台等
  • onUnload() 页面卸载时触发。如 redirectTo 或 navigateBack 到其他页面时

7. 组件生命周期函数

  • created() ：组件实例刚刚被创建好时触发。
  • attached() ：进入页面节点树后触发
  • detached()  组件离开页面节点树后触发

8. 组件之间和跳转之间和方法绑定的参数的传参

  • 父传孩:组件之间通过proprites传递参数,现在子组件定义properties定义参数类型和默认值,具体值有父组件调用子组件的时候通过相同的名字调用

    格式一     text:String

    格式二     **text :{ type:String , value : '' ,}   **   value是默认值

  • 子传父:孩:that.triggerEvent("函数名字",传递的参数) 父:bind:父亲的函数="_search(实现的函数)" 然后实现的函数可以通过参数e.detail获取传递数值

跳转之间传递参数来结尾通过?xx=值传递,之后在跳转完成的界面通过onload options传递

方法绑定的传参,在html界面通过data-xx="" 之后在调用的方法中e.currentTarget.dataset.xx就可以调用参数了

  • 子传递父亲:孩子通过this.triggerEvent("up",res)创建一个事件  父亲通过组件,bind-xx()="函数名字" 后可以通过函数名字(e)参数获取数据

9. 获取用户信息

<button type="primary"  open-type="getUserInfo"
 bindgetuserinfo="handleGetUserInfo">
 登录
</button>

open-type="getUserInfo"   设置按钮功能为获取用户信息

bindgetuserinfo    是点击后的调用  自带的形参中，就有用户信息

handleGetUserInfo(e) {
        console.log(e)
        const { userInfo } = e.detail;
 }

小程序关联微信公众号如何确定用户的唯一性？使用 wx.getUserInfo方法 withCredentials 为 true 时 可获取 <encryptedData，里面有 union_id。后端需要进行对称解密

8. 微信小程序运用到的各种接口和特别的方法

  1. x.request()这个方法相同于ajax,但是默认的是get方法,所以无法传递文件,只能传递文字参数

  2. wx.uploadfile()不同于上一个方法,此方法能够上传文件,原理是选择上传的文件变成一个临时路径传递给后端,后端进行处理

  3. 获取oppenid的接口,将程序的id,秘匙,和用户id一同传给后端,成功则返回用户对于该小程序唯一的oppenid,用来唯一表示用户

  4. wx.getUserProfile:获取用户的基本信息,包括用户名,用户头像地址,性别,所在城市和语言

  5. qq地图提供的特殊函数调用:调用第三方的方法时,要先在第三方注册获得秘匙方能调用:首先先导入注册得到实例对象,后通过对象;qq地图提供将经纬度转化成实例坐标:wxMap.reverseGeocoder({location:经纬度})

6. wx.createMapContext(xx):xx提供map id可以获取此地图对象

  1. this.mapCtx.getCenterLocation:获取地图的中心位置,由res给出

10. 你是怎么封装小程序的数据请求？

  • 把所有的接口放在同一的js文件中导出
  • 在app.js中创建封装请求数据的方法
  • 在子页面中调用封装的方法请求数据

11. 小程序页面跳转？

  • wx.navigateTo()：保留当前页，跳转到应用内某个页面，但是不能跳转到tabbar
  • wx.redirectTo()：关闭当前页，跳转到用用内某个页面，但是不能跳到tabbar
  • wx.switchTab()：跳转到tabbar，并关闭其他所有非tabbar页面
  • wx.navigateBack()：关闭当前页面，返回上一页或者多页，可通过getCurrentPage() 获取当前的页面栈，决定需要返回几层
  • wx.reLaunch()：关闭所有页面，打开到应用内的某个页面

12. bindtap和catchtap的区别？

  • bind事件绑定不会阻止冒泡事件向上冒泡
  • catch事件绑定可以阻止冒泡事件向上冒泡

13. 小程序调用后台接口遇到哪些问题？

  • 数据的大小限制，超过范围会直接导致整个小程序崩溃，除非重启小程序；
  • 小程序不可以直接渲染文章内容这类型的html文本，显示需借助插件
  • 注：插件渲染会导致页面加载变慢，建议在后台对文章内容的html进行过滤，后台直接处理批量替换p标签div标签为view标签。然后其他的标签让插件来做。

14. 小程序对wx：if 和hidden 使用的理解?

  • wx:if有更高的切换消耗
  • hidden有更好的初始渲染消耗
  • 因此，如果需要频繁切换的情境下，用hidden更好，如果在运行时条件不大可能改变则wx：if较好。

15. 小程序如何实现下拉刷新？

用view代替scroll-view,设置onPullDownRefresh函数实现。

1、在json文件中配置enablePullDownRefresh为true(app.json中在window中设置enablePullDownRefresh,此效果作用于全局)

2、在js文件中实现onPullDownRefresh方法，在网络请求完成后调用wx.stopPullDownRefresh()来结束下拉刷新

15. 小程序的传值方法有哪些？

  • 给HTML元素添加data-*属性来传递我们需要的值，然后通过e.currentTarget.dataset或onload的param参数获取。但data-名称不能有大写字母和不可以存放对象
  • 设置id 的方法标识来传值通过e.currentTarget.id获取设置的id的值,然后通过设置全局对象的方式来传递数值
  • 使用全局变量实现数据传递 ,在 app.js 文件中定义全局变量 globalData， 将需要存储的信息存放在里面
  • 页面跳转或重定向时，使用url带参数传递数据 如wx.navigateTo与 wx.redirectTo
  • 使用组件模板template传递参数
  • 使用缓存传递参数
  • 使用数据库传递参数

16. 怎么解决小程序异步请求问题

  • 小程序支持大部分 ES6 语法
  • 在返回成功的回调里面处理逻辑Promise异步

17. 小程序简单介绍下三种事件对象的属性列表？

基础事件（BaseEvent）

  • type:事件类型
  • timeStamp：事件生成时的时间戳
  • target：触发事件的组件的属性值集合
  • currentTarget：当前组件的一些属性集合

自定义事件（CustomEvent）

  • detail

触摸事件（TouchEvent）

  • touches
  • changedTouches

18. app.json 是对当前小程序的全局配置，讲述三个配置各个项的含义

  • pages字段—— 用于描述当前小程序所有页面路径，这是为了让微信客户端知道当前你的小程序页面定义在哪个目录。
  • window字段 —— 小程序所有页面的顶部背景颜色，文字颜色定义在这里的
  • tab字段—小程序全局顶部或底部tab

19. 微信小程序与vue区别

  • 生命周期不一样，微信小程序生命周期比较简单
  • 数据绑定也不同，微信小程序数据绑定需要使用{{}}，vue 直接:就可以 显示与隐藏元素，vue中，使用 v-if和 v-show
  • 控制元素的显示和隐藏，小程序中，使用wx-if和hidden 控制元素的显示和隐藏
  • 事件处理不同，小程序中，全用 bindtap(bind+event)，或者 catchtap(catch+event)绑定事件,vue：使用v-on:event 绑定事件，或者使用@event绑定事件
  • 数据双向绑定也不也不一样在 vue中,只需要再表单元素上加上 v-model,然后再绑定 data中对应的一个值，当表单元素内容发生变化时，data中对应的值也会相应改变，这是 vue非常 nice 的一点。微信小程序必须获取到表单元素，改变的值，然后再把值赋给一个 data中声明的变量。

20. 小程序和vue双向绑定？

  • 在vue中进行数据绑定后,当数据修改了会直接更新到视图上
  • 但是在小程序中呢,data数据修改是不会直接同步到,必须调用this.setData()这个方法

21. webview的页面怎么跳转到小程序导航的页面

小程序导航的页面可以通过switchTab，但默认情况是不会重新加载数据的。若需加载新数据，则在success属性中加入以下代码即可：

success: function (e) {
   var page = getCurrentPages().pop();
   if (page == undefined || page == null) return;
   page.onLoad();
  }

webview的页面，则通过

 wx.miniProgram.switchTab({
     url: '/pages/index/index'
})
avatar
文章
阅读
粉丝