微信小程序常見的面試題目和基礎知識點

題目概述
一、簡單描述下微信?程序的相關?件類型
二、封裝微信?程序的數(shù)據(jù)請求的
三、微信?程序中有哪些參數(shù)傳值的?法
四、你使?過哪些?法，來提?微信?程序的應?速度
五、分析下微信?程序的優(yōu)劣勢
六、簡述微信?程序原理
七、微信?程序與H5的區(qū)別
八、簡述 wx.navigateTo(),wx.redirectTo(),wx.switchTab(),wx.navigateBack(),wx.reLaunch()
九、微信小程序的for循環(huán)
十、?程序的雙向綁定和vue哪?不?樣
十一、如何分包加載？分包加載的優(yōu)勢在哪？
十二、在你開發(fā)?程序的過程中遇到過什么坑？ 你是怎么解決的？
十三、?程序與webview之間的跳轉(zhuǎn)
十四、?程序的?命周期函數(shù)
十五、?程序???命周期
十六、?程序授權(quán)登錄流程
十七、?程序?定義tabBar
十八、?程序??，以及如何分包
十九、?程序有哪些組件可以實現(xiàn)什么功能
二十、?程序兼容問題（開發(fā)中遇到的問題）
二十一、本地存儲的幾種方式

1、簡單描述下微信?程序的相關?件類型？

微信小程序文件類型一般由4個文件組成分別為js、json、wxml、wxss
這里先簡單說一下js
js一般是用于邏輯交互的，例如點擊事件，獲取數(shù)據(jù)等都要在js里進行

接下來介紹一下json
JSON 是一種數(shù)據(jù)格式，并不是編程語言，在小程序中，JSON扮演的靜態(tài)配置的角色。
在json里面可以設置頁面路徑、界面表現(xiàn)、網(wǎng)絡超時時間、底部 tab 等。

然后就是wxml
網(wǎng)頁編程一般采用的是html、css、和js，微信小程序里面的wxml類似于html，他是由屬性、標簽等組成的。但他和html里面標簽并不是完全一樣的比如：view、text標簽

最后就是wxss
看過上面的小伙伴相信可以猜出他是做什么的，對！沒錯。他類似于css，是用來改變wxml頁面樣式的，可以美化頁面，對你的頁面進行裝扮，讓你的頁面變得更加的漂亮，增加用戶體驗。

2、封裝微信?程序的數(shù)據(jù)請求

獲取接口數(shù)據(jù)的時候需要在 生命周期函數(shù)–監(jiān)聽頁面加載 中獲取，
每獲取一次都要寫大量的代碼，在這里我對接口進行了簡單的封裝，可以 減少很多的代碼量，希望會多大家有幫助。
我是習慣創(chuàng)建一個request文件夾在里面寫三個js文件，分別是api.js、fetch.js、http.js、

api.js用于管理接口

module.exports = {
  "swipe": "/liukaige/banner/list", //輪播圖
  "classify":"/liukaige/shop/goods/category/all",//分類
  "bargain":"/liukaige/shop/goods/list",//砍價
  "particulars":"/liukaige/shop/goods/detail",//詳情
}

fetch.js用于封裝http

//封裝 http
module.exports = (url, path, method, params) => {
  return new Promise((resolve, reject) => {
    wx.request({
      url: `${url}${path}`,
      method: method,
      data: Object.assign({}, params),
      header: {
        //設置響應頭
        "Content-Type": "application/x-www-form-urlencoded",
      },
      success: resolve,
      fail: reject,
    });
  });
};

http.js封裝接口完成，頁面調(diào)用即可

//引入api.js和fetch.js
const api = require('./api.js')
const fetch = require('./fetch.js');


let baseUrl = 'https://api.it120.cc';

function fetchGet(path, params) {
  return fetch(baseUrl, path, 'get', params);
}

function fetchPost(path, params) {
  return fetch(baseUrl, path, 'post', params);
}


