前端小程序笔试面试题

前言

随便打开一个招聘网站， 你会发现市场上对小程序的需求还挺高的，虽然小程序一部分开发起来仍是挺简单ok的，但一些经常使用的东西仍是须要了解一下，所以总结了一篇有关小程序的面试题,但愿对你我都帮组。

目录：

前端HTML+CSS笔试题面试题
前端JS笔试题面试题
前端Vue笔试题面试题
前端小程序笔试题面试题

一、微信小程序有几个文件

• WXML（WeiXin Markup Language）是框架设计的一套标签语言，结合基础组件、事件系统，能够构建出页面的结构。内部主要是微信本身定义的一套组件
• WXSS (WeiXin Style Sheets)是一套样式语言，用于描述 WXML 的组件样式
• js逻辑处理，网络请求
• json小程序设置，如页面注册，页面标题及tabBar

二、微信小程序怎样跟事件传值

给 HTML 元素添加 data-*属性来传递咱们须要的值，而后经过 e.currentTarget.dataset 或 onload的 param参数获取。但 data -名称不能有大写字母和不能够存放对象

三、小程序的 wxss 和 css 有哪些不同的地方？

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

四、小程序关联微信公众号如何肯定用户的惟一性

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

五、微信小程序与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中声明的变量。

六、小程序的双向绑定和vue哪里不同

小程序直接 this.data属性是不能够同步到视图的，必须调用：

this.setData({
    // 这里设置
})
复制代码

七、简述微信小程序原理

• 微信小程序采用 JavaScript、WXML、WXSS 三种技术进行开发,本质就是一个单页面应用，全部的页面渲染和事件处理，都在一个页面内进行，但又能够经过微信客户端调用原生的各类接口
• 微信的架构，是数据驱动的架构模式，它的 UI 和数据是分离的，全部的页面更新，都须要经过对数据的更改来实现
• 小程序分为两个部分 webview和 appService 。其中 webview 主要用来展示UI ，appService 有来处理业务逻辑、数据及接口调用。它们在两个进程中运行，经过系统层 JSBridge 实现通讯，实现 UI 的渲染、事件的处理

八、小程序的生命周期函数

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

九、哪些方法能够用来提升微信小程序的应用速度

一、提升页面加载速度

二、用户行为预测

三、减小默认 data 的大小

四、组件化方案

十、微信小程序的优劣势

优点

即用即走，不用安装，省流量，省安装时间，不占用桌面 依托微信流量，天生推广传播优点 开发成本比 App 低

缺点

用户留存，即用即走是优点，也存在一些问题 入口相对传统 App 要深不少 限制较多,页面大小不能超过2M。不能打开超过10个层级的页面

十一、怎么解决小程序的异步请求问题

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

十二、如何实现下拉刷新

首先在全局 config 中的 window配置 enablePullDownRefresh ，在 Page 中定义onPullDownRefresh 钩子函数,到达下拉刷新条件后，该钩子函数执行，发起请求方法 请求返回后，调用wx.stopPullDownRefresh中止下拉刷新

1三、bindtap和catchtap的区别是什么

相同点：首先他们都是做为点击事件函数，就是点击时触发。在这个做用上他们是同样的，能够不作区分

不一样点：他们的不一样点主要是bindtap是不会阻止冒泡事件的，catchtap是阻值冒泡的

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

一、使用全局变量实现数据传递。在 app.js 文件中定义全局变量 globalData， 将须要存储的信息存放在里面

二、使用 wx.navigateTo与 wx.redirectTo 的时候，能够将部分数据放在 url 里面，并在新页面onLoad的时候初始化

三、使用本地缓存Storage 相关

1五、小程序wxml与标准的html的异同？

相同：

• 都是用来描述页面的结构；
• 都由标签、属性等构成；

不一样：

• 标签名字不同，且小程序标签更少，单一标签更多；
• 多了一些wx:if 这样的属性以及 {{ }}这样的表达式
• WXML仅能在微信小程序开发者工具中预览，而HTML能够在浏览器内预览；
• 组件封装不一样， WXML对组件进行了从新封装，
• 小程序运行在JS Core内，没有DOM树和window对象，小程序中没法使用window对象和document对象。

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

