getApp()

getApp() 函數(shù)是用來獲取 app 實(shí)例的函數(shù)，一般情況下沒啥問題，但是在幾個(gè)特殊的場(chǎng)景下它會(huì)給你帶來意想不到的 bug。
在 app.js 中的 onLaunch 回調(diào)函數(shù)中使用

// app.js
App({
 onLaunch() {
  console.info(getApp(), '!!');
 }
});

你會(huì)發(fā)現(xiàn)這個(gè)時(shí)候會(huì)輸出 undefined ，這其實(shí)可以理解，畢竟這個(gè)時(shí)候還在初始化階段，app 還沒出生。如果代碼僅僅是這么簡單的話，那你可以很容易的發(fā)現(xiàn)這個(gè)問題，一旦你在其中調(diào)用了一個(gè)方法，而這個(gè)方法又不小心在獲取 app 實(shí)例來獲取變量，那意外就產(chǎn)生了。

So~ 如果沒有同步要求，可以在 onLaunch 中調(diào)用函數(shù)可以包一層 setTimout 避免踩坑：

// app.js
App({
 onLaunch() {
  setTimeout(() => {
   // ... 調(diào)用其他函數(shù)
  });
 }
});

將 getApp() 賦值給一個(gè)變量

我們創(chuàng)建一個(gè) a.js 文件：

// a.js
const app = getApp();

export function checkVersion() {
 console.log('checked!');
 console.info('app', app, '!!');
}

上面的文件一般情況下不會(huì)遇到什么問題，但是一旦你在 app.js 中引入，那驚喜就產(chǎn)生了。

// app.js
import { checkVersion } from 'a';

App({
 onLaunch() {
  console.log('I\'m Fine！');
 },
 onShow() {
  checkVersion();
 }
});

這個(gè)時(shí)候你會(huì)發(fā)現(xiàn) app 變量是 undefined，這種錯(cuò)誤你可能很難發(fā)覺，特別是封裝的一個(gè)通用庫，平時(shí)好好的，但是突然在 app.js 中使用了一下，就哎嘿了。

So~ 為了避免這種問題，盡量減少公用 app 實(shí)例共享，而是在方法中直接使用 getApp() 來獲取實(shí)例對(duì)象。如果要使用全局變量，可以單獨(dú)一個(gè) js 文件來單獨(dú)存儲(chǔ)變量會(huì)更好，比如：

// globalStore.js

export default {
 userInfo: null,
 isIos: false,
 isLaunched: false,
};

// app.js
import store from 'globalStore';

App({
 onLaunch() {
  store.isLaunched = true;
 },
 onShow() {
  const { isLaunched } = getApp().store,
  console.log(isLaunched);
 },
 store,
});

這樣既可以通過導(dǎo)入模塊的方式獲取全局變量，又可以兼容通過 getApp().store 來獲取全局變量。

但是原則上我還是建議通過導(dǎo)入模塊的方式來讀寫全局變量，畢竟在某些情況下 getApp() 返回了 undefined 。

在頁面入口文件頂部定義變量

在頁面入口文件定義變量很常見，但是你一定要注意的是，頁面的入口文件只會(huì)執(zhí)行一次，并不是每個(gè)頁面實(shí)例獨(dú)立的，比如下面的代碼：

// pages/page/index.js
import { getDetailInfo } from 'api';
let ajaxLock = false;

Page({
 onLoad() {
  this.getRemoteData();
 },
 async getRemoteData() {
  if (ajaxLock) {
   return;
  }
  ajaxLock = true;
  try {
   await getDetailInfo();
  } catch(err) {
   // ... 處理錯(cuò)誤
  } finally {
   ajaxLock = false;
  }
 },
});

頁面邏輯比較簡單，一進(jìn)入頁面就請(qǐng)求遠(yuǎn)程數(shù)據(jù)，目測(cè)也沒啥問題，但是一旦同時(shí)打開多個(gè)該頁面，你會(huì)發(fā)現(xiàn)只有第一個(gè)頁面請(qǐng)求了數(shù)據(jù)，后面的頁面沒有請(qǐng)求，因?yàn)檫@幾個(gè)頁面都共享了 ajaxLock 這個(gè)變量，因此在頁面頂部聲明的變量，一定要注意使用場(chǎng)景。

