1、簡述微信小程序的相關(guān)文件類型？

• WXML 搭建頁面的結(jié)構(gòu)
• WXSS 頁面樣式文件
• js 邏輯處理，網(wǎng)絡(luò)請求
• json 配置當(dāng)前頁面標(biāo)題和引入組件等
• app.js 可以在里邊監(jiān)聽生命周期函數(shù)、聲明全局變量
• app.json 小程序的全局配置（頁面路徑、網(wǎng)絡(luò)超時時間、底部tabBar 、導(dǎo)航背景顏色等）

2、簡述一下小程序的開發(fā)流程？

注冊微信小程序賬號
獲取微信小程序的 AppID
下載微信小程序開發(fā)者工具
創(chuàng)建demo項目
去微信公眾平臺配置域名
手機預(yù)覽
代碼上傳
提交審核
小程序發(fā)布

3、你是怎么封裝小程序的數(shù)據(jù)信息要求的？

• 在根目錄下創(chuàng)建utils目錄及api.js文件和apiConfig.js文件；
• 在apiConfig.js 封裝基礎(chǔ)的get, post 和 put， upload等請求方法，設(shè)置請求體，帶上token和異常處理等；
• 在api中引入apiConfig.js封裝好的請求方法，根據(jù)頁面數(shù)據(jù)請求的urls, 設(shè)置對應(yīng)的方法并導(dǎo)出；
• 在具體的頁面中導(dǎo)入；

4、小程序頁面間有哪些傳遞數(shù)據(jù)的方法？

• 給html元素添加data-*屬性來傳遞值，然后通過e.currentTarget.dataset或onload的params參數(shù)獲取。注：data-屬性的名稱不能有大寫字母、不可以存放對象
• 設(shè)置id的方法標(biāo)識來傳值，通過e.currentTarget.id獲取設(shè)置的id的值，然后通過設(shè)置全局對象的方式來傳遞數(shù)值
• 在navigator中添加參數(shù)數(shù)值

5、哪些方法可以提高微信小程序的應(yīng)用速度？

1. 提高頁面加載速度(壓縮靜態(tài)?件，使?精靈圖，路由分包)
2. 用戶行為預(yù)測 # 什么叫行為預(yù)測
3. 減少默認(rèn)data的大小（在不操作視圖的時候，使?this.data.變量這種?式 代替this.setData({})
4. 組件化方案 # 使用

6、分析下微信小程序的優(yōu)劣勢？

優(yōu)點：

• 無需下載，通過搜索和掃一掃就可以打開。
• 良好的用戶體驗：打開速度快。
• 開發(fā)成本要比App要低。
• 安卓上可以添加到桌面，與原生App差不多。
• 為用戶提供良好的安全保障。小程序的發(fā)布，微信擁有一套嚴(yán)格的審查流程， 不能通過審查的小程序是無法發(fā)布到線上的。

缺點：

• 限制較多。頁面大小不能超過1M。不能打開超過5個層級的頁面。
• 樣式單一。小程序的部分組件已經(jīng)是成型的了，樣式不可以修改。
• 推廣面窄，不能分享朋友圈，只能通過分享給朋友，附近小程序推廣。其中附近小程序也受到微信的限制。
• 依托于微信，無法開發(fā)后臺管理功能。

7、簡述微信小程序原理？

• 微信小程序采用JavaScript、wxml、wxss三種技術(shù)進(jìn)行開發(fā)，與現(xiàn)有前端開發(fā)的區(qū)別：
  • JavaScript的代碼是運行在微信APP中的，因此一些h5技術(shù)的應(yīng)用需要微信APP提供對應(yīng)的API支持；
  • wxml微信自己基于xml語法開發(fā)的，因此在開發(fā)時只能使用微信提供的現(xiàn)有標(biāo)簽，html的標(biāo)簽是無法使用的；
  • wxss具有css的大部分特性，但并不是所有都支持沒有詳細(xì)文檔（wxss的圖片引入需使用外鏈地址，沒有body，樣式可直接使用import導(dǎo)入）。
