Efficient Mini‑Program Development: Layout, Navigation, TabBar, Authentication, Logging and Optimization Practices

To meet rapid delivery demands and limited development resources, the article outlines a systematic approach to maximize mini‑program development efficiency through standardization, engineering, and componentization.

Layout solutions include using either the native navigation bar or a fully custom navigation bar; the custom approach is decomposed into StatusBar and NavigationBar using wx.getSystemInfoSync and wx.getMenuButtonBoundingClientRect to obtain layout metrics.

Custom TabBar is implemented via the custom-tab-bar component combined with wx.hideTabBar for backward compatibility, with example code:

/* hide original TabBar */
wx.hideTabBar();
/* render custom TabBar */
<CustomTabBar />

BasicPage component encapsulates common page structure, handling status‑bar padding, header rendering, and optional TabBar inclusion. Representative snippet:

class BasicPage extends Taro.Component {
  state = { menuButtonHeight: 32, menuButtonTop: 48, statusBarHeight: 44 };
  render() {
    return (
      <View className='basic-page'>
        {this.props.header && (
          <View className='basic-page-header' style={{
            paddingTop: `${this.state.statusBarHeight}px`,
            height: `${(this.state.menuButtonTop - this.state.statusBarHeight) * 2 + this.state.menuButtonHeight}px`
          }}>{this.props.renderHeader}</View>
        )}
        <View className='basic-page-body'>{this.props.renderBody}</View>
        {this.props.tab && <TabBar active={this.props.tabActive} />}
      </View>
    );
  }
}

User system is split into login and user‑info retrieval. Two authentication strategies are discussed: (1) client‑side wx.login followed by wx.getUserInfo , and (2) server‑side sessionKey handling without extra wx.login calls. The article also introduces a login‑queue mechanism to coordinate concurrent login requests, illustrated by:

let loginDoing = false;
const loginEvent = [];
async loginProcess() {
  if (this.user.token) return this.user;
  loginDoing = true;
  const { code } = await Taro.login();
  const result = await post(URL().user.login, { code });
  this.user = { ...result.user, token: result.token };
  loginDoing = false;
  loginEvent.forEach(cb => cb(this.user));
}
login() {
  if (loginDoing) return new Promise(resolve => loginEvent.push(resolve));
  return this.loginProcess();
}

Logging and data analysis leverage the WeChat LogManager API, wrapped in a Logger utility that prefixes logs with timestamps and emojis. Example:

const _logger = Taro.getLogManager({ level: 0 });
const Logger = {
  debug(...args) { _logger.debug(`${dayjs().format('YYYY-MM-DD HH:mm:ss')} 📝`, ...args); },
  info(...args) { _logger.info(`${dayjs().format('YYYY-MM-DD HH:mm:ss')} 🍺`, ...args); },
  warn(...args) { _logger.warn(`${dayjs().format('YYYY-MM-DD HH:mm:ss')} ⚠️`, ...args); },
  error(...args) { _logger.error(`${dayjs().format('YYYY-MM-DD HH:mm:ss')} [ Error ] ❌️`, ...args); }
};

Data collection follows a model of acquisition → analysis → application → feedback, with suggestions to use the built‑in mini‑program analytics or third‑party platforms such as Aladdin.

Performance optimizations include pre‑loading network requests before page mount, independent sub‑package loading, and custom pull‑to‑refresh components. A sample pre‑load class demonstrates fetching data in componentWillPreload and handling it in componentWillMount .

The article concludes that applying these practices enables rapid delivery of mini‑programs, as evidenced by a production app launched within five days, and encourages continuous iteration and sharing of knowledge.