module.exports = {
  swipe(params) {  //輪播圖
    return fetchGet(api.swipe, params);
  },
  notice(params){ //首頁通知
    return fetchGet(api.notice, params);
  },

}

接下來還需要在app.js全局設置一下

const http=require('./request/http')
	App({
  		http, // http.fetch
		})

封裝完成那么如何在js文件里調(diào)用渲染數(shù)據(jù)

	//引入全局設置
	const app = getApp();
    //調(diào)用封裝好的借口
    app.http.classify().then((res) => {
     this.setData({
        classify: res.data.data

      })
    })

3、微信?程序中有哪些參數(shù)傳值的?法？

1.給HTML元素添加data-*屬性來傳遞我們需要的值，然后通過 e.currentTarget.dataset。但data-名稱不能有?寫字?和不可以存放對象

2.wx.setStorageSync wx.getStorageSync

3.在navigator中添加參數(shù)傳值，然后在跳轉(zhuǎn)的??使?onload的param參數(shù)獲取

4、你使?過哪些?法，來提?微信?程序的應?速度

1.壓縮靜態(tài)?件，使?精靈圖，路由分包)

2.?戶?為預測

3.減少默認data的??,在不操作視圖的時候，使?this.data.n=10這種賦值?式 代替this.setData({n:10})

5.分析下微信?程序的優(yōu)劣勢？

? 優(yōu)勢：

? 1.?需下載，通過搜索和掃?掃就可以打開。

? 2.良好的?戶體驗：打開速度快。

? 3.開發(fā)成本要?App要低。

? 4.安卓上可以添加到桌?，與原?App差不多。

? 5.微信擁有?套嚴格的審查流程,不經(jīng)過審查無法發(fā)布上線

? 劣勢：

? 1.限制較多。????不能超過1M。不能打開超過5個層級的??。

? 2.樣式單?。?程序的部分組件已經(jīng)是成型的了，樣式不可以修改。例如：幻燈?、導航。

? 3.推??窄，不能分享朋友圈，只能通過分享給朋友，附近?程序推?。其中附近 ?程序也受到微信的限制。

? 4.依托于微信，?法開發(fā)后臺管理功能。

6、簡述微信?程序原理？

微信 App ?包含 javascript 運?引擎。微信 App ?包含了 WXML/WXSS 處理引擎。最終會把界?翻譯成系統(tǒng)原?的界?

運行過程：

? ?戶點擊打開?個?程序微信 ，首先加載分析 app.json 得到應?程序的配置信息，加載并運? app.js加載并 顯示在 app.json ?配置的第?個??

7、微信?程序與H5的區(qū)別？

? 1.運?環(huán)境的不同

? 2.開發(fā)成本的不同

? 3.獲取系統(tǒng)級權(quán)限的不同

? 4.應?在?產(chǎn)環(huán)境的運?流暢度

8、簡述下wx.navigateTo(), wx.redirectTo(), wx.switchTab(), wx.navigateBack(), wx.reLaunch()的區(qū)別？

? 1.navigateTo （有返回鍵，不可以跳轉(zhuǎn)到tabBar頁面）

? 2.redirectTo ( 只可以跳轉(zhuǎn)tabBar 頁面， 沒有返回，但有首頁按鈕)

? 3.switchTab （沒有返回鍵，只能跳轉(zhuǎn)到tabBar頁面，不可以攜帶參數(shù)）

? 4.navigateBack (應用在目標頁面， delta值為1、 表示跳轉(zhuǎn)上一頁，2、表示跳轉(zhuǎn)兩級)

? 5.reLaunch (跳轉(zhuǎn)任意頁面， 沒有返回， 有 首頁 按鈕)

9、微信小程序的for循環(huán)

微信小程序的for循環(huán)的選項是item,下標是index

也可以指定遍歷選項和下標的別名，

遍歷選項：wx:for-item=“xxx”

遍歷下標：wx:for-index=“yyy”