頁面入口文件中 data 中直接賦值全局變量

直接上代碼：

// pages/page/index.js
Page({
 data: {
  isIos: getApp().store.isIos,
 },
});

// app.js
App({
 onLaunch() {
  this.getSysInfo();
 },
 getSysInfo() {
  return new Promise((resolve, reject) => {
   wx.getSystemInfoAsync({
    success: resolve,
    fail: reject,
   });
  }).then((res) => {
   const { store } = getApp();
   store.isIos = res.platform.toLowerCase() === 'ios';
  });
 },
 store: {
  isIos: false,
 },
});

上面代碼的主要邏輯就是需要知道當(dāng)前設(shè)備是不是 ios ，代碼在模擬器上跑著似乎很穩(wěn)定，但是一旦上了真機(jī)，就時(shí)好時(shí)壞了，因?yàn)?isIos 這個(gè)變量不是同步獲取狀態(tài)的，一旦賦值在頁面入口函數(shù)執(zhí)行完之后，那么狀態(tài)的展現(xiàn)就會(huì)不正確。
因此對(duì)于某些狀態(tài)不是同步賦值，千萬不要直接通過在初始化的時(shí)候直接給 data 賦值的方式去操作，最好放到 onLoad 回調(diào)函數(shù)中去賦值狀態(tài)。

你不知道的 wx.createSelectorQuery() and wx.createIntersectionObserver();

這兩個(gè)函數(shù)也是比較常用的，wx.createSelectorQuery 主要用來查詢某個(gè)元素，wx.createIntersectionObserver 用在需要處理元素是否在可視區(qū)。這兩個(gè)函數(shù)的問題目測(cè)純純的可愛，我也是在實(shí)現(xiàn)某個(gè)特殊需求的時(shí)候才發(fā)現(xiàn)，也真是后知后覺，不明覺厲，細(xì)思極恐...

我們來復(fù)現(xiàn)問題，頁面入口函數(shù)這么寫：

// pages/page/index.js
let index = 0

Page({
 data: {
  tag: 0
 },
 onLoad() {
  if (index++ < 2) {
   wx.navigateTo({
    url: '/pages/page/index'
   });
  }
  this.setData({
   tag: index
  },() => {
   setTimeout(() => {
    const { tag } = this.data;
    const query = wx.createSelectorQuery();
    // const query = this.createSelectorQuery();
    query.select(`.c-${ tag }`).boundingClientRect();
    query.exec((res) => {
     console.log(tag, res);
    });
   }, 2000);
  });
 }
});

<!-- 模板文件 -->
<view class="c-{{tag}}">demo</view>

我模擬了同時(shí)打開多個(gè)頁面的情況，在開發(fā)者工具中你就會(huì)發(fā)現(xiàn)，前兩個(gè)頁面的結(jié)果居然是 null ?。?！當(dāng)時(shí)我就覺得世界有點(diǎn)兒崩塌。因此我懷疑畢竟 wx.createSelectorQuery 是一個(gè)全局函數(shù)，因此它查詢的是當(dāng)前活躍窗口下的 wxml。怎么解決呢，我翻了翻官方文檔，用放大鏡找了找小字，發(fā)現(xiàn)有 this.createSelectorQuery 這個(gè)方法，抱著試一試的態(tài)度，問題就突然解決了。當(dāng)然 wx.createIntersectionObserver 也是同樣的問題，我就不做演示了。

So~ 為了身體好，我強(qiáng)烈建議直接使用 this.createSelectorQuery 和 this.createIntersectionObserver 。

以上是我這幾年開發(fā)微信小程序踩過的神坑，望你不要再踩上~~

總結(jié)

到此這篇關(guān)于微信小程序開發(fā)之你可能沒有踩過的坑的文章就介紹到這了,更多相關(guān)微信小程序開發(fā)的坑內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論