基础事件（BaseEvent）

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

自定义事件（CustomEvent）

• detail

触摸事件（TouchEvent）

• touches
• changedTouches

1七、小程序对wx:if 和 hidden使用的理解？

• wx:if有更高的切换消耗。
• hidden 有更高的初始渲染消耗。
• 所以，若是须要频繁切换的情景下，用 hidden 更好，若是在运行时条件不大可能改变则wx:if 较好。

1八、微信小程序与H5的区别？

• 运行环境的不一样

传统的HTML5的运行环境是浏览器，包括webview，而微信小程序的运行环境并不是完整的浏览器，是微信开发团队基于浏览器内核彻底重构的一个内置解析器，针对小程序专门作了优化，配合本身定义的开发语言标准，提高了小程序的性能。

• 开发成本的不一样

只在微信中运行，因此不用再去顾虑浏览器兼容性，不用担忧生产环境中出现不可预料的奇妙BUG

• 获取系统级权限的不一样

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

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

20、小程序onPageScroll方法的使用注意什么？

因为此方法调用频繁，不须要时，能够去掉，不要保留空方法，而且使用onPageScroll时，尽可能避免使用setData()，尽可能减小setData()的使用频次。

2一、小程序视图渲染结束回调？

使用setData(data, callback)，在callback回调方法中添加后续操做代码

2二、小程序同步API和异步API使用时注意事项？

wx.setStorageSync是以Sync结尾的API为同步API，使用时使用try-catch来查看异常，若是断定API为异步，能够在其回调方法success、fail、complete中进行下一步操做。

2三、简述下 wx.navigateTo(), wx.redirectTo(), wx.switchTab(), wx.navigateBack(), wx.reLaunch()的区别

• wx.navigateTo()：保留当前页面，跳转到应用内的某个页面。可是不能跳到 tabbar 页面
• wx.redirectTo()：关闭当前页面，跳转到应用内的某个页面。可是不容许跳转到 tabbar 页面
• wx.switchTab()：跳转到 abBar 页面，并关闭其余全部非 tabBar 页面
• wx.navigateBack()：关闭当前页面，返回上一页面或多级页面。可经过getCurrentPages() 获取当前的页面栈，决定须要返回几层
• wx.reLaunch()：关闭全部页面，打开到应用内的某个页面

2四、如何封装微信小程序的数据请求的？

一、将全部的接口放在统一的js文件中并导出。

二、在app.js中建立封装请求数据的方法。

三、在子页面中调用封装的方法请求数据。

2五、小程序与原生App哪一个好？

小程序除了拥有公众号的低开发成本、低获客成本低以及无需下载等优点，在服务请求延时与用户使用体验是都获得了较大幅度 的提高，使得其可以承载跟复杂的服务功能以及使用户得到更好的用户体验。

2六、webview中的页面怎么跳回小程序中？

首先要引入最新版的jweixin-x.x.x.js，而后

wx.miniProgram.navigateTo({
url: '/pages/login/login'+'$params'
})
复制代码

2七、小程序关联微信公众号如何肯定用户的惟一性？

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

2八、小程序调用后台接口遇到哪些问题？

1.数据的大小有限制，超过范围会直接致使整个小程序崩溃，除非重启小程序；

2.小程序不能够直接渲染文章内容页这类型的html文本内容，若需显示要借住插件，但插件渲染会致使页面加载变慢，因此最好在后台对文章内容的html进行过滤，后台直接处理批量替换p标签div标签为view标签，而后其它的标签让插件来作，减轻前端的时间。

2九、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'
       })
复制代码

30、微信小程序的优劣势？

优点：

一、无需下载，经过搜索和扫一扫就能够打开。

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

      三、开发成本要比App要低。

      四、安卓上能够添加到桌面，与原生App差很少。

      五、为用户提供良好的安全保障。小程序的发布，微信拥有一套严格的审查流程，不能经过审查的小程序是没法发布到线上的。
复制代码

劣势：

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

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

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

     四、依托于微信，没法开发后台管理功能。
复制代码