10、?程序的雙向綁定和vue哪?不?樣？

?程序直接this.data的屬性是不可以同步到視圖的，必須調(diào)?this.setData({})

11、如何分包加載？分包加載的優(yōu)勢在哪？

? 舉例：創(chuàng)建多個文件夾，每個文件夾內(nèi)存放不同的文件，比如創(chuàng)建 packageA、packageB、pages文件夾。 在他們下面可以設置其他文件夾，他們可以設置root路徑name名字。一般來說pages為主包

? 優(yōu)勢：微信限制了代碼包不能超過 2MB限制了小程序功能的擴展，小程序業(yè)務的發(fā)展可能需要更大的體積。 于是就有一種方法可以解決那就是分包，分包后整個小程序可以達到8MB，提升了加載速度，減少內(nèi) 存。

? 原理：在小程序啟動時，默認會下載主包并啟動主包內(nèi)頁面，如果用戶需要打開分包內(nèi)某個頁面，客戶端會 把對應分包下載下來，下載完成后再進行展示。

12、在你開發(fā)?程序的過程中遇到過什么坑？ 你是怎么解決的？

? 1、wx.navigateTo?法打開?? ?個應?同時只能打開5個??，請避免多層級的

? 交互?式，或使?wx.redirectTo

? 2、tabBar設置不顯示tabBar的數(shù)量少于2項或超過5項都不會顯示

? 3、微信小程序中的背景圖不顯示

? 解決方案 1.用在線圖片轉(zhuǎn)base64碼的方法

? 2.將圖片上傳至服務器，引用圖片地址就可以了

13、?程序與webview之間的跳轉(zhuǎn)

? 1、小程序跳轉(zhuǎn)到webview使用web-view標簽

? web-view 組件是一個可以用來承載網(wǎng)頁的容器，會自動鋪滿整個小程序頁面；

? 在wxml頁面可以設置src

?

? 在js使用navigateTo

? wx.navigateTo({

? url: ‘…/out/out’, //

? success: function () {

? }, *//*成功后的回調(diào)；

? fail: function () { }, *//*失敗后的回調(diào)；

? complete: function () { } //結(jié)束后的回調(diào)(成功，失敗都會執(zhí)行)

? })

? 注：?程序跳轉(zhuǎn)webview 必須要在?程序后臺使?管理員添加業(yè)務域名

? 2、webview跳轉(zhuǎn)?程序

? 引入微信小程序庫

? wx.miniProgram.navigateTo({url:’pages/login/login’+’$params’})

? wx.miniProgram.switchTab({url:’/pages/index/index’})

14、?程序的?命周期函數(shù)？

? 1、onLoad()??加載時觸發(fā)，只會調(diào)??次，可獲取當前??路徑中的參數(shù)

? 2、onShow()??顯示/切換前臺時觸發(fā)，?般?來發(fā)送數(shù)據(jù)請求

? 3、onReady()??初次渲染完成時觸發(fā)，只會調(diào)??次，代表??已可和視圖層進

? ?交互

? 4、onHide()??隱藏/切?后臺時觸發(fā)，如底部tab切換到其他??或?程序切?后

? 臺等

? 5、onUnload()??卸載時觸發(fā)，如redirectTo或navigateBack到其他??時。

15、?程序???命周期

? 1. data：??的初始數(shù)據(jù)

2. onLoad：?命周期回調(diào)—監(jiān)聽??加載

3. onShow：?命周期回調(diào)—監(jiān)聽??顯示;

4. onReady：?命周期回調(diào)—監(jiān)聽??初次渲染完成

5. onHide：?命周期回調(diào)—監(jiān)聽??隱藏

6. onUnload:?命周期回調(diào)—監(jiān)聽??卸載

7. onPullDownRefresh:監(jiān)聽?戶下拉動作

8. onReachBottom:??上拉觸底事件的處理函數(shù)

9. onShareAppMessage:?戶點擊右上?轉(zhuǎn)發(fā)

