微信小程序常見(jiàn)的面試題目和基礎(chǔ)知識(shí)點(diǎn)

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

1、簡(jiǎn)單描述下微信?程序的相關(guān)?件類(lèi)型？

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

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

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

最后就是wxss
看過(guò)上面的小伙伴相信可以猜出他是做什么的，對(duì)！沒(méi)錯(cuò)。他類(lèi)似于css，是用來(lái)改變wxml頁(yè)面樣式的，可以美化頁(yè)面，對(duì)你的頁(yè)面進(jìn)行裝扮，讓你的頁(yè)面變得更加的漂亮，增加用戶(hù)體驗(yàn)。

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

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

api.js用于管理接口

module.exports = {
  "swipe": "/liukaige/banner/list", //輪播圖
  "classify":"/liukaige/shop/goods/category/all",//分類(lèi)
  "bargain":"/liukaige/shop/goods/list",//砍價(jià)
  "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: {
        //設(shè)置響應(yīng)頭
        "Content-Type": "application/x-www-form-urlencoded",
      },
      success: resolve,
      fail: reject,
    });
  });
};

http.js封裝接口完成，頁(yè)面調(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){ //首頁(yè)通知
    return fetchGet(api.notice, params);
  },

}

接下來(lái)還需要在app.js全局設(shè)置一下

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

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

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

      })
    })

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

1.給HTML元素添加data-*屬性來(lái)傳遞我們需要的值，然后通過(guò) e.currentTarget.dataset。但data-名稱(chēng)不能有?寫(xiě)字?和不可以存放對(duì)象

2.wx.setStorageSync wx.getStorageSync

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

4、你使?過(guò)哪些?法，來(lái)提?微信?程序的應(yīng)?速度

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

2.?戶(hù)?為預(yù)測(cè)

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

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

? 優(yōu)勢(shì)：

? 1.?需下載，通過(guò)搜索和掃?掃就可以打開(kāi)。

? 2.良好的?戶(hù)體驗(yàn)：打開(kāi)速度快。

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

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

? 5.微信擁有?套嚴(yán)格的審查流程,不經(jīng)過(guò)審查無(wú)法發(fā)布上線(xiàn)

? 劣勢(shì)：

? 1.限制較多。????不能超過(guò)1M。不能打開(kāi)超過(guò)5個(gè)層級(jí)的??。

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

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

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

6、簡(jiǎn)述微信?程序原理？

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

運(yùn)行過(guò)程：

? ?戶(hù)點(diǎn)擊打開(kāi)?個(gè)?程序微信 ，首先加載分析 app.json 得到應(yīng)?程序的配置信息，加載并運(yùn)? app.js加載并 顯示在 app.json ?配置的第?個(gè)??

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

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

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

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

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

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

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

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

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

? 4.navigateBack (應(yīng)用在目標(biāo)頁(yè)面， delta值為1、 表示跳轉(zhuǎn)上一頁(yè)，2、表示跳轉(zhuǎn)兩級(jí))

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

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

微信小程序的for循環(huán)的選項(xiàng)是item,下標(biāo)是index

也可以指定遍歷選項(xiàng)和下標(biāo)的別名，

遍歷選項(xiàng)：wx:for-item=“xxx”

遍歷下標(biāo)：wx:for-index=“yyy”

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

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

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

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

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

? 原理：在小程序啟動(dòng)時(shí)，默認(rèn)會(huì)下載主包并啟動(dòng)主包內(nèi)頁(yè)面，如果用戶(hù)需要打開(kāi)分包內(nèi)某個(gè)頁(yè)面，客戶(hù)端會(huì) 把對(duì)應(yīng)分包下載下來(lái)，下載完成后再進(jìn)行展示。

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

? 1、wx.navigateTo?法打開(kāi)?? ?個(gè)應(yīng)?同時(shí)只能打開(kāi)5個(gè)??，請(qǐng)避免多層級(jí)的

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

? 2、tabBar設(shè)置不顯示tabBar的數(shù)量少于2項(xiàng)或超過(guò)5項(xiàng)都不會(huì)顯示

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

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

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

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

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

? web-view 組件是一個(gè)可以用來(lái)承載網(wǎng)頁(yè)的容器，會(huì)自動(dòng)鋪滿(mǎn)整個(gè)小程序頁(yè)面；

? 在wxml頁(yè)面可以設(shè)置src

?

? 在js使用navigateTo

? wx.navigateTo({

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

? success: function () {

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

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

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

? })

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

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

? 引入微信小程序庫(kù)

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

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

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

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

? 2、onShow()??顯示/切換前臺(tái)時(shí)觸發(fā)，?般?來(lái)發(fā)送數(shù)據(jù)請(qǐng)求

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

? ?交互

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

? 臺(tái)等

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

15、?程序???命周期

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

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

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

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

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

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

7. onPullDownRefresh:監(jiān)聽(tīng)?戶(hù)下拉動(dòng)作

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

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

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

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

12. onTabItemTap:當(dāng)前是 tab ?時(shí)，點(diǎn)擊 tab 時(shí)觸發(fā)

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

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

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

17、?程序?定義tabBar

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

在里面可以設(shè)置自定義樣式

? 例子：

? text：Tabbar項(xiàng)的標(biāo)題

? iconPath：Tabbar項(xiàng)的icon圖片路徑

? selectedIconPath：Tabbar項(xiàng)選中時(shí)的icon

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

?

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

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

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

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

1、view
代替原來(lái)的 div 標(biāo)簽
2、text
1.?本標(biāo)簽
2.只能嵌套text
3.?按?字可以復(fù)制（只有該標(biāo)簽有這個(gè)功能）
4.可以對(duì)空格回?進(jìn)?編碼
3、image
1.圖?標(biāo)簽，image組件默認(rèn)寬度320px、?度240px
2.?持懶加載
4、swiper
1.輪播圖外層容器 swiper
2.每一個(gè)輪播項(xiàng) swiper-item
3、swiper標(biāo)簽 存在默認(rèn)樣式

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

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

1.input、textear層及比較高

要使用cover-view,不能漸變背景，可以使用漸變背景圖 web-view 自動(dòng)鋪滿(mǎn)整個(gè)小程序頁(yè)面

2.text-indent 對(duì) input 標(biāo)簽和 text 標(biāo)簽 失效

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

text可以直接打空格

3.添加邊框border時(shí)有可能不會(huì)生效

有可能是因?yàn)閎order設(shè)置的是奇數(shù)，只需要把奇數(shù)設(shè)置成偶數(shù)即可

21、本地存儲(chǔ)的幾種方式

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

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

3.wx.getStorageSync(); 獲取值

4.wx.getStorageInfoSync(); 獲取當(dāng)前存儲(chǔ)中所有的 key

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

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

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