• 1、簡單描述下微信小程序的相關文件類型？
  • 答：微信小程序項目結構主要有四個文件類型,如下

    • 1、WXML （WeiXin Markup Language）是框架設計的一套標簽語言，結合基礎組件、事件系統(tǒng)，可以構建出頁面的結構。內部主要是微信自己定義的一套組件。

    • 2、WXSS (WeiXin Style Sheets)是一套樣式語言，用于描述 WXML 的組件樣式，

    • 3、js 邏輯處理，網絡請求

    • 4、json 小程序設置，如頁面注冊，頁面標題及tabBar。

    • 5、app.json

      • 必須要有這個文件，如果沒有這個文件，項目無法運行，因為微信框架把這個作為配置文件入口，整個小程序的全局配置。包括頁面注冊，網絡設置，以及小程序的window背景色，配置導航條樣式，配置默認標題。

    • 6、app.js

      • 必須要有這個文件，沒有也是會報錯！但是這個文件創(chuàng)建一下就行 什么都不需要寫以后我們可以在這個文件中監(jiān)聽并處理小程序的生命周期函數(shù)、聲明全局變量。

    • 7、app.wxss

• 2、你是怎么封裝微信小程序的數(shù)據(jù)請求的？

  • 1、將所有的接口放在統(tǒng)一的js文件中并導出

  • 2、在app.js中創(chuàng)建封裝請求數(shù)據(jù)的方法

  • 3、在子頁面中調用封裝的方法請求數(shù)據(jù)

image

• 3、有哪些參數(shù)傳值的方法？

  • 1、給HTML元素添加data-*屬性來傳遞我們需要的值，然后通過e.currentTarget.dataset或onload的param參數(shù)獲取。但data-名稱不能有大寫字母和不可以存放對象

  • 2、設置id 的方法標識來傳值通過e.currentTarget.id獲取設置的id的值,然后通過設置全局對象的方式來傳遞數(shù)值

  • 3、在navigator中添加參數(shù)傳值

• 4、你使用過哪些方法，來提高微信小程序的應用速度？

  • 1、提高頁面加載速度
  • 2、用戶行為預測
  • 3、減少默認data的大小
  • 4、組件化方案

• 5、小程序與原生App哪個好？

  • 小程序除了擁有公眾號的低開發(fā)成本、低獲客成本低以及無需下載等優(yōu)勢，在服務請求延時與用戶使用體驗是都得到了較大幅度 的提升，使得其能夠承載跟復雜的服務功能以及使用戶獲得更好的用戶體驗。

• 6、簡述微信小程序原理？

  • 微信小程序采用JavaScript、WXML、WXSS三種技術進行開發(fā)，從技術講和現(xiàn)有的前端開發(fā)差不多，但深入挖掘的話卻又有所不同。

  • JavaScript：首先JavaScript的代碼是運行在微信App中的，并不是運行在瀏覽器中，因此一些H5技術的應用，需要微信App提供對應的API支持，而這限制住了H5技術的應用，且其不能稱為嚴格的H5，可以稱其為偽H5，同理，微信提供的獨有的某些API，H5也不支持或支持的不是特別好。

  • WXML：WXML微信自己基于XML語法開發(fā)的，因此開發(fā)時，只能使用微信提供的現(xiàn)有標簽，HTML的標簽是無法使用的。

  • WXSS：WXSS具有CSS的大部分特性，但并不是所有的都支持，而且支持哪些，不支持哪些并沒有詳細的文檔。

  • 微信的架構，是數(shù)據(jù)驅動的架構模式，它的UI和數(shù)據(jù)是分離的，所有的頁面更新，都需要通過對數(shù)據(jù)的更改來實現(xiàn)。

  • 小程序分為兩個部分webview和appService。其中webview主要用來展現(xiàn)UI，appService有來處理業(yè)務邏輯、數(shù)據(jù)及接口調用。它們在兩個進程中運行，通過系統(tǒng)層JSBridge實現(xiàn)通信，實現(xiàn)UI的渲染、事件的處理

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

  優(yōu)勢：

  • 1、無需下載，通過搜索和掃一掃就可以打開。

  • 2、良好的用戶體驗：打開速度快。

  • 3、開發(fā)成本要比App要低。

  • 4、安卓上可以添加到桌面，與原生App差不多。

  • 5、為用戶提供良好的安全保障。小程序的發(fā)布，微信擁有一套嚴格的審查流程， 不能通過審查的小程序是無法發(fā)布到線上的。

  劣勢：

  • 1、限制較多。頁面大小不能超過1M。不能打開超過5個層級的頁面。

  • 2、樣式單一。小程序的部分組件已經是成型的了，樣式不可以修改。例如：幻燈片、導航。

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

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

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

  • 第一條是運行環(huán)境的不同

    • 傳統(tǒng)的HTML5的運行環(huán)境是瀏覽器，包括webview，而微信小程序的運行環(huán)境并非完整的瀏覽器，是微信開發(fā)團隊基于瀏覽器內核完全重構的一個內置解析器，針對小程序專門做了優(yōu)化，配合自己定義的開發(fā)語言標準，提升了小程序的性能。

  • 第二條是開發(fā)成本的不同

    • 只在微信中運行，所以不用再去顧慮瀏覽器兼容性，不用擔心生產環(huán)境中出現(xiàn)不可預料的奇妙BUG

  • 第三條是獲取系統(tǒng)級權限的不同

    • 系統(tǒng)級權限都可以和微信小程序無縫銜接

  • 第四條便是應用在生產環(huán)境的運行流暢度

    • 長久以來，當HTML5應用面對復雜的業(yè)務邏輯或者豐富的頁面交互時，它的體驗總是不盡人意，需要不斷的對項目優(yōu)化來提升用戶體驗。但是由于微信小程序運行環(huán)境獨立