• 微信的架構(gòu)，是數(shù)據(jù)驅(qū)動的架構(gòu)模式，它的UI和數(shù)據(jù)是分離的，所有的頁面更新，都需要通過對數(shù)據(jù)的更改來實現(xiàn)。
• 小程序功能分為webview和APPservice，webview主要用來展示UI，appservice用來處理業(yè)務(wù)邏輯、數(shù)據(jù)及接口調(diào)用。它們在兩個進(jìn)程中進(jìn)行，通過系統(tǒng)層JSBridge實現(xiàn)通信，實現(xiàn)UI的渲染、事件處理。

8、微信小程序與H5的區(qū)別？

• 運行環(huán)境不同（小程序在微信運行，h5在瀏覽器運行）；
• 開發(fā)成本不同（h5需要兼容不同的瀏覽器）；
• 獲取系統(tǒng)權(quán)限不同（系統(tǒng)級權(quán)限可以和小程序無縫銜接）；
• 應(yīng)用在生產(chǎn)環(huán)境的運行流暢度（h5需不斷對項目優(yōu)化來提高用戶體驗）；

9、有哪幾種方式可以跳轉(zhuǎn)頁面？

navigateTo: 保留當(dāng)前頁面，跳轉(zhuǎn)到應(yīng)用內(nèi)的某個頁面。
navigateBack：關(guān)閉當(dāng)前頁面，返回上一頁面或多級頁面。
redirectTo ：關(guān)閉當(dāng)前頁面，跳轉(zhuǎn)到應(yīng)用內(nèi)的某個頁面。但是不允許跳轉(zhuǎn)到 tabbar 頁面。
switchTab：跳轉(zhuǎn)到 tabBar 頁面，并關(guān)閉其他所有非 tabBar 頁面。
reLaunch： 關(guān)閉所有頁面，打開到應(yīng)用內(nèi)的某個頁面。

10、小程序里邊的雙向綁定和vue的雙向綁定有什么區(qū)別？

1. 首先利用bindinput來觸發(fā)改變input輸入框中的值
2. 使用data-name來獲取改變的數(shù)據(jù)的內(nèi)容
3. bindinput觸發(fā)后在方法中通過e.currentTarget.dataset.name來獲取改變后的內(nèi)容‘
4. 通過this.setData()來改變data-name綁定的參數(shù)就好了

//data-name綁定的值就是value的值，這樣才能隨時更新到value中
<input type="text" bindinput="inputEdit" data-name="inputValue" placeholder="姓名" value="{{inputValue}}">

在index.js中:

Page({
    data:{
        inputValue:'測試數(shù)據(jù)雙向綁定',
    },
   inputEdit(e){
   //data-開頭的是自定義屬性，可以通過dataset獲取到dataset是一個json對象。
    //通過事件參數(shù)獲取input所對應(yīng)的全局屬性名
   var inputModel = e.currentTarget.dataset.name;
      //通過value獲取當(dāng)前用戶輸入的內(nèi)容
   var value = e.detail.value;
//將input所對應(yīng)的全局屬性的屬性只更新
	this.data[inputModel] = value;   
這個時候也就是說`data-name` 的值更新了,這里就是通過bindInput記錄的value改變的值，存起來
	this. setData({
         inputValue:this.data[inputModel] 
   });
  }
})

11、什么是分包加載？如何使用分包加載？

什么是分包加載：
在小程序開發(fā)的過程中，小程序的體積會隨著版本變的越來越大，我們可以將小程序分成多個包從服務(wù)器下載，優(yōu)化首次啟動加載時間以及后續(xù)按需加載的實現(xiàn)。


如何使用分包加載：