10. onPageScroll:??滾動觸發(fā)事件的處理函數(shù)

11. onResize:??尺?改變時觸發(fā)，詳? 響應顯示區(qū)域變化

12. onTabItemTap:當前是 tab ?時，點擊 tab 時觸發(fā)

16、?程序授權(quán)登錄流程

? 1.登陸只需發(fā)送code到后臺，后臺獲取openid，根據(jù)openid到數(shù)據(jù)庫中查找用戶信息，若有則返回用戶信息，若沒有 將該openid插入數(shù)據(jù)庫。

2. 后臺生成token，返回前臺token，和用戶信息
3. 前臺判斷用戶信息是否包含用戶名稱，用戶城市等信息，若包含則登陸成功
4. 若不包含，則調(diào)用 wx.getUserInfo，發(fā)送encryptedData，iv，token到后臺，后臺根據(jù)token找到用戶openid解密encryptedData和iv獲取用戶其他信息
5. 然后更新數(shù)據(jù)庫，并返回用戶信息

17、?程序?定義tabBar

一般設置tabbar需要在全局app.json里面配置。

在里面可以設置自定義樣式

? 例子：

? text：Tabbar項的標題

? iconPath：Tabbar項的icon圖片路徑

? selectedIconPath：Tabbar項選中時的icon

? badge：是否顯示Tabbar的右上角的Badge

?

18、?程序??，以及如何分包

單包不大于2M，整體不大于16M

創(chuàng)建多個文件夾，每個文件夾內(nèi)存放不同的文件，比如創(chuàng)建 packageA、packageB、pages文件夾。在他們下面可以設置其他文件夾，他們可以設置root路徑name名字。一般來說pages為主包

19、?程序有哪些組件可以實現(xiàn)什么功能

1、view
代替原來的 div 標簽
2、text
1.?本標簽
2.只能嵌套text
3.?按?字可以復制（只有該標簽有這個功能）
4.可以對空格回?進?編碼
3、image
1.圖?標簽，image組件默認寬度320px、?度240px
2.?持懶加載
4、swiper
1.輪播圖外層容器 swiper
2.每一個輪播項 swiper-item
3、swiper標簽 存在默認樣式

? 1.width 100%
? 2 .height 150px image 存在默認寬度和高度 320 * 240
? 3 .swiper 高度 無法實現(xiàn)由內(nèi)容撐開
5、swiper的常用屬性：
? autoplay 自動輪播
? interval 修改輪播時間
? circular 銜接輪播
? indicator-dots 顯示 指示器 分頁器 索引器
? indicator-color 指示器的未選擇的顏色
? indicator-active-color 選中的時候的指示器的顏色

20、?程序兼容問題（開發(fā)中遇到的問題）

1.input、textear層及比較高

要使用cover-view,不能漸變背景，可以使用漸變背景圖 web-view 自動鋪滿整個小程序頁面

2.text-indent 對 input 標簽和 text 標簽 失效

input 可以用placeholder-class 實現(xiàn)

text可以直接打空格

3.添加邊框border時有可能不會生效

有可能是因為border設置的是奇數(shù)，只需要把奇數(shù)設置成偶數(shù)即可

21、本地存儲的幾種方式

1.wx.setStorageSync(); 用于存儲

2.wx.removeStorageSync(); 刪除指定的值

3.wx.getStorageSync(); 獲取值

4.wx.getStorageInfoSync(); 獲取當前存儲中所有的 key

5.wx.clearStorageSync(); 清除所有的key

? 以上都是同步的存儲，異步存儲和同步存儲方法一樣，在這里就大致列舉一下

? （1）wx.setStorage(); //存儲值
? （2）wx.removeStorage(); // 移除指定的值
? （3）wx.getStorage(); // 獲取值
? （4）wx.getStorageInfo(); // 獲取當前 storage 中所有的 key
? （5）wx.clearStorage(); // 清除所有的key