微信小程序的一點點心得

由於我這個小程序是用mpvue框架搭的，因此下面一些示例代碼中會含有mpvue語法，僅供參考，不喜勿噴。

• 分包

  小程序最多隻支持8M大小的項目，有時候項目比較龐大，則須要使用分包，而分包大小又不能超過2M
  下面給出分包的寫法
  在app.json中
  {

  "pages": [ // 這是主包的文件
     "pages/home/main",
     "pages/login/main"
   ],
   "subpackages": [ // 這是分包的文件
     {
       "root": "pages/exam/",
       "name": "exam",
       "pages": [
         "main",
         "examPaper/main",
         "exercise/main"
       ]
     }
     ]

  }

  跳轉到分包的路徑是root+pages，如
  wx.navigateTo（{ url: '/pages/exam/examPaper/main' }）

  注意，帶有底部導航欄中的頁面（也就是配置在app.json中tabBar中的頁面）必須寫在主包中

• 生命週期
  我這裏簡單說一下onLoad，onUnload，onShow，onHide的幾種常見場景
  a.小程序由前臺進入後臺（即用戶點擊右上角退出小程序或者按home鍵離開微信），觸發onHide
  b.帶有底部導航欄中的頁面互相切換時（wx.switchTab），觸發onShow與onHide
  c.使用wx.navigateTo或者wx.redirectTo的切換，頁面顯示觸發onLoad、onShow，離開頁面觸發onUnload（不會觸發onHide）
  d.由普通頁面使用wx.switchTab切換到帶有底部導航欄中的頁面時，如從登陸頁切換至首頁，登陸頁沒有觸發生命週期，首頁觸發onLoad，onShow

  e.由父界面跳轉到子頁面時，父頁面觸發onHide，子界面觸發onLoad，onShow。從子頁面返回父頁面時，子頁面onUnload，父頁面onShow

• 路由跳轉及傳參

  wx.navigateTo({ url: '/pages/logs/main?id=1' })

  獲得參數：$root.$mp.query.id
  由普通頁面跳轉到帶有底部導航欄的頁面是用wx.switchTab，普通跳轉用wx.navigateTo（至關於vue中的this.$router.push），wx.redirectTo（至關於vue中的this.$router.replace），wx.navigateBack({ delta: 1 }) （至關於vue中的this.$router.go(-1)）

• 獲取元素節點信息

  wx.createSelectorQuery().select('#test').boundingClientRect((rect) => {
       console.log(rect)
     }).exec()

• 下拉刷新上拉加載

  首先需在app.json中作以下配置才能使用onPullDownRefresh，onReachBottom兩個事件

  "window": {
       "enablePullDownRefresh": true
     }

  onPullDownRefresh() {

  // dosomething
  wx.stopPullDownRefresh() // 爲解決下拉以後頁面遲遲沒有回彈，最好加上這一行

  },
  onReachBottom() {

  // dosomething

  }
  如不要下拉刷新上拉加載，可在當前頁的配置文件main.json中將enablePullDownRefresh關閉

  {
       "enablePullDownRefresh": false
     }

• 圖片懶加載

  a. 圖片加載錯誤時用默認圖片代替

  <img :src=’圖片地址’ @error=’errorImg’>

  errorImg(){

  // 將加載失敗圖片替換爲默認圖片

  }

b. 懶加載

方法一：使用IntersectionObserver
小程序提供了一個IntersectionObserver的API，能夠用來監聽元素與頁面的相交狀況
可查看微信相關文檔： https://developers.weixin.qq....

<div class='scroll-view'>
    <div class='home'></div>
</div>
// 判斷class='home'的元素是否出如今屏幕中
onLoad() {
  const _observer = wx.createIntersectionObserver()
  _observer.relativeTo('.scroll-view')
   .observe('.home', (res) => {
    console.log(res.intersectionRatio > 0) // 若是大於0則表示相交
  })
}
//或者
onLoad() {
  const _observer = wx.createIntersectionObserver()
  _observer.relativeToViewport()
   .observe('.home', (res) => {
     console.log(res.intersectionRatio > 0)
  })
}

方法二：使用onPageScroll

onPageScroll: throttle(
  function(e) {
    wx.createSelectorQuery().select('.home').boundingClientRect((ret) => {
        if (ret.top <= wx.getSystemInfoSync().windowHeight) { // 判斷是否在顯示範圍內
          // dosomething
        }
      }).exec()
  }, 100
),
throttle(fn, interval) { // 節流
  let enterTime = 0 // 觸發的時間
  const gapTime = interval || 300 // 間隔時間，若是interval不傳，則默認300ms
  return function() {
    const context = this
    const backTime = new Date() // 第一次函數return即觸發的時間
    if (backTime - enterTime > gapTime) {
      fn.call(context, arguments)
      enterTime = backTime // 賦值給第一次觸發的時間，這樣就保存了第二次觸發的時間
    }
  }
}

