前端面試題 -- 小程序

時間 2019-11-07

標籤端面試題程序简体版

原文原文鏈接

前言

首先說一些爲何總結小程序相關的面試題吧css

咱們能夠隨便打開一個招聘網站，在那裏你會發現市場對於小程序的需求仍是蠻高的，有些公司可能就只須要寫小程序的前端人員html

雖然小程序的開發很大一部分都是很簡單的，可是有些經常使用的東西仍是有必要了解一下的。故此，有了這樣一篇小程序面試題的總結。固然感興趣或者有須要的小夥伴也能夠點擊這裏，查看完整版前端面試題前端

若是文章中有出現紕漏、錯誤之處，還請看到的小夥伴留言指正，先行謝過vue

如下 ↓git

1. 簡單描述下微信小程序的相關文件類型

微信小程序項目結構主要有四個文件類型

WXML（WeiXin Markup Language）是框架設計的一套標籤語言，結合基礎組件、事件系統，能夠構建出頁面的結構。內部主要是微信本身定義的一套組件
WXSS (WeiXin Style Sheets)是一套樣式語言，用於描述 WXML 的組件樣式
js 邏輯處理，網絡請求
json 小程序設置，如頁面註冊，頁面標題及tabBar

主要文件

app.json 必需要有這個文件，若是沒有這個文件，項目沒法運行，由於微信框架把這個做爲配置文件入口，整個小程序的全局配置。包括頁面註冊，網絡設置，以及小程序的 window 背景色，配置導航條樣式，配置默認標題
app.js 必需要有這個文件，沒有也是會報錯！可是這個文件建立一下就行什麼都不須要寫之後咱們能夠在這個文件中監聽並處理小程序的生命週期函數、聲明全局變量
app.wxss 可選

2. 簡述微信小程序原理

微信小程序採用 JavaScript、 WXML、 WXSS 三種技術進行開發,本質就是一個單頁面應用，全部的頁面渲染和事件處理，都在一個頁面內進行，但又能夠經過微信客戶端調用原生的各類接口
微信的架構，是數據驅動的架構模式，它的 UI 和數據是分離的，全部的頁面更新，都須要經過對數據的更改來實現github

小程序分爲兩個部分 webview 和 appService 。其中 webview 主要用來展示 UI ，appService 有來處理業務邏輯、數據及接口調用。它們在兩個進程中運行，經過系統層 JSBridge 實現通訊，實現 UI 的渲染、事件的處理web

3. 小程序的雙向綁定和vue哪裏不同

小程序直接 this.data 的屬性是不能夠同步到視圖的，必須調用：面試

this.setData({
    // 這裏設置
})

4. 小程序的wxss和css有哪些不同的地方

WXSS 和 CSS 相似，不過在 CSS 的基礎上作了一些補充和修改

尺寸單位 rpx

rpx 是響應式像素,能夠根據屏幕寬度進行自適應。規定屏幕寬爲 750rpx。如在 iPhone6 上，屏幕寬度爲 375px，共有 750 個物理像素，則 750rpx = 375px = 750 物理像素json

使用 @import 標識符來導入外聯樣式。@import 後跟須要導入的外聯樣式表的相對路徑，用;表示語句結束

/** index.wxss **/
@import './base.wxss';

.container{
    color: red;
}

5. 小程序頁面間有哪些傳遞數據的方法

使用全局變量實現數據傳遞

在 app.js 文件中定義全局變量 globalData，將須要存儲的信息存放在裏面小程序

// app.js

App({
     // 全局變量
  globalData: {
    userInfo: null
  }
})

使用的時候，直接使用 getApp() 拿到存儲的信息

使用 wx.navigateTo 與 wx.redirectTo 的時候，能夠將部分數據放在 url 裏面，並在新頁面 onLoad 的時候初始化

//pageA.js

// Navigate
wx.navigateTo({
  url: '../pageD/pageD?name=raymond&gender=male',
})

// Redirect
wx.redirectTo({
  url: '../pageD/pageD?name=raymond&gender=male',
})


// pageB.js
...
Page({
  onLoad: function(option){
    console.log(option.name + 'is' + option.gender)
    this.setData({
      option: option
    })
  }
})

須要注意的問題：

wx.navigateTo 和 wx.redirectTo 不容許跳轉到 tab 所包含的頁面

onLoad 只執行一次

使用本地緩存 Storage 相關

6. 小程序的生命週期函數

onLoad 頁面加載時觸發。一個頁面只會調用一次，能夠在 onLoad 的參數中獲取打開當前頁面路徑中的參數
onShow() 頁面顯示/切入前臺時觸發
onReady() 頁面初次渲染完成時觸發。一個頁面只會調用一次，表明頁面已經準備穩當，能夠和視圖層進行交互
onHide() 頁面隱藏/切入後臺時觸發。如 navigateTo 或底部 tab 切換到其餘頁面，小程序切入後臺等
onUnload() 頁面卸載時觸發。如 redirectTo 或 navigateBack 到其餘頁面時

詳見生命週期回調函數

7. 怎麼封裝微信小程序的數據請求

參考這裏

8. 哪些方法能夠用來提升微信小程序的應用速度

一、提升頁面加載速度

二、用戶行爲預測

三、減小默認 data 的大小

四、組件化方案

9. 微信小程序的優劣勢

優點

即用即走，不用安裝，省流量，省安裝時間，不佔用桌面
依託微信流量，天生推廣傳播優點
開發成本比 App 低

缺點

用戶留存，即用即走是優點，也存在一些問題
入口相對傳統 App 要深不少
限制較多,頁面大小不能超過2M。不能打開超過10個層級的頁面

10. 怎麼解決小程序的異步請求問題

小程序支持大部分 ES6 語法

在返回成功的回調裏面處理邏輯
Promise 異步

11. 小程序關聯微信公衆號如何肯定用戶的惟一性

若是開發者擁有多個移動應用、網站應用、和公衆賬號（包括小程序），可經過 unionid 來區分用戶的惟一性，由於只要是同一個微信開放平臺賬號下的移動應用、網站應用和公衆賬號（包括小程序），用戶的 unionid 是惟一的。換句話說，同一用戶，對同一個微信開放平臺下的不一樣應用， unionid 是相同的