• 9、怎么解決小程序的異步請求問題？

  app.js

  success: function (info) {
                 
      that.apirtnCallback(info)
  }
  

  index.js

  onLoad: function () {
      app.apirtnCallback = res => {
       console.log(res) 
      }
  ｝
  

• 10、小程序的雙向綁定和vue哪里不一樣？

  • 小程序直接this.data的屬性是不可以同步到視圖的，必須調用：

  this.setData({
      noBind:true
  })
  

• 11、小程序的wxss和css有哪些不一樣的地方？

  • 1、wxss的圖片引入需使用外鏈地址；二、沒有Body；樣式可直接使用import導入

• 12、webview中的頁面怎么跳回小程序中？

  • 答：首先要引入最新版的jweixin-1.3.2.js，然后

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

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

  • 使用wx.getUserInfo方法withCredentials為 true 時 可獲取encryptedData，里面有 union_id。后端需要進行對稱解密

• 14、如何實現(xiàn)下拉刷新？

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

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

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

• 16、小程序調用后臺接口遇到哪些問題？

  • 1、數(shù)據(jù)的大小有限制，超過范圍會直接導致整個小程序崩潰，除非重啟小程序；
  • 2、小程序不可以直接渲染文章內容頁這類型的html文本內容，若需顯示要借住插件，但插件渲染會導致頁面加載變慢，所以最好在后臺對文章內容的html進行過濾，后臺直接處理批量替換p標簽div標簽為view標簽，然后其它的標簽讓插件來做，減輕前端的時間。

• 17、webview的頁面怎么跳轉到小程序導航的頁面？

  • 小程序導航的頁面可以通過switchTab，但默認情況是不會重新加載數(shù)據(jù)的。
    若需加載新數(shù)據(jù)，則在success屬性中加入以下代碼即可：

success: function (e) {
       var page = getCurrentPages().pop();
       if (page == undefined || page == null) return;
       page.onLoad();
}

webview的頁面，則通過

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

• 18、小程序和Vue寫法的區(qū)別？

  • 1、循環(huán)遍歷的時候：小程序是wx:for="list"，而Vue是v-for="info in list"
  • 2、調用data模型的時候：小程序是this.data.uinfo，而Vue是this.uinfo；給模型賦值也不一樣，小程序是this.setData({uinfo:1})，而Vue是直接this.uinfo=1

• 19、為什么要對小程序進行組件模塊化設計

  • 1、微信小程序有代碼大小限制，通過測試最大為1M
  • 2、提高代碼的復用率

• 20、如何進行組件話模塊化設計

  • 通過WXML的import和include來使用文件模版

  • 使用WXSS的@import引用WXSS文件

  • 使用JS的require來引用JS文件

  image
  • Tips:
    • Component 構造器構造的組件也可以作為頁面使用。
    • 使用 this.data 可以獲取內部數(shù)據(jù)和屬性值，但不要直接修改它們，應使用 setData 修改。
    • 生命周期函數(shù)無法在組件方法中通過 this 訪問到。
    • 屬性名應避免以 data 開頭，即不要命名成 dataXyz 這樣的形式，因為在 WXML 中， data-xyz="" 會被作為節(jié)點 dataset 來處理，而不是組件屬性。
    • 在一個組件的定義和使用時，組件的屬性名和data字段相互間都不能沖突（盡管它們位于不同的定義段中）。

      Component({
     options: {
       multipleSlots: true // 在組件定義時的選項中啟用多slot支持
     },
     /**
      * 組件的屬性列表
      */
     properties: {
       title: {            // 屬性名
         type: String,     // 類型（必填），目前接受的類型包括：String, Number, Boolean, Object, Array, null（表示任意類型）
         value: '標題'     // 屬性初始值（可選），如果未指定則會根據(jù)類型選擇一個
       },
       // 彈窗內容
       content: {
         type: String,
         value: '內容'
       },
       // 彈窗取消按鈕文字
       btn_no: {
         type: String,
         value: '取消'
       },
       // 彈窗確認按鈕文字
       btn_ok: {
         type: String,
         value: '確定'
       } 
     },
   
     /**
      * 組件的初始數(shù)據(jù)
      */
     data: {
       flag: true,
     },
   
     /**
      * 組件的方法列表
      */
     methods: {
       //隱藏彈框
       hidePopup: function () {
         this.setData({
           flag: !this.data.flag
         })
       },
       //展示彈框
       showPopup () {
         this.setData({
           flag: !this.data.flag
         })
       },
       /*
       * 內部私有方法建議以下劃線開頭
       * triggerEvent 用于觸發(fā)事件
       */
       _error () {
         //觸發(fā)取消回調
         this.triggerEvent("error")
       },
       _success () {
         //觸發(fā)成功回調
         this.triggerEvent("success");
       }
     }
   })
  

上邊會用到一個 triggerEvent下面我們就來介紹下：

• 自定義組件觸發(fā)事件時，需要使用 triggerEvent 方法，指定事件名、detail對象和事件選項。

• 觸發(fā)事件的選項包括：

  image

詳情介紹:

更新主題詳情

261天以來，Java架構更新了 646個主題，已經有120+位同學加入。微信掃碼關注java架構，獲取Java面試題和架構師相關題目和視頻。上述相關面試題答案，盡在Java架構中。