# 小程序常见面试题 ## 1、微信小程序有几个文件 * `WXML（WeiXin Markup Language）`是框架设计的一套标签语言，结合基础组件、事件系统，可以构建出页面的结构。内部主要是微信自己定义的一套组件 * `WXSS (WeiXin Style Sheets)`是一套样式语言，用于描述 `WXML` 的组件样式 * `js`逻辑处理，网络请求 * `json`小程序设置，如页面注册，页面标题及`tabBar` ## 2、微信小程序怎样跟事件传值 > 给 HTML 元素添加 `data-*`属性来传递我们需要的值，然后通过 `e.currentTarget.dataset` 或 `onload`的 `param`参数获取。但 `data -`名称不能有大写字母和不可以存放对象 ## 3、小程序的 wxss 和 css 有哪些不一样的地方？ * `wxss`的图片引入需使用外链地址 * `没有 Body`；样式可直接使用 `import` 导入 ## 4、小程序关联微信公众号如何确定用户的唯一性 使用 `wx.getUserInfo`方法 `withCredentials` 为 `true` 时 可获取 <`encryptedData`，里面有 `union_id`。后端需要进行对称解密 ## 5、微信小程序与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`中声明的变量。 ## 6、小程序的双向绑定和vue哪里不一样 小程序直接 `this.data`属性是不可以同步到视图的，必须调用： ~~~ this.setData({ // 这里设置 }) 复制代码 ~~~ ## 7、简述微信小程序原理 * 微信小程序采用 `JavaScript、WXML、WXSS` 三种技术进行开发,本质就是一个单页面应用，所有的页面渲染和事件处理，都在一个页面内进行，但又可以通过微信客户端调用原生的各种接口 * 微信的架构，是数据驱动的架构模式，它的 `UI` 和数据是分离的，所有的页面更新，都需要通过对数据的更改来实现 * 小程序分为两个部分 `webview`和 `appService` 。其中 `webview` 主要用来展现`UI ，appService` 有来处理业务逻辑、数据及接口调用。它们在两个进程中运行，通过系统层 `JSBridge` 实现通信，实现 UI 的渲染、事件的处理 ## 8、小程序的生命周期函数 * `onLoad` 页面加载时触发。一个页面只会调用一次，可以在`onLoad` 的参数中获取打开当前页面路径中的参数 * `onShow()` 页面显示/切入前台时触发 * `onReady()` 页面初次渲染完成时触发。一个页面只会调用一次，代表页面已经准备妥当，可以和视图层进行交互 * `onHide()` 页面隐藏/切入后台时触发。 如 `navigateTo` 或底部 `tab` 切换到其他页面，小程序切入后台等 * `onUnload()` 页面卸载时触发。如 `redirectTo 或 navigateBack` 到其他页面时 ## 9、哪些方法可以用来提高微信小程序的应用速度 1、提高页面加载速度 2、用户行为预测 3、减少默认 `data` 的大小 4、组件化方案 ## 10、微信小程序的优劣势 `优势` 即用即走，不用安装，省流量，省安装时间，不占用桌面 依托微信流量，天生推广传播优势 开发成本比 `App` 低 `缺点` 用户留存，即用即走是优势，也存在一些问题 入口相对传统 `App` 要深很多 限制较多,页面大小不能超过2M。不能打开超过10个层级的页面 ## 11、怎么解决小程序的异步请求问题 * 小程序支持大部分 `ES6` 语法 * 在返回成功的回调里面处理逻辑`Promise`异步 ## 12、如何实现下拉刷新 首先在全局 `config` 中的 `window`配置 `enablePullDownRefresh` ，在 `Page` 中定义`onPullDownRefresh` 钩子函数,到达下拉刷新条件后，该钩子函数执行，发起请求方法 请求返回后，调用`wx.stopPullDownRefresh`停止下拉刷新 ## 13、bindtap和catchtap的区别是什么 相同点：首先他们都是作为点击事件函数，就是点击时触发。在这个作用上他们是一样的，可以不做区分 不同点：他们的不同点主要是`bindtap`是不会阻止冒泡事件的，`catchtap`是阻值冒泡的 ## 14、小程序页面间有哪些传递数据的方法 1、使用全局变量实现数据传递。在 `app.js` 文件中定义全局变量 `globalData`， 将需要存储的信息存放在里面 2、使用 `wx.navigateTo`与 `wx.redirectTo` 的时候，可以将部分数据放在 `url` 里面，并在新页面`onLoad`的时候初始化 3、使用本地缓存`Storage` 相关 ## 15、小程序wxml与标准的html的异同？ `相同：` * 都是用来描述页面的结构； * 都由标签、属性等构成； `不同：` * 标签名字不一样，且小程序标签更少，单一标签更多； * 多了一些`wx:if` 这样的属性以及 `{{ }}`这样的表达式 * WXML仅能在微信小程序开发者工具中预览，而`HTML`可以在浏览器内预览； * 组件封装不同， `WXML`对组件进行了重新封装， * 小程序运行在`JS Core`内，没有`DOM树`和`window`对象，小程序中无法使用`window`对象和`document`对象。 ## 16、小程序简单介绍下三种事件对象的属性列表？ 基础事件（BaseEvent） * `type:`事件类型 * `timeStamp：`事件生成时的时间戳 * `target：`触发事件的组件的属性值集合 * `currentTarget：`当前组件的一些属性集合 自定义事件（CustomEvent） * `detail` 触摸事件（TouchEvent） * `touches` * `changedTouches` ## 17、小程序对wx:if 和 hidden使用的理解？ * `wx:if`有更高的切换消耗。 * `hidden` 有更高的初始渲染消耗。 * 因此，如果需要频繁切换的情景下，用 `hidden` 更好，如果在运行时条件不大可能改变则`wx:if` 较好。 ## 18、微信小程序与H5的区别？ * 运行环境的不同 传统的`HTML5`的运行环境是浏览器，包括`webview`，而微信小程序的运行环境并非完整的浏览器，是微信开发团队基于浏览器内核完全重构的一个内置解析器，针对小程序专门做了优化，配合自己定义的开发语言标准，提升了小程序的性能。 * 开发成本的不同 只在微信中运行，所以不用再去顾虑浏览器兼容性，不用担心生产环境中出现不可预料的奇妙`BUG` * 获取系统级权限的不同 ## 19、app.json 是对当前小程序的全局配置，讲述三个配置各个项的含义？ * ```pages字段`` —— 用于描述当前小程序所有页面路径，这是为了让微信客户端知道当前你的小程序页面定义在哪个目录。 * `window字段` —— 小程序所有页面的顶部背景颜色，文字颜色定义在这里的 * `tab字段`—小程序全局顶部或底部`tab` ## 20、小程序onPageScroll方法的使用注意什么？ 由于此方法调用频繁，不需要时，可以去掉，不要保留空方法，并且使用`onPageScroll`时，尽量避免使用`setData()`，尽量减少`setData()`的使用频次。 ## 21、小程序视图渲染结束回调？ 使用`setData(data, callback)`，在`callback`回调方法中添加后续操作代码 ## 22、小程序同步API和异步API使用时注意事项？ `wx.setStorageSync`是以Sync结尾的API为同步API，使用时使用`try-catch`来查看异常，如果判定API为异步，可以在其回调方法`success、fail、complete`中进行下一步操作。 ## 23、简述下 `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()：`关闭所有页面，打开到应用内的某个页面 ## 24、如何封装微信小程序的数据请求的？ 1、将所有的接口放在统一的js文件中并导出。 2、在`app.js`中创建封装请求数据的方法。 3、在子页面中调用封装的方法请求数据。 ## 25、小程序与原生App哪个好？ 小程序除了拥有公众号的低开发成本、低获客成本低以及无需下载等优势，在服务请求延时与用户使用体验是都得到了较大幅度 的提升，使得其能够承载跟复杂的服务功能以及使用户获得更好的用户体验。 ## 26、`webview`中的页面怎么跳回小程序中？ 首先要引入最新版的`jweixin-x.x.x.js`，然后 ~~~ wx.miniProgram.navigateTo({ url: '/pages/login/login'+'$params' }) ~~~ ## 27、小程序关联微信公众号如何确定用户的唯一性？ 使用`wx.getUserInfo`方法`withCredentials`为 `true`时 可获取`encryptedData`，里面有`union_id`。后端需要进行对称解密。 ## 28、小程序调用后台接口遇到哪些问题？ 1.数据的大小有限制，超过范围会直接导致整个小程序崩溃，除非重启小程序； 2.小程序不可以直接渲染文章内容页这类型的`html`文本内容，若需显示要借住插件，但插件渲染会导致页面加载变慢，所以最好在后台对文章内容的`html`进行过滤，后台直接处理批量替换`p`标签`div`标签为`view`标签，然后其它的标签让插件来做，减轻前端的时间。 ## 29、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、微信小程序的优劣势？ `优势：` ~~~ 1、无需下载，通过搜索和扫一扫就可以打开。 2、良好的用户体验：打开速度快。 3、开发成本要比App要低。 4、安卓上可以添加到桌面，与原生App差不多。 5、为用户提供良好的安全保障。小程序的发布，微信拥有一套严格的审查流程，不能通过审查的小程序是无法发布到线上的。 ~~~ `劣势：` ~~~ 1、限制较多。页面大小不能超过1M。不能打开超过5个层级的页面。 2、样式单一。小程序的部分组件已经是成型的了，样式不可以修改。例如：幻灯片、导航。 3、推广面窄，不能分享朋友圈，只能通过分享给朋友，附近小程序推广。其中附近小程序也受到微信的限制。 4、依托于微信，无法开发后台管理功能。 ~~~