• 動態改變頂部導航欄的文字

  導航欄上方標題是經過main.json配置的

  {

  "navigationBarTitleText": "首頁"

  }
  有時同一個頁面根據頁面內容會有不一樣的標題，此時須要動態配置導航欄標題名
  
  wx.setNavigationBarTitle({

  title: title

  })

  有時但願整個頁面佈滿屏幕，沒有導航欄文字，如上圖。此時能夠在當前頁面的main.json中配置

  {
    "navigationStyle": "custom"
  }

• textarea樣式穿透

  

小程序的textare中的z-index層級是最高的，任何元素都沒法遮住。這裏說一下思路，就不貼代碼了。
作一個跟當前textarea同樣的div（簡稱克隆div），textarea內容也展現到div中。當對話框彈出時，textarea隱藏，克隆div展現，對話框關閉時，textarea展現，克隆div隱藏

• 滾動彈出層時，彈出層下方的內容也會滾動

  方法一：改變scroll-y的值

  <scroll-view :scroll-y="scrollY">

  彈出層出現時scrollY=false
  彈出層關閉時scrollY=true
  方法二：不須要滾動時將頁面樣式設爲position:fixed，但此方法會使頁面滾到到頂部，介意慎用
  方法三：將滾動頁面最外層加上此屬性：catchtouchmove="return"

• 鍵盤彈出

  頁面下方有一個操做欄，當鍵盤彈起時，操做欄要定位在鍵盤上方，此時要用到小程序的一個事件，此爲小程序文檔截圖
  https://developers.weixin.qq....

  
  寫法參考：

  <textarea @keyboardheightchange="keyboardheightchange"</textarea>
     <div class="bottom-content" :style="{bottom: bottom + 'px'}">操做欄</div>
     keyboardheightchange(val) {
       this.bottom = val.target.height
     }
     focus(val) { // 也能夠用focus跟blur
       this.bottom = val.target.height
     }
     blur() {
       this.bottom = 0
     }

• wx-parse 用來解析html的插件，還挺好用的，有圖片的話，點擊圖片有預覽的效果

  https://github.com/icindy/wxP...

• 轉發

  onShareAppMessage: function(res) {
       return {
         title: '',
         path: '/pages/home/main',
         success: function(res) {
         },
         fail: function(res) {
         }
       }
     }

• 上傳圖片

  wx.chooseImage({

  count: 1, // 默認9
    sizeType: ['original', 'compressed'], // 能夠指定是原圖仍是壓縮圖，默認兩者都有
    sourceType: ['album', 'camera'], // 能夠指定來源是相冊仍是相機，默認兩者都有
    success: (chooseImageRes) => {
       const tempFilePaths = chooseImageRes.tempFilePaths[0]
       wx.uploadFile({
         url: url,
         filePath: tempFilePaths,
         name: 'fileData',
         header: { 'Content-Type': 'multipart/form-data' },
         formData: {
           method: 'POST'
         },
         success: (res) => {
           //dosomething
         }
      })
    }

  })

• 預覽圖片

  wx.previewImage({

  urls: [imgSrc] // 須要預覽的圖片http連接列表

  })

• 預覽pdf文檔

  wx.downloadFile({

  url: url,
    success(res) {
      wx.openDocument({
        filePath: res.tempFilePath,
        success(res) {
        },
        fail() {
          console.log('沒法打開此文檔，由於不支持該類型或已損壞')
        }
      })
    }

  })

• 掃碼

若是掃碼是要打開一個網頁的話，能夠單獨作一個只有webview的頁面，跳轉到此頁面，傳入url便可

wx.scanCode({
  onlyFromCamera: false,
  scanType: ['qrCode', 'barCode'], // 能夠指定掃二維碼仍是一維碼，默認兩者都有
  success: function(res) {
    const resultStr = res.result
    if (resultStr.indexOf('https') === 0) {
      wx.navigateTo({ url: `/pages/home/webView/main?url=${resultStr}` }) // 跳轉到webview的頁面
    } else {
      // dosomething
    }
  }
})

<div>
  <web-view :src="url"></web-view> // url經過onLoad(){ this.url = this.$root.$mp.query.url }獲取
</div>