1、在app.json中配置項目分包結(jié)構(gòu)（結(jié)構(gòu)如上圖）
2、配置subpackages后，將按subpackages配置的路徑進(jìn)行打包，沒有配置的都會分到主包。所以一定要配置好路徑，避免主包超過限制報錯
3、tabBar必須放在主包
4、分包之間不能引用，只能require app.js和自身的js
5、配置完分包之后檢查主包配置的路徑有沒有包含分包的，有的話要去掉

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

1. wx.navigateTo無法打開頁面
   一個應(yīng)用同時只能打開5個頁面，請避免多層級的交互方式，或使用wx.redirectTo
2. tabBar設(shè)置不顯示
   tabBar的數(shù)量少于2項或超過5項都不會顯示；
   tabBar寫法錯誤導(dǎo)致不顯示；
   tabBar沒有寫pagePath字段（程序啟動后顯示的第一個頁面）
3. 本地資源無法通過wxss獲取
   background-image：可以使用網(wǎng)絡(luò)圖片，或者base64，或者使用標(biāo)簽

13、小程序與webview之間是怎么跳轉(zhuǎn)的？

• 小程序跳轉(zhuǎn)到webview

需要用到web-view標(biāo)簽然后通過web-view標(biāo)簽里的src屬性跳轉(zhuǎn)到webview頁面
小程序跳轉(zhuǎn)webview必須要在小程序后臺使用管理用戶添加業(yè)務(wù)域名

• webview跳轉(zhuǎn)到小程序

首先需要引入微信小程序庫，然后使用wx. miniprogram.navigateTo()來跳轉(zhuǎn)到小程序的頁面，
跳轉(zhuǎn)tabbar頁面可以使用wx. miniprogram.switchTab()來跳轉(zhuǎn)到tabbar頁面

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

1、onLoad()頁面加載時觸發(fā)，只會調(diào)??次，可獲取當(dāng)前??路徑中的參數(shù)
2、onShow()頁面顯示/切換前臺時觸發(fā)，?般?來發(fā)送數(shù)據(jù)請求
3、onReady()頁面初次渲染完成時觸發(fā)，只會調(diào)??次，代表頁面已和可視圖層進(jìn)?交互
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ā)
12. onTabItemTap:當(dāng)前是 tab 頁時，點擊 tab

16、如何自定義tabbar？以及如何自定義組件？

自定義tabbar：

創(chuàng)建一個custom文件夾，里面創(chuàng)建一個tabbar頁面，取消原有的tabbar頁面。需要在app.json中輸入custom:ture，然后在自定義的pages頁面中寫入《tabbar selected="{{0}}"》《/tabbar》進(jìn)行選中效果顯示

自定義組件：

1、在根目錄新建一個components文件夾，然后在這個文件夾下放置自定義的組件。
2、需要用到某個自定義組件時，就在它里面的json文件中配置 "component": true
3、然后在父組件的json文件中的usingComponents中導(dǎo)入這個組件：
{
“usingComponents”: {
“自定義組件名”:"…/…/components/路徑"
}
}

17、微信小程序和app有什么不同之處？

微信小程序?qū)儆谳p量級的app 但是限制在微信中，開發(fā)周期短，功能較少，占用空間少， app就相反 需要占用額外內(nèi)存 開發(fā)周期長

18、如何實現(xiàn)登錄數(shù)據(jù)的持久化 ?

可以通過wx.setStorageSync(‘鍵名’, 對應(yīng)的值)來進(jìn)行數(shù)據(jù)持久化

19、微信小程序如何實現(xiàn)下拉刷新？

用view代替scroll-view，設(shè)置onPullDownRefresh函數(shù)實現(xiàn)

20、怎么解決微信小程序的異步請求問題？

• 小程序支持 ES6 語法 在返回成功的回調(diào)里面處理邏輯 Promise 異步 async/await

在回調(diào)函數(shù)中調(diào)用下一個組件的函數(shù)：

**app.js**
success:function(info){
	that.apirtnCallback(info)
}
**index.js**
onLoad:function(){
	app.apirtnCallback = res =>{
		console.log(res)
	}
}

21、小程序關(guān)聯(lián)微信公眾號如何確定用戶的唯一性？

可通過 unionid 來區(qū)分用戶的唯一性，同一用戶，對同一個微信開放平臺下的不同應(yīng)用，unionid 是相同的
使用wx.getUserInfo方法 withCredentials為true時，可獲取encryptedData，里面有union_id.后端需要進(jìn)行對稱解密。

22、使用webview直接加載要注意哪些事項？

• 必須要在小程序后臺使用管理員添加業(yè)務(wù)域名；
• h5頁面跳轉(zhuǎn)至小程序的腳步必須是1.3.1以上；
• 微信分享只可以是小程序的主名稱，如要自定義分享內(nèi)容，需小程序版本在1.7.1以上；
• h5的支付不可以是微信公眾號的appid，必須是小程序的appid，而且用戶的openid也必須是用戶和小程序的

23、小程序調(diào)用后臺接口遇到哪些問題？

1. 數(shù)據(jù)的大小限制，超過范圍會直接導(dǎo)致整個小程序崩潰，除非重啟小程序；
2. 小程序不可以直接渲染文章內(nèi)容這類型的html文本，顯示需借助插件

注：插件渲染會導(dǎo)致頁面加載變慢，建議在后臺對文章內(nèi)容的html進(jìn)行過濾，后臺直接處理批量替換p標(biāo)簽div標(biāo)簽為view標(biāo)簽。然后其他的標(biāo)簽讓插件來做

24、bindtap和catchtap的區(qū)別？

• 相同點：首先他們都是作為點擊事件函數(shù)，就是點擊時觸發(fā)。在這個作用上他們是一樣的，可以不做區(qū)分
• 不同點：他們的不同點主要是bindtap是不會阻止冒泡事件的，catchtap是阻值冒泡的

25、微信小程序如何進(jìn)行雙向綁定？

1. 通過bind-tap點擊事件 向app.js 定義的方法中獲取回執(zhí)
2. 設(shè)置data的值 實現(xiàn)雙向綁定

26、小程序授權(quán)登錄流程

1. 調(diào)用wx.login()
2. 從微信端獲取用戶信息
3. 檢測登錄狀態(tài)
4. 檢查是否授權(quán)過

用戶通過 button組件來設(shè)置的button樣式getuserinfo和規(guī)定好的點擊事件，點擊 button彈出授權(quán)窗，
如果同意授權(quán)則可以從 bindgetuserinfo回調(diào)中獲取到用戶信息最后來設(shè)置界面，只能通過點擊 button設(shè)置的opensetting的樣式來跳轉(zhuǎn)到設(shè)置界面

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

視圖容器

• view視圖容器
• scroll-view視圖容器
• swiper 可滑動的視圖容器

基礎(chǔ)內(nèi)容

• icon圖標(biāo)
• text文字
• progress進(jìn)度條

表單組件（form）

• button按鈕
• form表單
• input輸入框
• checkbox多項選擇器
• radio單項選擇器
• picker列表選擇器

28、簡單說一下微信支付環(huán)節(jié)？

• 臨時憑證 獲取 wxid
• 生成repayid
• json，返回給小程序，小程序調(diào)支付窗口。
• 支持成功提示 + POST回調(diào)。

29、微信小程序，為什么使用js閉包？

因為微信小程序處理函數(shù)是異步執(zhí)行的，異步執(zhí)行造成的結(jié)果可能和預(yù)期的不合，如果函數(shù)中有循環(huán)，最后的結(jié)果都一樣，所以使用js閉包可以解決這個問題。

30、小程序頁面間有哪些通報數(shù)據(jù)的要領(lǐng)？

• 運用全局變量完成數(shù)據(jù)通報
• 頁面跳轉(zhuǎn)或重定向時，運用url帶參數(shù)通報數(shù)據(jù)
• 運用組件模板 template通報參數(shù)
• 運用緩存通報參數(shù)
• 運用數(shù)據(jù)庫通報數(shù)據(jù)